Getting started
Embed the widget
One script tag loads Shoprocket; data attributes decide what renders where. No build step, no framework required.
The loader script
Add the loader once per page, ideally before the closing body tag:
Loader
<script src="https://cdn.shoprocket.io/v3/widget.js"></script>The script is lazy and asynchronous - it won't block your page. It reads your publishable key from the mount elements, so there's nothing else to configure.
Mount points
A mount point is any element with a data-shoprocket attribute. The widget replaces it with the matching UI. Drop as many as you like on a page.
Mounts
<!-- Whole store: catalogue + cart + checkout -->
<div data-shoprocket="store"></div>
<!-- A single product -->
<div data-shoprocket="product" data-product="prod_123"></div>
<!-- A cart/checkout button -->
<div data-shoprocket="cart"></div>Attributes
| Field | Type | Description |
|---|---|---|
data-shoprocketrequired | string | What to render: store, product, or cart. |
data-product | string | Product ID, required when data-shoprocket="product". |
data-store | string | Store publishable key. Optional if a global key is set on the loader. |
Inline checkout
Checkout happens inside the widget - shoppers never leave your page or get redirected to a payment provider's screen.
Platform notes
- WordPress / page builders - paste the snippet into a Custom HTML block.
- Webflow / Framer - add an Embed / HTML element.
- Plain HTML - drop it straight into your markup.
Building a fully custom UI instead? Skip the widget and go straight to the REST API.