Add a bracelet builder to your Shopify

By Camille G. · Updated October 2026 · Reading time ≈ 9 min

Do you sell gemstone bracelets and want your customers to design their own, right on your Shopify store? You can do it without installing an app and without touching your theme’s code. This guide shows the four ways to add the Loch Ness bracelet builder, from a simple menu link to a floating button on every page, step by step, and how to send each bracelet straight to your Shopify cart.

Before you start

The builder stays hosted on our servers and appears on your store. You always get the latest version, with nothing to update on your side. You need two things:

• your identifier, sent by Loch Ness when your builder is set up (for example my-shop);
• an Online Store 2.0 theme, which covers all recent Shopify themes, including Dawn.

Your name, logo, colours, menu, prices, currency and choice of stones are tied to your identifier. You change them from your client area, and they update everywhere at once, without touching Shopify again.

Which option should you choose?

You can combine them. Many shops use a dedicated page and add a link to it in the main menu.

Option 1: a link in your menu or a ready-made button

Without any frame, the builder opens full page, at your colours. That gives it the most room, especially on phones.

1. Add it to the menu. In your Shopify admin, go to Online Store → Navigation, open your main menu and click Add menu item.
2. Name it and paste the address. Name it, for example “Design your bracelet”, then paste this address in the Link field:

https://lochness-paris.com/pwa/en/?client=YOUR-IDENTIFIER

To show a button on your home page or in a product description, use the ready-made button from your client area. It already uses your colours.

Option 2: a dedicated “Design your bracelet” page

1. Create the page. In your admin, go to Online Store → Pages → Add page. Give it a title (“Design your bracelet”) and save.
2. Create a page template. Go to Online Store → Themes → Customize. In the drop-down at the top of the editor, choose Pages, then Create template. Name it, for example bracelet-builder.
3. Add a Custom Liquid section. In this template, click Add section and choose Custom Liquid.
4. Paste the code. Paste the code below into the Custom Liquid field and save.
5. Assign the template. Go back to Online Store → Pages, open your page and choose bracelet-builder in the Template field. Save.
6. Add it to the menu. In Online Store → Navigation, add a menu item pointing to this page.

<iframe src="https://lochness-paris.com/pwa/en/?client=YOUR-IDENTIFIER" style="width:100%;height:860px;border:0" loading="lazy" title="Bracelet builder"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 Arial,sans-serif;text-align:center;color:#6b6b6b">Bracelet builder by <a href="https://lochness-paris.com/" style="color:inherit">Loch Ness&reg;</a></p>

On a computer, the builder shows two columns: the bracelet on one side, the stones on the other. On a phone, it switches automatically to its mobile layout.

Option 3: a floating button on every page

A small round button appears in a corner of your store. One click opens the builder in a panel, without leaving the page. The builder only loads on the first click, so your store stays fast.

1. Open the theme editor. Go to Online Store → Themes → Customize.
2. Add a Custom Liquid section to the footer. In the Footer area of the left panel, click Add section and choose Custom Liquid. A section in the footer appears on every page.
3. Paste the code below and save.
4. Turn the button on. In your client area, switch the floating button on and choose its text and side (left or right). You can switch it off at any time, without touching Shopify.

<script src="https://lochness-paris.com/pwa/widget.php?client=YOUR-IDENTIFIER&lang=en" async></script>
<p data-ln-credit style="margin:6px 0 0;font:12px/1.4 Arial,sans-serif;text-align:center;color:#6b6b6b">Bracelet builder by <a href="https://lochness-paris.com/" style="color:inherit">Loch Ness&reg;</a></p>

If your theme doesn’t allow sections in the footer, paste the same code in Online Store → Themes → … → Edit code, in the layout/theme.liquid file, just before </body>.

Option 4: a compact builder (column or product page)

This version always uses the mobile layout, in a narrow frame. It suits a sidebar, a bracelet product page or a “try it” block on the home page. Add it in a Custom Liquid section or block, as in option 2.

