Adaugă un constructor de brățări în Shopify

De Camille G. · Actualizat octombrie 2026 · Timp de citire ≈ 9 min

Vânzi brățări din piatră și vrei ca clienții tăi să-și proiecteze propriile brățări, chiar pe magazinul tău Shopify? Poți să o faci fără să instalezi o aplicație și fără să atingi codul temei tale. Acest ghid prezintă patru moduri de a adăuga constructorul de brățări Loch Ness, de la o simplă legătură de meniu la un buton flotant pe fiecare pagină, pas cu pas, și cum să trimi fiecare brățară direct în coșul tău Shopify.

Înainte de a începe

Constructorul rămâne găzduit pe serverele noastre și apare în magazinul tău. Obții întotdeauna cea mai recentă versiune, fără ca tu să trebuie să actualizezi ceva. Ai nevoie de două lucruri:

• al tău identificator, trimis de Loch Ness atunci când constructorul dvs. este configurat (de exemplu my-shop);
• un Tema Online Store 2.0, care acoperă toate temele Shopify recente, inclusiv Dawn.

Numele tău, logo-ul, culorile, meniu-ul, prețurile, moneda și alegerea de pietre sunt legate de identificatorul tău. Le modifici din zona ta de client și se actualizează peste tot simultan, fără a mai atinge Shopify.

Care opțiune ar trebui să alegeți?

Puteți să le combinați. Multe magazine folosesc o pagină dedicată și adaugă o legătură la ea în meniul principal.

Opțiunea 1: un link în meniu sau un buton gata-făcut

Fără niciun cadru, constructorul deschide pagina completă, în culorile tale. Asta îi oferă cel mai mult spațiu, mai ales pe telefoane.

1. Adaugă-l la meniu. În panoul de administrare Shopify, accesați Magazin Online → Navigare, deschideți meniul principal și faceți clic Adăugare element meniu.
2. Denumiți-o și lipiți adresa. Denumiți-o, de exemplu "Designează-ți brățara", apoi lipiți această adresă în câmpul Link:

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

Pentru a afișa un buton pe pagina dvs. de pornire sau într-o descriere de produs, utilizați buton gata-făcut din zona dvs. de client. Utilizează deja culorile dvs.

Opțiunea 2: o pagină dedicată "Proiectează-ți brățara"

