Dodajte graditelj naramnic v vašo Shopify

Avtorja Camille G. · Posodobljeno oktober 2026 · Čas branja ≈ 9 min

Ali prodajate naramnice iz dragem kamnov in želite, da si njihove oblike zasnovani vaši kupci sami, direktno v vašem Shopify trgovinam? To lahko naredite brez nameščanja aplikacije in brez spreminjanja kode vaše teme. Ta vodnik prikazuje štiri načine za dodajanje graditelja naramnice Loch Ness, od preprostega menujske povezave do lebdeče gumba na vsaki strani, korak za korakom, in kako poslati vsako naramnico direktno v vašo Shopify košarico.

Preden začnete

Gradnik ostaja nameščen na naših strežnikih in se pojavlja v vaši trgovini. Vedno imate najnovejšo različico, brez potrebe po posodobitvah s vaše strani. Potrebujete dve stvari:

• tvoj identifikator, poslano s strani Loch Ness, ko je vaš graditelj nastavljen (na primer my-shop);
• an Tema Online Store 2.0, ki pokriva vse nedavne Shopify teme, vključno z Dawn.

Vaše ime, logotip, barve, meni, cene, valuta in izbor kamnov so vezani na vaš identifikator. Spremenite jih iz vašega območja stranke in se osveževajo povsod naenkrat, brez da bi ponovno dostopali do Shopifyja.

Katero možnost bi moral izbrati?

Lahko jih kombinirate. Številne spletne trgovine uporabljajo namensko stran in jo povežejo s povezavo v glavni meni.

Možnost 1: povezava v vašem meniju ali že pripravljen gumb

Brez kakršnega koli okvira se graditelj odpre v polno stran, v vaših barvah. To mu daje največ prostora, še posebej na telefonih.

1. Dodaj to v meni. V svojem Shopify administratorju pojdite na Spletna trgovina → Navigacija, odprite glavni meni in kliknite Dodaj predmet menija.
2. Poimenuj ga in prilepi naslov. Ga poimenuj, na primer "Oblikuj svojo zapestnico", nato pa prilepite ta naslov v polje Povezava:

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

Če želite prikazati gumb na svojem domači strani ali v opisu izdelka, uporabite gotov gumb iz vašega območja odjemalca. Že uporablja vaše barve.

Možnost 2: namenjena stran "Oblikuj svojo zapestnico"

1. Ustvari stran. V svoji administraciji pojdi na Spletna trgovina → Strani → Dodaj stran. Dajte mu naslov ("Oblikuj svojo zapestnico") in shranite.
2. Ustvari predlogo strani. Pojdi na Spletna trgovina → Teme → Prilagodi. V spustnem meniju na vrhu urejevalnika izberite Strani, nato Ustvari predlogo. Imenujte ga, na primer bracelet-builder.
3. Dodajte odsek Custom Liquid. V tej predlogi kliknite Dodaj razdelek in izberi Prilagodljiva tekočina.
4. Prilepite kodo. Prilepite kodo spodaj v polje Custom Liquid in shranite.
5. Dodelite predlogo. Vrni se na Spletna trgovina → Strani, odprite svojo stran in izberite bracelet-builder v Predloga polje. Shrani.
6. Dodaj to v meni. V Spletna trgovina → Navigacija, dodajte postavko menija, ki kaže na to stran.

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

Na računalniku razvijalec prikazuje dva stolpca: naramnico na eni strani, kamne na drugi. Na telefonu se samodejno preklopi na mobilni postavitev.

Možnost 3: plavajočo gumbo na vsaki strani

V kotu vaše trgovine se pojavi majhen okrogel gumb. En klik odpre gradnik v panelu, ne da bi zapustili stran. Gradnik se naloži samo ob prvem kliku, zato vaša trgovina ostane hitra.

1. Odpri urejevalnik teme. Pojdi na Spletna trgovina → Teme → Prilagodi.
2. Dodajte odsek Custom Liquid v nogo. V Noga območje levega panela, kliknite Dodaj razdelek in izberi Prilagodljiva tekočina. Razdelek v nogi se pojavlja na vsaki strani.
3. Prilepite spodnji kod in shranite.
4. Vključi gumb. V svojem območju za stranke vključite plavajoči gumb in izberite njegov tekst ter stran (levo ali desno). Lahko ga kadarkoli izklopite, ne da bi se dotaknili Shopifyja.

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

Če vaša tema ne dopušča oddelkov v nogi, prilepite isto kodo v Spletna trgovina → Teme → … → Ureja kodo, in the layout/theme.liquid datoteka, tik pred </body>.

