BuildMyOnlineStore Docs
BMOS buy buttons

Install human checkout and AI Agent Checkout with one snippet.

Use .bmos-buy to render a human Buy Now button, a visible AI Agent Checkout button, and machine-readable product metadata.

Open BMOS App Quick Start Store Strategy

Quick Start

Use .bmos-buy for new product pages, landing pages, and product sections.

1. Add the script once per page

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

2. Add a buy button where the product should appear

<div class="bmos-buy"
     data-store="STOREFRONT_UUID"
     data-product-id="PRODUCT_SKU"
     data-mode="human,agent"
     data-design="split"></div>
SKU rule: Use a sellable standalone SKU or child variant SKU for data-product-id. Do not use a parent family SKU as a direct button unless the page has a separate variant selector.

Attributes

Attribute Required Purpose
class="bmos-buy" Yes Marks the element for BMOS auto-rendering.
data-store Yes The BMOS storefront UUID.
data-product-id Yes The sellable product SKU or child variant SKU.
data-mode No human,agent, human, or agent. Defaults to human,agent.
data-design No Visual preset. Defaults to split.

Design Presets

Choose the preset that fits the merchant page. The merchant can also style the surrounding layout with site CSS.

Value Best Use
split Balanced default with human and agent buttons side by side.
stacked Full-width hero sections and landing pages.
compact Dense product grids, sidebars, and tight layouts.
outline Custom branded pages where the button should feel quieter.
pill Rounded, polished CTA style with light shadow.

Prompt for an AI Developer Agent

Merchants can paste this into their coding agent, then replace the storefront ID and product SKUs with values from their BMOS Buttons Manager. The agent should read Store Strategy first so it understands whether this is a brand site, mini site, distributor site, full store, or hybrid rollout.

You are helping me add BuildMyOnlineStore buy buttons to my storefront website.

Read the implementation docs first:
https://docs.buildmyonlinestore.com/bmos-buy-buttons/

Read the BMOS store strategy guide before deciding whether this page should be handled as a brand site, mini site, distributor site, buy-button-only enhancement, full store, or hybrid rollout:
https://docs.buildmyonlinestore.com/store-strategy/

Use the new BMOS .bmos-buy snippet, not the legacy .bmos-product snippet, for new pages.

Required script, once per page:
<script src="https://app.buildmyonlinestore.com/embed.js"></script>

Button snippet pattern:
<div class="bmos-buy" data-store="STOREFRONT_UUID" data-product-id="PRODUCT_SKU" data-mode="human,agent" data-design="split"></div>

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

Use real sellable product SKUs or child variant SKUs for data-product-id. Do not use parent family SKUs as direct buy buttons unless the page intentionally handles variant selection separately.

Store strategy:
- If this is an existing brand or product page, preserve the useful content and add BMOS buy buttons without replacing the page.
- If this is a mini site, only add buttons for the relevant product or SKU group.
- If this is a distributor or broad catalog site, preserve category breadth and product attribution.
- If external purchase destinations such as Amazon, Walmart, eBay, Shopify, or distributor pages are part of the site strategy, preserve or add those links where appropriate.

Inspect the page design and choose the best data-design value for each placement. Preserve the page styling and layout, add accessible surrounding text where helpful, and verify that the human Buy Now button and AI Agent Checkout button both render.

Verification Checklist