Add to your shop's cart (Shopify…)

Is your builder embedded in a page of your online shop? The button becomes "Add to cart" and the bracelet is sent to your page.

If your builder is embedded in a page of your online shop (Shopify, WooCommerce, Wix…), your customer can put her bracelet straight into your cart and pay on your site, instead of sending a request by email.

Turn it on

1. In Shop → Orders, tick Add the bracelet to my shop's cart.
2. Enter your website address, for example https://www.my-shop.com (with or without www both work).
3. Save, then ask your developer to add the small script below to the page that holds the builder.

On your page, the order button becomes Add to cart. Elsewhere (direct link to the builder, another site), the email order stays in place.

What your page receives

On click, the builder sends a message to your page (postMessage):

• total, currency: the total price and the currency;
• wrist_cm, bead_mm, real_length_cm: requested wrist size, bead size (a list, for example [8, 10], when sizes are mixed), actual length;
• beads and elements: the list, with name, qty and unit_price (plus length_mm for elements, size_mm for each stone: one line per stone and size);
• order_text: the composition as text, ready for an order note;
• design_url: the link that reopens exactly this bracelet.

For your developer (Shopify example)

window.addEventListener('message', async (e) => {
  if (e.origin !== 'https://lochness-paris.com') return;   // only the builder
  const d = e.data;
  if (!d || d.source !== 'lochness' || d.type !== 'bracelet:order') return;
  await fetch('/cart/add.js', {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{
      id: YOUR_BRACELET_VARIANT, quantity: 1,
      properties: { 'Composition': d.order_text, 'See the bracelet': d.design_url }
    }] })
  });
  window.location.href = '/cart';
});

How the price is set in the cart depends on your shop (one product per price, a custom pricing app…): your developer chooses.

See also: Receiving orders, Adding the builder to your website.

Updated on October 27, 2026