Přidejte tvůrce náramků do svého Shopify

Autor: Camille G. · Aktualizováno v říjnu 2026 · Doba čtení ≈ 9 min

Prodáváte náramky z drahokamů a chcete, aby si je vaši zákazníci sami navrhli přímo ve vašem obchodě Shopify? Můžete to udělat bez instalace aplikace a bez úprav kódu svého motivu. Tato příručka ukazuje čtyři způsoby, jak přidat tvůrce náramků Loch Ness, od jednoduchého odkazu v nabídce až po plovoucí tlačítko na každé stránce, krok za krokem, a jak poslat každý náramek přímo do vašeho nákupního košíku Shopify.

Než začnete

Tvůrce zůstává hostován na našich serverech a objevuje se ve vašem obchodě. Vždy máte nejnovější verzi, aniž byste cokoli museli aktualizovat na své straně. Potřebujete dvě věci:

• tvůj identifikátor, poslán společností Loch Ness při nastavení vašeho tvůrce (například my-shop);
• an Motiv Online Store 2.0, který pokrývá všechna nedávná témata Shopify, včetně Dawn.

Vaše jméno, logo, barvy, menu, ceny, měna a výběr kamenů jsou vázány na váš identifikátor. Změňujete je z oblasti klienta a aktualizují se všude najednou, aniž byste se museli znovu dotýkat Shopify.

Kterou možnost byste měli zvolit?

Můžete je kombinovat. Mnoho obchodů používá vyhrazenou stránku a přidá na ni odkaz v hlavní nabídce.

Možnost 1: odkaz v nabídce nebo připravené tlačítko

Bez jakéhokoli rámečku se tvůrce otevírá na celou stránku v твojích barvách. To mu dává nejvíce místa, zvláště na telefonech.

1. Přidej to do menu. Ve vašem administrátoru Shopify přejděte na Internetový obchod → Navigace, otevřete hlavní nabídku a klikněte Přidat položku nabídky.
2. Pojmenujte to a vložte adresu. Pojmenujte to, například "Navrhněte si svůj náramek", poté vložte tuto adresu do pole Odkaz:

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

Chcete-li zobrazit tlačítko na domovské stránce nebo v popisu produktu, použijte hotový knoflík z vaší klientské oblasti. Už používá vaše barvy.

Možnost 2: Vyhrazená stránka „Navrhněte si svůj náramek"

1. Vytvořit stránku. Ve vašem administrátoru přejděte na Online obchod → Stránky → Přidat stránku. Dejte mu název ("Navrhněte si náramek") a uložte.
2. Vytvořte šablonu stránky. Jdi na Online obchod → Motivy → Přizpůsobit. V rozbalovacím menu v horní části editoru vyberte Stránky, pak Vytvořit šablonu. Pojmenujte jej například bracelet-builder.
3. Přidejte vlastní sekci Liquid. V této šabloně klikněte Přidat sekci a vybrat Vlastní kapalina.
4. Vložte kód. Vložte kód níže do pole Custom Liquid a uložte.
5. Přiřaďte šablonu. Vrátit se na Online obchod → Stránky, otevřete svou stránku a vyberte bracelet-builder v Šablona pole. Uložit.
6. Přidej to do menu. V Internetový obchod → Navigace, přidejte položku nabídky ukazující na tuto stránku.

<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/cs" style="color:inherit">Loch Ness&reg;</a></p>

Na počítači tvůrce zobrazuje dva sloupce: náramek na jedné straně, kameny na druhé. Na telefonu se automaticky přepíná na své mobilní rozložení.

Možnost 3: plovoucí tlačítko na každé stránce

V rohu vaší prodejny se zobrazí malé kulaté tlačítko. Jedním kliknutím se otevře tvůrce v panelu bez opuštění stránky. Tvůrce se načte pouze při prvním kliknutí, takže vaše prodejna zůstane rychlá.

1. Otevřete editor motivu. Jdi na Online obchod → Motivy → Přizpůsobit.
2. Přidejte do zápatí vlastní sekci Liquid. V Zápatí oblast levého panelu, klikněte Přidat sekci a vybrat Vlastní kapalina. Část v zápatí se zobrazuje na každé stránce.
3. Vložte níže uvedený kód a uložte.
4. Zapni tlačítko. V oblasti klienta zapněte plovoucí tlačítko a zvolte jeho text a stranu (vlevo nebo vpravo). Můžete jej kdykoli vypnout, aniž byste se dotýkali 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/cs" style="color:inherit">Loch Ness&reg;</a></p>

Pokud váš motiv neumožňuje sekce v zápatí, vložte stejný kód do Internetový obchod → Motivy → … → Upravit kód, v layout/theme.liquid soubor, právě před </body>.