1. Creează pagina. În panoul de administrare, accesați Magazin Online → Pagini → Adăugare pagină. Dă-i un titlu („Creează-ți brățara") și salvează.
2. Creați un șablon de pagină. Du-te la Magazin Online → Teme → Personalizare. În meniul derulant din partea de sus a editorului, alegeți Pagini, apoi Creare șablon. Numește-l, de exemplu bracelet-builder.
3. Adăugați o secțiune Liquid personalizată. În acest șablon, faceți clic Adăugare secțiune și alege Lichid Personalizat.
4. Lipește codul. Lipiți codul de mai jos în câmpul Custom Liquid și salvați.
5. Atribuiți șablonul. Înapoi la Magazine Online → Pagini, deschideți pagina și alegeți bracelet-builder în Șablon câmp. Salvează.
6. Adaugă-l la meniu. În Magazin Online → Navigare, adaugă un element de meniu care să indice spre această pagină.

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

Pe un computer, constructorul afişează două coloane: brăţara pe o parte, pietrele pe cealaltă. Pe un telefon, aceasta trece automat la dispunerea sa mobilă.

Opțiunea 3: un buton flotant pe fiecare pagină

Un mic buton rotund apare într-un colț al magazinului tău. Un singur click deschide constructorul într-un panou, fără a părăsi pagina. Constructorul se încarcă doar la primul click, deci magazinul tău rămâne rapid.

1. Deschideți editorul de teme. Du-te la Magazin Online → Teme → Personalizare.
2. Adăugați o secțiune de lichid personalizat în subsol. În Subsol zona din panoul stâng, faceți clic Adăugare secțiune și alege Lichid Personalizat. O secțiune din subsol apare pe fiecare pagină.
3. Lipiți codul de mai jos și salvați.
4. Aprinde butonul. În zona ta de client, activează butonul flotant și alege textul și latura acestuia (stânga sau dreapta). Poți să-l dezactivezi oricând, fără a atinge 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/ro" style="color:inherit">Loch Ness&reg;</a></p>

Dacă tema dumneavoastră nu permite secțiuni în subsol, lipiți același cod în Magazin Online → Teme → … → Editare cod, în layout/theme.liquid fișier, chiar înainte </body>.

Opțiunea 4: un constructor compact (pagina de coloană sau produs)

Această versiune folosește întotdeauna aspectul mobil, într-un cadru îngust. Este potrivită pentru o bară laterală, o pagină de produs brățară sau un bloc "încearcă-l" pe pagina de start. Adaug-o în Lichid Personalizat secțiune sau bloc, ca în opțiunea 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/ro" style="color:inherit">Loch Ness&reg;</a></p>

Opțional: adăugați brățara direct în coșul dvs. Shopify

În mod implicit, un design finalizat te ajunge ca o cerere de comandă prin email. Dacă prefers, clienta ta poate pune brățara ei direct în coșul tău Shopify și plătiți la checkout-ul dvs., ca oricare alt produs. Aceasta funcționează atunci când constructorul se află pe magazinul dvs., cu opțiunile 2, 3 și 4. Cu linkul de meniu (opțiunea 1), constructorul se deschide în pagina completă pe site-ul nostru, deci comanda prin e-mail rămâne la locul ei.

1. Activați-o în zona dvs. de client. În Magazin → Comenzi, bifare Adaug brățara în coșul magazinului meu și introduceți adresa magazinului dvs., de exemplu https://www.my-shop.com. În magazinul tău, butonul de comandă devine Adaugă în coș.
2. Creați un produs "Brățară personalizată". Shopify nu permite unei pagini să seteze un preț gratuit în coș, deci prețul vine de la o variantă de produs. Creați un produs cu handle-ul custom-bracelet, cu o opțiune "Preț" și o variantă pentru fiecare preț posibil (de exemplu, fiecare €0,50 de la €10 la €150; editorul în masă sau o importare CSV economisesc timp). Debifare Cantitatea urmărită deci variantele nu se afișează niciodată ca indisponibile, și mențin produsul în afara colecțiilor tale.
3. Lipește scriptul. Adăugați codul de mai jos în același Lichid Personalizat secțiunea ca pe builder-ul dumneavoastră (opțiunea 2 sau 4), sau în secțiunea de subsol a opțiunii 3. Salvaț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>

Când clientul tău face clic Adaugă în coș, constructorul trimite brățara pe pagina dumneavoastră: preț total, monedă, mărimea încheieturii, mărimea margicei, lista de pietre, compoziția ca text și un link care redeschide brățara exactă. Scriptul selectează varianta al cărei preț se potrivește exact cu totalul, o adaugă cu compoziția, apoi deschide coșul de cumpărături.

Formatul complet al mesajului este descris pe pagina noastră de ajutor Adăugați în coșul magazinului dumneavoastră. Din motive de securitate, constructorul trimite brățara numai la adresa magazinului setată în zona clientului dvs., iar scriptul acceptă doar mesajele provenite din https://lochness-paris.com.

Plusieurs langues dans votre boutique

Constructorul există în Engleză, franceză, spaniolă și maghiară (și multe altele la cerere). Pentru a schimba limba, înlocuiți /en/ în adresa cu /fr/, /es/ sau /hu/, și lang=en cu codul potrivit pentru butonul plutitor. Dacă magazinul dvs. utilizează Shopify Markets cu mai multe limbi, adăugați o secțiune Custom Liquid pentru fiecare versiune de limbă, sau contactați-ne: zona dvs. de client oferă codurile pentru fiecare limbă.

Verifică că totul funcționează

• Constructorul vă afișează numele și culorile. Dacă vezi culorile Loch Ness în schimb, identificatorul din cod este probabil greșit scris.
• Testează pe telefonul tău, nu doar în previzualizarea editorului.
• Faceți un design de test și trimiteți-l. Verificați că solicitarea de comandă ajunge la adresa de e-mail configurată pentru magazinul dumneavoastră.
• Cu opțiunea de adăugare în coș, faceți o bratară de test: coșul trebuie să afișeze același preț ca builder-ul, cu compoziția sub produs.
• Pentru butonul flotant, așteptați până la 5 minute după ce o porniți în zona dvs. de client: schimbarea durează atât de mult pentru a apărea.

Întrebări frecvente

Surse

Shopify — Referință lichidă · Shopify — Grupuri de secțiuni (antet și subsol) · Shopify — Cart API reference (Ajax API) · MDN Web Docs — Elementul iframe · MDN Web Docs — Window.postMessage()

Scris de Camille G., fondator al Loch Ness. Am proiectat bijuterii simbolice pentru propria mea marcă din 2013 până în 2023, iar de atunci lucrez full-time la construirea de aplicații web și instrumente. Am programat singur acest constructor de brățări. My story · GitHub · ORCID