Embed the widget

Create the embed in your dashboard under Embeds. Pick the widget type, configure everything visually (categories, columns, filters, theme), save, and copy the snippet. Paste it on your site.

<!-- Shoprocket Widget: Product catalog -->
<script src="https://cdn.shoprocket.io/v3/loader.js" data-pk="pk_live_xxxxxxxxxxxxxxxxxxxxxxxx"></script>
<div data-shoprocket="catalog" data-embed-id="emb_01HXY..."></div>

The loader sees data-embed-id and fetches the embed config from the API at runtime. Change a setting in the dashboard later, the widget picks it up on the next page load, no deploy required.

For full programmatic control (staged environments, server-rendered storefronts, template-driven snippets), configure embeds entirely via data-* attributes. No dashboard setup needed, but any future change requires a code edit.

<script src="https://cdn.shoprocket.io/v3/loader.js" data-pk="pk_live_xxxxxxxxxxxxxxxxxxxxxxxx" async></script>

<!-- Full inline config -->
<div data-shoprocket="catalog"
     data-filter-mode="categories"
     data-categories="cat_01HXY..."
     data-columns="4"
     data-limit="24"></div>

You can also mix approaches: start with a dashboard-managed embed and override specific attributes inline. Inline values win over the dashboard config for any attribute you set.

Eight embed types are available. Five are fully supported by the dashboard-managed flow (you configure them visually, the dashboard gives you the snippet). Three are inline-only: the widget will render them if you drop them onto a page, but the dashboard does not currently persist configurations for them.

प्रकार	Dashboard-managed	टिप्पणियाँ
catalog	हाँ	Product grid with filters, pagination, categories.
categories	हाँ	Browsable category grid that drills into products.
product-view	हाँ	Configurable single-product display with per-feature toggles.
cart	हाँ	Floating or inline shopping cart with checkout.
buy-button	हाँ	Inline add-to-cart button with optional product name and price.
product	No (inline only)	Simpler single-product display with a fixed layout. No dashboard config.
account	No (inline only)	Customer self-service portal. Always renders the same layout.
chat	No (inline only)	Customer chat tied to the store inbox. No configurable options.

For the 5 dashboard-managed types, attributes listed below also work as inline overrides on top of the dashboard config. For the 3 inline-only types, you configure them entirely via data-* attributes on the mount point.

Catalog

Full product grid with optional filters, pagination, and category navigation. The default home surface for most stores.

<div data-shoprocket="catalog"></div>

<!-- Filtered by categories -->
<div data-shoprocket="catalog"
     data-filter-mode="categories"
     data-categories="cat_01HXY...,cat_02KLM..."
     data-columns="4"
     data-limit="24"></div>

Catalog attributes

Single product

Render one specific product as a full detail page with gallery, variants, and add-to-cart.

<div data-shoprocket="product" data-id="prd_01HXY..."></div>

Product attributes

Product view

A more configurable product display, with per-feature show / hide controls.

<div data-shoprocket="product-view"
     data-product="prd_01HXY..."
     data-show="media,title,price,add-to-cart"></div>

Product-view attributes

Buy button

A compact add-to-cart button for inline placement (blog posts, landing pages, hero sections).

<!-- Direct add to cart -->
<div data-shoprocket="buy-button" data-product="prd_01HXY..."></div>

<!-- Specific variant, with product name + price on the button -->
<div data-shoprocket="buy-button"
     data-product="prd_01HXY..."
     data-variant="var_01KLM..."
     data-show="name,price"></div>

<!-- Opens the product modal instead of adding -->
<div data-shoprocket="buy-button" data-product="prd_01HXY..." data-action="view"></div>

Buy-button attributes

कार्ट

The shopping cart. Floats by default; also renders inline if you place a mount point on the page.

<!-- Default: floating bubble, bottom-right -->
<div data-shoprocket="cart"></div>

<!-- Sidebar drawer that slides from the top-left -->
<div data-shoprocket="cart" data-position="top-left" data-style="sidebar"></div>

<!-- Inline cart (not floating, renders in flow) -->
<div data-shoprocket="cart" data-floating="false"></div>

Cart attributes

श्रेणियाँ

A browsable category grid. Click into a category to drill down to its products.

<div data-shoprocket="categories"
     data-categories="cat_01HXY...,cat_02KLM..."
     data-columns="3"></div>

Categories attributes

खाता

Customer self-service portal: past orders, saved addresses, profile.

<div data-shoprocket="account"></div>

Chat

Customer chat tied to the store inbox. Visitors can message the merchant directly from the storefront.

<div data-shoprocket="chat"></div>

You can place as many embeds as you want, on as many pages as you want. They all share the same cart state. A typical product page might have:

<!-- Hero section with inline product view -->
<div data-shoprocket="product" data-id="prd_01HXY..."></div>

