# Add an AI ring builder to a Shopify store

No Shopify app is needed: the ring builder installs with a snippet in your theme. Shoppers design their ring and the jeweler receives the lead. It doesn't add products to the Shopify cart; custom rings are quoted by the jeweler after the design.

## 1. Create a page for the ring builder (optional)

In the Shopify admin, go to **Online Store → Pages → Add page**, name it (for example "Design Your Ring") and save. Add it to your menu under **Online Store → Navigation**.

## 2. Add the ring builder with a Custom Liquid section

For an inline ring builder or a popup button on one page:

1. Go to **Online Store → Themes → Customize** and open the page you want (use the page selector at the top).
2. Click **Add section** and choose **Custom Liquid**.
3. Paste the snippet into the **Liquid** field, then click **Save**.

```html
<div data-showroompro-ring-builder="YOUR_TOKEN"></div>
<script src="https://www.showroompro.ai/embed.js" async></script>
```

For a popup button instead:

```html
<div data-showroompro-ring-builder="YOUR_TOKEN" data-mode="popup"></div>
<script src="https://www.showroompro.ai/embed.js" async></script>
```

## 3. Or add a floating button to every page

1. Go to **Online Store → Themes**, click **⋯** on your current theme, then **Edit code**.
2. Open **Layout → theme.liquid** and find `</body>` near the bottom.
3. Paste the snippet on a new line directly above it, then click **Save**.

```html
<script src="https://www.showroompro.ai/embed.js" data-token="YOUR_TOKEN" data-mode="floating" async></script>
```

## 4. Check it on your store

Open the storefront on your real domain (or your `.myshopify.com` domain). The ring builder loads right away, and the dashboard shows **Live on** your store's domain.

## Use a theme button instead

Most themes let you set a link on buttons and menu items. Add the floating snippet (or `<script src="https://www.showroompro.ai/embed.js" data-token="YOUR_TOKEN" async></script>` in `theme.liquid` for no corner button), then set the button's link to `#showroompro-ring-builder`. Clicking it opens the ring builder.

## Notes

- Changing themes? Re-add the section or the `theme.liquid` line to the new theme.
- Vintage (pre-2.0) themes without Custom Liquid sections: paste the inline snippet into the page's content using the **Show HTML** (`<>`) button in the page editor.

---

Source: https://www.showroompro.ai/docs/install/shopify · Last updated 2026-10-16 · All docs: https://www.showroompro.ai/llms.txt