Store Builder

<script src="https://app.buildmyonlinestore.com/embed.js"></script>

<div class="bmos-buy"
  data-store="STOREFRONT_ID"
  data-product-id="PRODUCT_SKU"
  data-mode="human,agent"
  data-design="split"></div>

<a href="https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID"
  rel="alternate"
  data-bmos-agentic-store="true"
  data-bmos-feed="https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID">
  AI-agent ready store powered by BMOS
</a>

<link rel="alternate"
  type="application/json"
  title="BMOS public JSON feed for STORE_NAME"
  href="https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID">
<meta name="bmos-agentic-store-feed"
  content="https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID">

# llms.txt
# BMOS public JSON feed for STORE_NAME
https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID

GET https://app.buildmyonlinestore.com/api/store-builder/context/STOREFRONT_ID

/
/collections/
/collections/{category-slug}/
/products/{product-slug}/
/search/
/about/
/contact/

You are helping me build a full catalog ecommerce frontend for my BuildMyOnlineStore storefront.

Important architecture:
- Keep this site headless.
- Use BuildMyOnlineStore as the source of truth for product data, checkout, and agentic commerce metadata.
- Do not create a separate product database unless I explicitly ask.
- Do not hard-code prices if the page can fetch them from BMOS.
- Use BMOS .bmos-buy buttons for checkout.
- BMOS checkout buttons do not work by HTML alone. You must load the BMOS embed.js script on every page that contains .bmos-buy buttons.

Storefront:
- Store name: STORE_NAME
- Storefront ID: STOREFRONT_ID
- Product/agentic feed: https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID
- Store Builder context API: https://app.buildmyonlinestore.com/api/store-builder/context/STOREFRONT_ID
- Store Builder docs: https://docs.buildmyonlinestore.com/store-builder/
- BMOS buy button docs: https://docs.buildmyonlinestore.com/bmos-buy-buttons/
- Store strategy docs: https://docs.buildmyonlinestore.com/store-strategy/
- Embed script: https://app.buildmyonlinestore.com/embed.js
- Agentic Store domain: STORE.agent
- Agentic Store URL: https://STORE.agent
- Boost Discoverability page in BMOS: https://app.buildmyonlinestore.com/storefronts/STOREFRONT_ID/agentic-store/boost

Build a full storefront frontend with:
- homepage;
- catalog grid;
- category or collection pages if feed data supports categories;
- product detail pages;
- search/filter/sort where appropriate;
- responsive mobile layout;
- accessible product cards;
- SEO-friendly titles/descriptions;
- product images from the feed;
- price and availability display;
- BMOS checkout buttons on product cards or product detail pages.

Product data rule:
- Use real SKUs from the BMOS feed or BMOS product APIs only.
- The BMOS public feed uses `id` as the checkout SKU, `title` as the product name, `image_link` as the primary image URL, and `offers.price` plus `offers.priceCurrency` for price display.
- Normalize those BMOS feed fields into your app's local product/card shape before rendering. Do not assume the feed has `name`, `image`, `images`, or top-level `price` fields.
- If the site already has product listing pages, preserve or repair its existing product adapter. Do not remove mock/fallback data or change SKU wiring without confirming the replacement adapter still maps titles, images, prices, slugs, and descriptions correctly.
- Do not invent placeholder SKUs, fallback products, or mock prices for live checkout buttons.
- If the BMOS feed returns zero products, stop and report that the catalog/feed needs to be fixed before adding .bmos-buy buttons.

Critical embed.js requirement:
Every page that uses BMOS checkout buttons must include this script once, ideally before the closing </body> tag:
<script src="https://app.buildmyonlinestore.com/embed.js"></script>

If this script is missing, the .bmos-buy divs will stay as empty placeholder elements and the human Buy Now and AI Agent Checkout buttons will not render.

For each sellable product or child variant SKU, use:
<div class="bmos-buy" data-store="STOREFRONT_ID" data-product-id="PRODUCT_SKU" data-mode="human,agent" data-design="split"></div>

Supported data-design values:
- split
- stacked
- compact
- outline
- pill