<iframe src="https://lochness-paris.com/pwa/en/?client=YOUR-IDENTIFIER&layout=mobile" style="width:420px;max-width:100%;height:780px;border:0;border-radius:16px" loading="lazy" title="Bracelet builder"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 Arial,sans-serif;text-align:center;color:#6b6b6b">Bracelet builder by <a href="https://lochness-paris.com/" style="color:inherit">Loch Ness&reg;</a></p>

Optional: add the bracelet straight to your Shopify cart

By default, a finished design reaches you as an order request by email. If you prefer, your customer can put her bracelet straight into your Shopify cart and pay at your checkout, like any other product. This works when the builder is on your store, with options 2, 3 and 4. With the menu link (option 1), the builder opens full page on our site, so the email order stays in place.

1. Turn it on in your client area. In Shop → Orders, tick Add the bracelet to my shop’s cart and enter your store address, for example https://www.my-shop.com. On your store, the order button becomes Add to cart.
2. Create a “Custom bracelet” product. Shopify doesn’t let a page set a free price in the cart, so the price comes from a product variant. Create a product with the handle custom-bracelet, with one option “Price” and one variant per possible price (for example every €0.50 from €10 to €150; the bulk editor or a CSV import saves time). Untick Track quantity so the variants never show as sold out, and keep the product out of your collections.
3. Paste the script. Add the code below in the same Custom Liquid section as your builder (option 2 or 4), or in the footer section of option 3. Save.

<script>
/* Loch Ness bracelet builder → Shopify cart */
window.addEventListener('message', async function (e) {
  if (e.origin !== 'https://lochness-paris.com') return;   // only the builder
  var d = e.data;
  if (!d || d.source !== 'lochness' || d.type !== 'bracelet:order') return;
  var product = await (await fetch('/products/custom-bracelet.js')).json();
  var cents = Math.round(d.total * 100);
  var variant = product.variants.find(function (v) { return v.price === cents && v.available; });
  if (!variant) { alert('This bracelet price is not available yet. Please contact us.'); return; }
  var res = await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: variant.id, quantity: 1,
      properties: { 'Composition': d.order_text, 'See the bracelet': d.design_url } }] })
  });
  if (res.ok) window.location.href = '/cart';
  else alert('The bracelet could not be added to the cart. Please try again.');
});
</script>

When your customer clicks Add to cart, the builder sends the bracelet to your page: total price, currency, wrist size, bead size, list of stones, the composition as text and a link that reopens the exact bracelet. The script picks the variant whose price matches the total exactly, adds it with the composition, then opens the cart.

The full message format is described in our help page Add to your shop’s cart. For security, the builder sends the bracelet only to the store address set in your client area, and the script only accepts messages coming from https://lochness-paris.com.

Several languages on your store

The builder exists in English, French, Spanish and Hungarian (and many more upon request). To change the language, replace /en/ in the address with /fr/, /es/ or /hu/, and lang=en with the matching code for the floating button. If your store uses Shopify Markets with several languages, add one Custom Liquid section per language version, or ask us: your client area gives the codes for every language.

Check that everything works

• The builder shows your name and colours. If you see the Loch Ness colours instead, the identifier in the code is probably misspelled.
• Test on your phone, not only in the editor preview.
• Make a test design and send it. Check that the order request arrives at the email address set up for your shop.
• With the add to cart option, make a test bracelet: the cart must show the same price as the builder, with the composition under the product.
• For the floating button, wait up to 5 minutes after switching it on in your client area: the change takes that long to appear.

Frequently asked questions

Sources

Shopify — Liquid reference · Shopify — Section groups (header and footer) · Shopify — Cart API reference (Ajax API) · MDN Web Docs — The iframe element · MDN Web Docs — Window.postMessage()

Written by Camille G., founder of Loch Ness. I designed symbolic jewelry for my own brand from 2013 to 2023, and I have been building web apps and tools full-time since. I code this bracelet builder myself. My story · GitHub · ORCID