Loch Ness · PLUGINS
By Camille G., founder of Loch Ness · Published July 12, 2026 · Read time ≈ 6 min
About the author
Camille G. has been creating handcrafted and symbolic jewelry since 2013. A full-stack developer, she designs and codes the composer presented here herself, with several contributions to open source projects to her credit. This dual perspective — artisanal and technical — allows her to master both the customer experience and the solution that powers it. Researcher and craftsperson, she publishes her work under the ORCID identifier 0009-0009-0364-6396. This article draws on both this hands-on experience and official Shopify documentation, cited at the end of the page.
Do you sell gemstone bracelets (crystal healing) and would like your customers to compose their own, directly on your shop? Good news: on Shopify, you can do this without installing any app and without touching your theme’s code. This tutorial shows you, step by step, how to add the Loch Ness composer to your site in minutes.
1. What you need before you start
The integration is based on a simple and proven method: the composer is loaded into your page via a secure frame (an “iframe”). In practice, the composer remains hosted on our servers and displays on yours: you have nothing to host, nothing to update, and you benefit automatically from the latest improvements.
Only two things are necessary: your subscriber ID (provided by Loch Ness when you activate your account, for example my-shop), and a recent Shopify theme. All themes edited since 2021 — including Dawn, the default theme — include the necessary block by default.
2. Add the composer, step by step
Go to your Shopify admin, then follow these five steps:
1. Go to Online Store → Themes, then click Customize.
2. Open the page where you want to display the composer (a dedicated “Compose Your Bracelet” page, or a product page).
3. Click Add a section (or Add a block), and choose Custom Liquid.
4. Paste the code from section 3 below, replacing YOUR-IDENTIFIER with yours.
5. Click Save. The composer appears immediately in the preview.
2. Open the page where you want to display the composer (a dedicated “Compose Your Bracelet” page, or a product page).
3. Click Add a section (or Add a block), and choose Custom Liquid.
4. Paste the code from section 3 below, replacing YOUR-IDENTIFIER with yours.
5. Click Save. The composer appears immediately in the preview.
In practice. Many creators prefer to create a dedicated page titled “Compose Your Bracelet” and add it to the main menu. The composer has more room there than in the middle of a product page, and the link is easy to share on Instagram or by message.
3. The code to paste
Copy the block below and paste it into the Custom Liquid field. Just remember to replace YOUR-IDENTIFIER with the identifier Loch Ness provided you.
<div class=”ln-composeur” style=”max-width:900px;margin:0 auto;background:#f7f5f0;border:1px solid #d8d4c8;border-radius:12px;overflow:hidden;”> <iframe src=”https://visual.scaleyourshop.app/?client=YOUR-IDENTIFIER” style=”width:100%;height:900px;border:0;display:block;” loading=”lazy” title=”Bracelet Composer” allow=”clipboard-write”></iframe> </div> <style>@media (max-width:768px){.ln-composeur iframe{height:680px;}}</style>
To copy: click in the dark frame above, press Ctrl+A (or ⌘+A on Mac) to select all, then Ctrl+C (or ⌘+C) to copy.
Tip: avoid pasting this code in a product description via the classic text editor. Shopify sometimes filters iframes there. The “Custom Liquid” block, on the other hand, applies no filters.
4. English version and frequently asked questions
Selling internationally? To display the composer in English, simply replace the URL with: https://visual.scaleyourshop.app/index-en.html?client=YOUR-IDENTIFIER. The rest of the block doesn’t change.
Does the composer adapt to my brand? Yes. Your colors, logo, prices and stone selection are linked to your identifier. Simply send us your preferences and we’ll configure the composer to match your brand.
What about mobile? The composer is designed for touch and displays perfectly on phones. Height adjusts automatically thanks to the code provided.
Do I need to install an app from the Shopify App Store? No, and that’s by design: no app to install, no slowdown of your shop. A simple block is enough.
Give your customers the bracelet they imagine
Test the composer for free, then activate it on your Shopify store with your own identity. We guide you at every step.
Sources
1. Shopify — Add custom Liquid content to a theme (official documentation) — help.shopify.com
2. Shopify — Online Store 2.0 themes and dynamic sections — help.shopify.com
3. MDN Web Docs — The iframe element and loading attribute — developer.mozilla.org
Article written by Loch Ness. The data cited belongs to their respective authors and is reproduced for informational purposes, with links to the original source.