SKU rule:
- Use sellable standalone SKUs and child variant SKUs for direct buy buttons.
- Do not use parent family SKUs as direct buy buttons unless you build a variant selection UI first.

Agentic commerce:
- Link to the BMOS agentic feed in the site metadata or footer.
- If an Agentic Store domain is connected, mention and link the .agent domain where useful, such as the footer, About page, or machine-readable metadata.
- Preserve machine-readable commerce metadata generated by .bmos-buy.
- Do not remove hidden JSON-LD or agentic checkout attributes.

Boost discoverability:
- Add at least one visible BMOS discoverability badge or feed link to the storefront footer, About page, or trust area.
- The badge must link to the BMOS agentic feed and include rel="alternate" plus data-bmos-agentic-store="true".
- Add a head link tag and bmos-agentic-store-feed meta tag pointing to the BMOS agentic feed.
- Add or update /llms.txt with a BMOS feed entry when the site uses llms.txt.

Design:
- Match my brand and product category.
- Avoid a generic ecommerce template.
- Make product browsing fast and clear.
- Use a polished modern layout, but prioritize conversion and scanability.

Store strategy:
- Read the BMOS store strategy docs before deciding whether this should be a brand site, mini site, distributor site, buy-button enhancement, full store, or hybrid rollout.
- If this is a brand site, preserve useful product education and support multiple purchase destinations when appropriate.
- If this is a mini site, expose only the relevant SKU subset for this product/category.
- If this is a distributor site, expect broader catalogs, brands, pricing overrides, and feed quality work.

Verification:
- Confirm product data loads.
- Confirm product images render.
- Confirm prices and availability are visible.
- Confirm product listings looked correct before and after checkout/SKU changes.
- Confirm collection/product cards do not show blank titles, blank prices, "No Image", `undefined`, or placeholder product copy when the BMOS feed has real values.
- Confirm BMOS buy buttons render.
- Confirm the human Buy Now button opens checkout.
- Confirm AI Agent Checkout renders.
- Confirm mobile layout works.

You are helping me add BuildMyOnlineStore commerce and agentic discovery to an existing website.

Important context:
- This is an established website, not a blank new build.
- Preserve all existing live URLs unless I explicitly approve a redirect.
- Do not delete legacy product, category, blog, landing, or content pages during the first rollout.
- Do not create 404s for currently indexed URLs.
- Prefer coexistence first: add BMOS-powered catalog functionality while keeping the current site structure alive.
- Use BuildMyOnlineStore as the source of truth for product data, checkout, and agentic commerce metadata.

Storefront:
- Store name: STORE_NAME
- Storefront ID: STOREFRONT_ID
- Product/agentic feed: https://app.buildmyonlinestore.com/agentic-commerce/feeds/STOREFRONT_ID
- Store Builder context API: https://app.buildmyonlinestore.com/api/store-builder/context/STOREFRONT_ID
- Store Builder docs: https://docs.buildmyonlinestore.com/store-builder/
- BMOS buy button docs: https://docs.buildmyonlinestore.com/bmos-buy-buttons/
- Store strategy docs: https://docs.buildmyonlinestore.com/store-strategy/
- Embed script: https://app.buildmyonlinestore.com/embed.js
- Agentic Store domain: STORE.agent
- Agentic Store URL: https://STORE.agent
- Boost Discoverability page in BMOS: https://app.buildmyonlinestore.com/storefronts/STOREFRONT_ID/agentic-store/boost

First, create a roadmap before changing code.

Read the BMOS store strategy docs before the roadmap:
https://docs.buildmyonlinestore.com/store-strategy/

Use that guide to classify this website as a brand site, mini site, distributor site, or hybrid. That classification should inform whether you add buy buttons to existing pages, create a full BMOS store, curate a narrow SKU subset, support external marketplace links, or preserve distributor-style catalog breadth.

The roadmap must include:
- current site framework and route structure;
- existing product/category/blog URLs that should be preserved;
- proposed BMOS-powered routes;
- SKU-to-URL mapping plan;
- legacy page enhancement plan;
- redirect/canonical policy;
- verification checklist.

