Pridajte tvorca náramkov do svojho Shopify

Od Camille G. · Aktualizované október 2026 · Čas čítania ≈ 9 min

Predávate kamenné náramky a chcete, aby si vaši zákazníci vytvorili svoje vlastné priamo vo vašom obchode Shopify? Môžete to urobiť bez inštalácie aplikácie a bez zmeny kódu vašej tém. Táto príručka vám ukáže štyri spôsoby, ako pridať staviteľa náramkov Loch Ness, od jednoduchého menu odkazu až po plávajúce tlačidlo na každej stránke, krok za krokom, a ako poslať každý náramok priamo do vášho košíka Shopify.

Pred tým ako začnete

Tvorca stránky má hostovaný na našich serveroch a objavuje sa vo vašom obchode. Vždy máte najnovšiu verziu, bez potreby akýchkoľvek aktualizácií na vašej strane. Potrebujete dve veci:

• tvoj identifikátor, odoslané Lochjom Nessom, keď je váš builder nastavený (napríklad my-shop);
• an Téma Online Store 2.0, ktorý pokrýva všetky nedávne Shopify motívy vrátane Dawn.

Vaše meno, logo, farby, ponuka, ceny, mena a výber kameňov sú viazané na vašu identifikáciu. Zmeníte ich zo svojej klientskej oblasti a automaticky sa aktualizujú všade naraz, bez toho aby ste sa museli vrátiť do Shopify.

Ktorú možnosť by ste mali zvoliť?

Môžete ich kombinovať. Mnohé obchody používajú dedikovanú stránku a pridajú na ňu odkaz v hlavnej ponuke.

Možnosť 1: odkaz v ponuke alebo hotové tlačidlo

Bez akéhokoľvek rámca sa stavebník otvára na celú stranu, vo vašich farbách. To mu dáva najviac miesta, najmä na telefónoch.

1. Pridaj to do ponuky. V administrácii Shopify prejdite na Online obchod → Navigácia, otvorte si hlavnú ponuku a kliknite Pridať položku menu.
2. Pomenuj to a vlepí adresu. Pomenujte to napríklad "Navrhnite si náramok", potom vložte túto adresu do poľa Odkaz:

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

Ak chcete zobraziť tlačidlo na domovskej stránke alebo v popise produktu, použite hotový gombík z vašej klientskej oblasti. Už používa vaše farby.

Možnosť 2: vyhradená stránka "Navrhnite si svoj náramok"

1. Vytvorte stránku. V administrácii chodte na Online obchod → Stránky → Pridať stránku. Dajte mu názov ("Navrhni si náramok") a uložte.
2. Vytvorte šablónu stránky. Choď na Online obchod → Témy → Prispôsobenie. V rozbaľovacom menu v hornej časti editora vyberte Stránky, potom Vytvoriť šablónu. Pomenujte to, napríklad bracelet-builder.
3. Pridajte vlastnú sekciu Liquid. V tejto šablóne kliknite Pridať sekciu a vybrať Vlastný kvapaliny.
4. Vložte kód. Vložte kód nižšie do poľa Custom Liquid a uložte.
5. Priraď šablónu. Vrať sa na Online obchod → Stránky, otvorte svoju stránku a vyberte bracelet-builder v Šablóna pole. Uložiť.
6. Pridaj to do ponuky. V Online obchod → Navigácia, pridajte položku ponuky odkazujúcu na túto 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/sk" style="color:inherit">Loch Ness&reg;</a></p>

Na počítači tvorca zobrazuje dva stĺpce: náramok na jednej strane, kamene na druhej. Na telefóne sa automaticky prepína na jeho mobilný rozloženie.

Možnosť 3: plávajúce tlačidlo na každej stránke

V rohu vašej predajne sa objaví malé okrúhle tlačidlo. Jedným kliknutím sa otvára tvorca v paneli bez opustenia stránky. Tvorca sa načítava iba pri prvom kliknutí, takže vaša predajňa zostáva rýchla.

1. Otvorte editor tém. Choď na Online obchod → Témy → Prispôsobenie.
2. Pridajte vlastnú sekciu Liquid do päty. V Päta oblasť ľavého panela, kliknite Pridať sekciu a vybrať Vlastný kvapaliny. Sekcia v päťke sa objavuje na každej stránke.
3. Vložte kód nižšie a uložte.
4. Zapni tlačidlo. V svojej klientskej oblasti zapnite plávajúce tlačidlo a vyberte jeho text a stranu (vľavo alebo vpravo). Kedykoľvek ho môžete vypnúť bez toho, aby ste sa dotykali 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/sk" style="color:inherit">Loch Ness&reg;</a></p>

Ak vaša téma neumožňuje sekcie v päte, vložte ten istý kód do Online Store → Motívy → … → Upraviť kód, v layout/theme.liquid súbor, tesne pred </body>.