Možnost 4: kompakten gradilnik (stolpec ali stran proizvoda)

Ta različica vedno uporablja mobilno postavitev v ozkem okvirju. Primerna je za stransko vrstico, stran z izdelkom naramnice ali blok "poskusi to" na domači strani. Dodaj jo v Prilagodljiva tekočina razdelka ali bloka, kot 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/sl" style="color:inherit">Loch Ness&reg;</a></p>

Izbirno: dodajte naramnico neposredno v vaš Shopify nakupovalni voziček

Privzeto prejmeš končan dizajn kot naročilno zahtevo po e-pošti. Če želiš, lahko tvoja stranka postavi svoj naramek naravnost v vašo Shopify košarico in plačajte ob blagajni, kot kateri koli drugi proizvod. To deluje, ko je gradilnik v vašo trgovino, z možnostmi 2, 3 in 4. S povezavo v meniju (možnost 1) se gradilnik odpre na polni strani na našem spletnem mestu, zato naročilo po e-pošti ostane na mestu.

1. Vključite ga v vaši klientski čon. V Trgovina → Naročila, kljukica Dodaj zapestnico v košarico moje trgovine in vnesite naslov vaše trgovine, na primer https://www.my-shop.com. V vaši trgovini gumb za naročilo postane Add to cart.
2. Ustvari proizvod "Naročena zapestnica". Shopify ne dovolí, da stran nastavi brezplačno ceno v košarici, zato cena izhaja iz variante izdelka. Ustvari izdelek z ročajem custom-bracelet, z eno možnostjo "Cena" in eno različico za vsako možno ceno (na primer vsak €0,50 od €10 do €150; množični urejevalnik ali uvoz CSV prihrani čas). Odkljukajte Spremljaj količino zato se različice nikoli ne prikažejo kot razprodane in proizvod ostane zunaj vaših zbirk.
3. Prilepite scenarij. Dodajte spodnji kod na isto mesto Prilagodljiva tekočina razdelek kot vaš graditelj (možnost 2 ali 4) ali v nogi razdelka možnosti 3. Shranite.

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

Ko vaš kupec klikne Add to cart, graditelj pošlje naramnico na vašo stran: skupna cena, valuta, velikost zapestja, velikost perle, seznam kamnov, sestava kot besedilo in povezavo, ki ponovno odpre točno naramnico. Skripta izbere različico, katere cena se ujema s skupno ceno natančno, jo doda s sestavo, nato pa odpre košarico.

Polna oblika sporočila je opisana na naši strani s pomočjo Dodaj v košarico svoje trgovine. Iz varnostnih razlogov graditelj pošlje naramnico samo na naslov trgovine, nastavljon v vašem območju odjemalca, in skript sprejema samo sporočila, ki prihajajo iz https://lochness-paris.com.

Več jezikov v vašem trgovini

Gradbenik obstaja v Angleščina, francoščina, španščina in madžarščina (in še mnogo več na zahtevo). Če želite spremeniti jezik, zamenjajte /en/ v naslovu s /fr/, /es/ ali /hu/, in lang=en s prilagoditvijo kode za lebdeči gumb. Če vaša trgovina uporablja Shopify Markets z več jeziki, dodajte en razdelek Custom Liquid za vsako jezikovno različico ali nas vprašajte: vaš področje odjemalca vsebuje kode za vsak jezik.

Preverite, da je vse delujoče

• Graditelj prikazuje vaše ime in barve. Če vidite barve Loch Nessa, je verjetno napačno napisana oznaka v kodi.
• Preizkusite na svojem telefonu, ne samo v predogledu urejevalnika.
• Naredi načrt testa in ga pošlji. Preverite, da prejavi naročila pri e-poštni naslov, nastavljen za vašo trgovino.
• Z možnostjo dodaj v košarico, naredite testni naramek: vozičar mora prikazati isto ceno kot graditelj, s sestavo pod izdelkom.
• Za plavajočo gumb, počakajte do 5 minut po vklopu v območju svojega odjemalca: sprememba se pojavi v toliko časa.

Pogosto zastavljena vprašanja

Viri

Shopify — Tekoča referenca · Shopify — Skupini razdelkov (glava in noga) · Shopify — Cart API reference (Ajax API) · MDN Web Docs — Element iframe · MDN Web Docs — Window.postMessage()

Napisal Camille G., ustanovitelj Loch Ness. Od 2013 do 2023 sem zasnoval simbolno nakit za svojo lastno znamko, od takrat pa se celodbno ukvarjam z gradnjo spletnih aplikacij in orodij. Sam sem kodiral ta konstruktor zapestnic. My story · GitHub · ORCID