Možnost 4: kompaktní tvůrce (sloupec nebo stránka produktu)

Tato verze vždy používá mobilní rozvržení v úzkém rámci. Hodí se do postranního panelu, na stránku produktu náramku nebo do bloku „Vyzkoušejte si" na domovské stránce. Přidejte ji do Vlastní kapalina sekci nebo bloku, jako v možnosti 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/cs" style="color:inherit">Loch Ness&reg;</a></p>

Volitelné: přidejte náramek přímo do svého Shopify košíku

Ve výchozím nastavení se vám hotový design dostane jako objednávka e-mailem. Pokud chcete, váš zákazník si může dát náramek přímo do vašeho Shopify košíku a zaplatit při vašem checkout, jako každý jiný produkt. To funguje, když je tvůrce ve vašem obchodě, s možnostmi 2, 3 a 4. S odkazem v menu (možnost 1) se tvůrce otevře na celou stránku na našem webu, takže emailová objednávka zůstane na místě.

1. Zapněte si to v oblasti klienta. V Obchod → Objednávky, zaškrtnutí Přidej náramek do nákupního košíku mého obchodu a zadejte adresu vašeho obchodu, například https://www.my-shop.com. Ve vašem obchodě se tlačítko objednávky stává Do košíku.
2. Vytvořit produkt "Vlastní náramek". Shopify neumožňuje stránce nastavit v košíku volnou cenu, takže cena pochází z varianty produktu. Vytvořte produkt s handlem custom-bracelet, s jednou volbou "Cena" a jednou variantou pro každou možnou cenu (například každých €0,50 od €10 do €150; hromadný editor nebo import CSV šetří čas). Zrušte zaškrtnutí Sledovat množství takže se varianty nikdy nezobrazí jako vyprodané a udržují produkt mimo vaše sbírky.
3. Vložte skript. Přidejte kód níže do stejného Vlastní kapalina sekci jako váš konstruktér (možnost 2 nebo 4), nebo v zápatí možnosti 3. Uložit.

<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>

Když váš zákazník klikne Do košíku, tvůrce odešle náramek na vaši stránku: celková cena, měna, velikost zápěstí, velikost korálku, seznam kamenů, složení jako text a odkaz, který znovu otevře přesný náramek. Skript vybere variantu, jejíž cena se přesně shoduje s celkem, přidá ji se složením a poté otevře košík.

Úplný formát zprávy je popsán na naší stránce nápovědy Přidat do košíku vaší obchodu. Z bezpečnostních důvodů výrobce odesílá náramek pouze na adresu obchodu nastavenou v části vašeho klientského profilu a skript přijímá pouze zprávy pocházející z https://lochness-paris.com.

Několik jazyků ve vašem obchodě

Stavbyvedoucí existuje v Angličtina, francouzština, španělština a maďarština (a mnoho dalších na požádání). Chcete-li změnit jazyk, nahraďte /en/ v adrese s /fr/, /es/ nebo /hu/, a lang=en s odpovídajícím kódem pro plovoucí tlačítko. Pokud váš obchod používá Shopify Markets s více jazyky, přidejte jednu sekci Custom Liquid na každou jazykovou verzi, nebo se zeptejte nás: vaše klientské prostředí poskytuje kódy pro každý jazyk.

Zkontroluj, že vše funguje

• Stavitel zobrazuje vaše jméno a barvy. Pokud místo toho vidíte barvy Loch Ness, je identifikátor v kódu pravděpodobně špatně napsán.
• Testujte na svém telefonu, nejen v náhledu editoru.
• Vytvořte testovací design a pošlete ho. Ověřte, že požadavek na objednávku dorazí na e-mailovou adresu nastavenou pro váš obchod.
• S možností přidat do košíku, vytvořit testovací náramek: košík musí zobrazovat stejnou cenu jako tvůrce, s композicí pod produktem.
• Pro plovoucí tlačítkopočkejte až 5 minut poté, co ho v klientské oblasti zapnete: změna se objeví do té doby.

Často kladené otázky

Zdroje

Shopify — Referenční kapalina · Shopify — Skupiny sekcí (záhlaví a zápatí) · Shopify — Cart API reference (Ajax API) · MDN Web Docs — Element iframe · MDN Web Docs — Window.postMessage()

Napsáno Camillem G., zakladatelem společnosti Loch Ness. Od roku 2013 do 2023 jsem navrhoval symbolické šperky pro svoji vlastní značku a od té doby se věnuji vývoji webových aplikací a nástrojů na plný úvazek. Tento tvůrce náramků jsem naprogramoval sám. Můj příběh · GitHub · ORCID