<!-- Inline buy buttons in feature callouts -->
<div data-shoprocket="buy-button" data-product="prd_02WQR..." data-show="name,price"></div>

<!-- Related products carousel at the bottom -->
<div data-shoprocket="catalog" data-filter-mode="products" data-products="prd_03ABC...,prd_04DEF..." data-display-mode="carousel"></div>

<!-- Floating cart, always present -->
<script src="https://cdn.shoprocket.io/v3/loader.js" data-pk="pk_live_..." async></script>

The widget itself ships CDN-only, but the Core SDK is published to NPM under MIT. Use it when you want tight framework integration, server-side rendering, or a fully custom UI backed by the same API the widget uses.

npm install @shoprocket/core

import { ShoprocketCore } from '@shoprocket/core';

const sr = new ShoprocketCore({
  publicKey: 'pk_live_xxxxxxxxxxxxxxxxxxxxxxxx',
  locale: 'en',
});

// Fetch products
const products = await sr.products.list();

// Manage the cart
const cart = await sr.cart.get();
await sr.cart.addItem({ productId: 'prd_01HXY...' });

The Core SDK exposes service namespaces covering the full Public API: products, cart, categories, orders, customers, auth, chat, places, themes, reviews.

The widget dispatches CustomEvents on the window so your page can react to cart activity, fire analytics pixels, or trigger your own UI changes.

कार्ट

window.addEventListener('shoprocket:cart:loaded', (e) => {
  // Fires once after the cart finishes its initial load.
  // e.detail.cart: { items, itemCount, currency, totals, ... }
});

window.addEventListener('shoprocket:cart:updated', (e) => {
  // Fires after a successful add. Detail is minimal, call Shoprocket.cart.get()
  // for the full state.
  // e.detail: { productId, variantId }
});

window.addEventListener('shoprocket:product:added', (e) => {
  // Fires alongside cart:updated with the product snapshot.
  // e.detail.product: { id, name, price, media, variantText }
});

window.addEventListener('shoprocket:cart:error', (e) => {
  // Fires when a cart operation fails (stock, validation, network).
  // e.detail: { message, type?, availableQuantity?, currentQuantity? }
  // type is one of: 'out_of_stock' | 'insufficient_stock'
});

चेकआउट

window.addEventListener('shoprocket:checkout:success', (e) => {
  // Fires after a successful order completion.
  // e.detail: order object (id, orderNumber, currency, totals, items, ...)
  gtag('event', 'purchase', {
    value: e.detail.totals.total.amount / 100,
    currency: e.detail.currency,
  });
});

window.addEventListener('shoprocket:order:confirmed', () => {
  // Explicit confirmation step. Cart token is regenerated after this fires.
});

उत्पाद

window.addEventListener('shoprocket:product:open',  (e) => { /* e.detail: { productId | slug | openFirst: true } */ });
window.addEventListener('shoprocket:product:close', () => { /* product detail closed */ });

Account + chat

window.addEventListener('shoprocket:account:open',  () => { /* account drawer opened */ });
window.addEventListener('shoprocket:account:close', () => { /* account drawer closed */ });
window.addEventListener('shoprocket:chat:open',     () => { /* chat opened */ });
window.addEventListener('shoprocket:chat:close',    () => { /* chat closed */ });
window.addEventListener('shoprocket:chat:message',  (e) => { /* e.detail: { content } */ });

Fire these events on window to drive the widget from your own code (e.g. wire up a custom mini-cart button).

window.dispatchEvent(new CustomEvent('open-cart'));
window.dispatchEvent(new CustomEvent('close-cart'));
window.dispatchEvent(new CustomEvent('toggle-cart'));

The Core SDK, if you have it loaded, also exposes imperative helpers:

// Inside the bundled widget, the global `Shoprocket` object is exposed.
Shoprocket.cart.get();          // current cart state
Shoprocket.product.open('prd_01HXY...');
Shoprocket.account.open();
Shoprocket.chat.open();

The widget renders inside Shadow DOM and injects its own theme CSS. You do not need to include any stylesheet. To customise the look, select a theme in the dashboard under Settings, Branding, or override the CSS variables exposed by the widget.

<style>
  .shoprocket {
    --sr-primary-color: #FF5C00;
    --sr-text-color: #1a1a1a;
    --sr-font-family: 'Inter', sans-serif;
  }
</style>

All internal styles use the --sr-* prefix for namespacing. See the dashboard theme editor for the full list of customisable properties.

Minimal CSP directives for a page hosting the widget:

script-src  'self' https://cdn.shoprocket.io;
style-src   'unsafe-inline' https://cdn.shoprocket.io;
connect-src https://api.shoprocket.io;
img-src     https:;

The widget does not require eval or unsafe-eval. It injects a style tag for the selected theme, which is why unsafe-inline is needed for style-src (or use specific style hashes).