Rollout strategy:
- Start with BMOS infrastructure and shared components.
- Add or update BMOS feed metadata.
- Add BMOS checkout buttons to selected pages.
- Launch any new BMOS catalog routes in parallel with existing pages when route safety is unclear.
- Do not replace root product URLs or long-lived SEO pages in the first pass.
- Only recommend 301 redirects after SKU, slug, content, metadata, image, and conversion parity are verified.

Product data rule:
- Use real SKUs from the BMOS feed or BMOS product APIs only.
- The BMOS public feed uses `id` as the checkout SKU, `title` as the product name, `image_link` as the primary image URL, and `offers.price` plus `offers.priceCurrency` for price display.
- Normalize those BMOS feed fields into your app's local product/card shape before rendering. Do not assume the feed has `name`, `image`, `images`, or top-level `price` fields.
- If the site already has product listing pages, preserve or repair its existing product adapter. Do not remove mock/fallback data or change SKU wiring without confirming the replacement adapter still maps titles, images, prices, slugs, and descriptions correctly.
- Do not invent placeholder SKUs, fallback products, or mock prices for live checkout buttons.
- If the BMOS feed returns zero products, stop and report that the catalog/feed needs to be fixed before adding .bmos-buy buttons.

Critical embed.js requirement:
Every page that renders a BMOS buy button must include this script exactly once:
<script src="https://app.buildmyonlinestore.com/embed.js"></script>

If this script is missing, the .bmos-buy divs will stay empty and the human Buy Now and AI Agent Checkout buttons will not render.

For each sellable product or child variant SKU, use:
<div class="bmos-buy" data-store="STOREFRONT_ID" data-product-id="PRODUCT_SKU" data-mode="human,agent" data-design="split"></div>

Supported data-design values:
- split
- stacked
- compact
- outline
- pill

SKU rule:
- Use sellable standalone SKUs and child variant SKUs for direct buy buttons.
- Do not use parent family SKUs as direct buy buttons unless you build a variant selection UI first.

Existing page enhancement:
- If an existing page already ranks or has useful content, keep that URL live.
- Add BMOS price, availability, and checkout buttons to the existing page where appropriate.
- Preserve the existing page title, meta description, canonical strategy, internal links, and structured data unless there is a clear reason to change them.
- Do not remove years of content just because a new BMOS product detail page can be generated.

Parallel catalog routes:
- If the current product URLs are risky to replace, create non-conflicting routes first, such as:
  - /collections/
  - /collections/{category-slug}/
  - /products/{product-slug}/
  - /search/
- Keep existing legacy/root product URLs active until a redirect map is approved.

Agentic commerce:
- Link to the BMOS agentic feed in site metadata or footer.
- If an Agentic Store domain is connected, mention and link the .agent domain where useful.
- Preserve machine-readable commerce metadata generated by .bmos-buy.
- Do not remove hidden JSON-LD or agentic checkout attributes.

Boost discoverability:
- Add at least one visible BMOS discoverability badge or feed link to the storefront footer, About page, or trust area.
- The badge must link to the BMOS agentic feed and include rel="alternate" plus data-bmos-agentic-store="true".
- Add a head link tag and bmos-agentic-store-feed meta tag pointing to the BMOS agentic feed.
- Add or update /llms.txt with a BMOS feed entry when the site uses llms.txt.

Verification:
- Confirm no existing live URLs were removed.
- Confirm product data loads from BMOS.
- Confirm product images render.
- Confirm prices and availability are visible where intended.
- Confirm product listings looked correct before and after checkout/SKU changes.
- Confirm collection/product cards do not show blank titles, blank prices, "No Image", `undefined`, or placeholder product copy when the BMOS feed has real values.
- Confirm BMOS buy buttons render.
- Confirm human Buy Now opens checkout.
- Confirm AI Agent Checkout renders.
- Confirm embed.js is included once on pages with .bmos-buy.
- Confirm BMOS feed metadata appears in the head where intended.
- Confirm the Boost Discoverability badge or feed link appears.
- Confirm /llms.txt includes the BMOS feed when applicable.
- Confirm mobile layout works.