Možnosť 4: kompaktný tvorca (stĺpec alebo stránka produktu)

Táto verzia vždy používa mobilné rozloženie v úzkom rámci. Hodí sa na bočný panel, stránku produktu náramku alebo blok "Skúste to" na domovskej stránke. Pridajte to do Vlastný kvapaliny sekcia alebo blok, ako 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/sk" style="color:inherit">Loch Ness&reg;</a></p>

Voliteľne: pridajte náramok priamo do vášho Shopify košíka

Štandardne sa hotový dizajn dostáva ako žiadosť o objednávku e-mailom. Ak chcete, vaša zákazníčka si môže dať svoj náramok priamo do vášho Shopify košíka a zaplatiť pri vašej pokladni, ako každý iný produkt. Toto funguje, keď je konštruktor vo vašom obchode, s možnosťami 2, 3 a 4. S odkazom v menu (možnosť 1) sa konštruktor otvára na celú stránku na našej stránke, takže objednávka e-mailom zostáva na mieste.

1. Zapnite to vo svojej oblasti klienta. V Obchod → Objednávky, zaškrtnutie Pridaj náramok do nákupného košíka mojej predajne a zadajte adresu vášho obchodu, napríklad https://www.my-shop.com. V tvojom obchode sa tlačidlo objednávky stáva Pridať do košíka.
2. Vytvorte produkt "Vlastný náramok". Shopify neumožňuje stránke nastaviť bezplatnú cenu v košíku, preto cena pochádza z variantu produktu. Vytvorte produkt s popisovačom custom-bracelet, s jednou možnosťou "Cena" a jednou variantou na každú možnú cenu (napríklad každých 0,50 € od 10 € do 150 €; hromadný editor alebo import CSV ušetrí čas). Odznačiť Sledovanie množstva takže varianty sa nikdy nezobrazia ako vypredané a udržiavajú produkt mimo vašich zbierok.
3. Vložte skript. Pridajte kód nižšie na rovnaké miesto Vlastný kvapaliny sekcia ako váš stavebník (možnosť 2 alebo 4), alebo v sekcii päty možnosti 3. Uložiť.

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

Keď váš zákazník klikne Pridať do košíkatvorca pošle náramok na vašu stránku: celková cena, mena, veľkosť zápästia, veľkosť korálika, zoznam kameňov, zloženie ako text a odkaz, ktorý opätovne otvorí presný náramok. Skript vyberie variantu, ktorej cena sa presne zhoduje s celkovým množstvom, pridá ju so zložením a potom otvorí košík.

Úplný formát správy je popísaný na našej stránke nápovedy Pridajte do košíka vášho obchodu. Z bezpečnostných dôvodov výrobca posiela náramok len na adresu obchodu nastavljenú vo vašej oblasti klienta a skript akceptuje len správy pochádzajúce z https://lochness-paris.com.

Niekoľko jazykov vo vašom obchode

Stavebník existuje v Angličtina, francúzština, španielčina a maďarčina (a mnoho ďalších na požiadavku). Ak chcete zmeniť jazyk, nahraďte /en/ na adrese s /fr/, /es/ alebo /hu/, a lang=en s zodpovedajúcim kódom pre plávajúce tlačidlo. Ak vaša obchod používa Shopify Markets s viacerými jazykmi, pridajte jednu sekciu Custom Liquid na každú jazykovú verziu, alebo sa nás spýtajte: vaša klientska zóna poskytuje kódy pre každý jazyk.

Skontroluj, či všetko funguje

• Staviteľ zobrazuje vašu meno a farby. Ak vidíte farby Loch Ness, je identifikátor v kóde pravdepodobne napísaný s chybou.
• Testujte na svojom telefóne, nielen v náhľade editora.
• Vytvor design testu a pošli ho. Skontrolujte, či sa požiadavka objednávky dostaví na e-mailovú adresu nastavenú pre vašu predajňu.
• S možnosťou pridať do košíka, vytvoriť testovaciu náramok: košík musí zobrazovať rovnakú cenu ako tvorca, s kompozíciou pod produktom.
• Pre plávajúce tlačidlo, počkajte až 5 minút po zapnutí v závislosti na zmenu v klientskej oblasti: zmena sa zobrazuje takto dlho.

Často kladené otázky

Zdroje

Shopify — Kvapalinový odkaz · Shopify — Skupiny sekcií (záhlavie a päta) · Shopify — Cart API reference (Ajax API) · MDN Web Docs — Element iframe · MDN Web Docs — Window.postMessage()

Napísané od Camille G., zakladateľa Loch Ness. Od roku 2013 do 2023 som navrhoval symbolické šperky pre vlastnú značku a odvtedy som sa naplno venuje vývoju webových aplikácií a nástrojov. Tento tvorca náramkov som naprogramoval sám. My story · GitHub · ORCID