Sign In Get Started
View as Markdown llms.txt OpenAPI

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.