Pridėkite rankų apyrankės konstruktorių į savo Shopify parduotuvę

Camille G. · Atnaujinta 2026 m. spalis · Skaitymui reikia ≈ 9 min

Ar parduodate brangakmenių apyrankius ir norite, kad jūsų klientai patys jas kurstų tiesiogiai jūsų Shopify parduotuvėje? Tai galite padaryti neinstalliuodami jokios programėlės ir neliesdami savo temos kodo. Šis vadovas parodys keturis būdus, kaip pridėti Loch Ness apyrankės konstruktorių – nuo paprastos meniu nuorodos iki slankiojo mygtuko kiekvienoje puslapyje, žingsnis po žingsnio, ir kaip kiekvieną apyrankę siųsti tiesiai į jūsų Shopify krepšelį.

Prieš pradedant

Konstruktorius išlieka priimtas mūsų serveriuose ir pasirodo jūsų parduotuvėje. Jūs visada gausite naujausią versiją, jums nereikia nieko atnaujinti. Jums reikia dviejų dalykų:

• jūsų identifikatorius, išsiųstas pagal Loch Ness, kai jūsų kuratorius yra nustatytas (pavyzdžiui my-shop);
• an Online Store 2.0 tema, kurie apima visas naujausias Shopify temas, įskaitant Dawn.

Jūsų pavadinimas, logotipas, spalvos, meniu, kainos, valiuta ir akmenų pasirinkimas yra susieti su jūsų identifikatoriumi. Juos keičiate iš savo kliento sritės, ir jie atsinaujina visur vienu metu, neliečiant Shopify dar kartą.

Kurią parinktį turėtumėte pasirinkti?

Galite juos sujungti. Daugelis parduotuvių naudoja dedikuotą puslapį ir prideda nuorodą į jį pagrindinėje meniu.

Variantas 1: nuoroda jūsų meniu arba paruoštas mygtukas

Be jokios rėmelio, kūrėjas atidaromas visame puslapyje, jūsų spalvomis. Tai suteikia daugiausiai vietos, ypač telefonu.

1. Pridėk tai į meniu. Jūsų „Shopify" administravimo skyriuje eikite į Internetinė parduotuvė → Navigacija, atidarykite pagrindinį meniu ir spustelėkite Pridėti meniu elementą.
2. Pavadinkite ir įklijuokite adresą. Pavadinkite jį, pavyzdžiui, „Suprojektuokite savo apyrankę", tada įklijuokite šį adresą Nuorodos laukelyje:

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

Norėdami rodyti mygtuką savo pradiniame puslapyje arba produkto aprašyme, naudokite paruoštas mygtukas iš jūsų kliento zonos. Jame jau naudojamos jūsų spalvos.

2 pasirinkimas: skirta "Kurkite savo pulsirą" puslapis

1. Sukurkite puslapį. Jūsų administravimo skiltyje eikite į Internetinė parduotuvė → Puslapiai → Pridėti puslapį. Suteikite jam pavadinimą („Suprojektuokite savo papuošalą") ir išsaugokite.
2. Sukurkite puslapio šabloną. Eikite į Internetinė parduotuvė → Temos → Tinkinti. Iš išsiskleidžiamojo meniu redaktoriaus viršuje pasirinkite Puslapiai, tada Sukurti šabloną. Pavadinkite tai, pavyzdžiui bracelet-builder.
3. Pridėkite pasirinktinę skysčio sekciją. Šiame šablone spustelėkite Pridėti skyrių ir pasirinkite Pasirinktinis skystis.
4. Įklijuokite kodą. Įklijuokite toliau pateiktą kodą į pasirinktinio skysto lauką ir išsaugokite.
5. Priskirti šablonui. Grįžti į Internetinė parduotuvė → Puslapiai, atverkite savo puslapį ir pasirinkite bracelet-builder in the Šablonas laukas. Išsaugoti.
6. Pridėk tai į meniu. In Internetinė parduotuvė → Navigacija, pridėkite meniu elementą, nukreipiantį į šį puslapį.

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

Kompiuteryje konstruktorius rodo du stulpelius: rankinį vieninėje pusėje, akmenį kitoje. Telefone jis automatiškai perjungiasi į mobiliųjų įrenginių maketą.

Parinktis 3: plūduriuojantis mygtukas kiekviename puslapyje

Mažas apvalus mygtukas pasirodo jūsų parduotuvės kampe. Vienu spustelėjimu atidariamas konstruktorius lange, nepalikiant puslapio. Konstruktorius įkeliamas tik pirmo spustelėjimo metu, todėl jūsų parduotuvė išlieka greita.

1. Atidaryti temos redaktorių. Eikite į Internetinė parduotuvė → Temos → Tinkinti.
2. Pridėkite pasirinktinę skystąją sekciją į poraštę. Į Poraštis kairiosios skydelio srityje, spustelėkite Pridėti skyrių ir pasirinkite Pasirinktinis skystis. Sekcija poraštėje pasirodo kiekviename puslapyje.
3. Žemiau įklijuokite kodą ir išsaugokite.
4. Įjunkite mygtuką. Jūsų klientų srityje įjunkite slankųjį mygtuką ir pasirinkite jo tekstą bei pusę (kairę arba dešinę). Jį galite išjungti bet kuriuo metu, nepaliesdami „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/lt" style="color:inherit">Loch Ness&reg;</a></p>

Jei jūsų tema nepasiūlo sekcijų poraštėje, įklijuokite tą patį kodą į Internetinė parduotuvė → Temos → … → Redaguoti kodą, į layout/theme.liquid failas, tiesiog prieš </body>.

4 parinktis: kompaktus kūrėjas (stulpelis arba produkto puslapis)

Šis variantas visada naudoja mobilųjį maketą, siaurame kadre. Jis tinka šoninei juostai, aksesuaro produkto puslapiui arba „Išbandyti" blokui pagrindinėje puslapyje. Pridėkite jį į Pasirinktinis skystis sekcija arba blokas, kaip 2 parinktyje.

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

Pasirenkamasis: pridėkite rankinį tiesiai į savo Shopify krepšelį

Pagal numatytuosius nustatymus, baigtas dizainas pasiekia jus kaip užsakymo prašymas el. paštu. Jei norite, jūsų klientė gali pasiūlyti savo apyrankę tiesiai į jūsų Shopify krepšelį ir mokėkite iš jūsų kasos, kaip bet kurį kitą produktą. Tai veikia, kai kuratorius yra jūsų parduotuvėje, su 2, 3 ir 4 variantais. Naudojant meniu nuorodą (1 variantas), kuratorius atsidaro per visą puslapį mūsų svetainėje, todėl el. pašto užsakymas lieka savo vietoje.

1. Įjunkite jį savo kliento sąsajoje. In Parduotuvė → Užsakymai, varnelė Pridėkite rankinį pulsą prie mano parduotuvės krepšelio ir įveskite savo parduotuvės adresą, pavyzdžiui https://www.my-shop.com. Jūsų parduotuvėje užsakymo mygtukas tampa Pridėti į krepšelį.
2. Sukurkite "Pasirinktinį rankinį" produktą. Shopify neleidžia puslapiui nustatyti nemokamos kainos krepšelyje, todėl kaina gaunama iš produkto varianto. Sukurkite produktą su rankenėle custom-bracelet, su viena parinktimi „Kaina" ir vienu variantu kiekvienai galibai kainai (pavyzdžiui, kas €0.50 nuo €10 iki €150; masinis redaktorius arba CSV importas sutaupys laiką). Atžymėti Sekti kiekį taigi variantai niekada nerodomi kaip išparduoti, ir produktas išlieka jūsų kolekcijų išorėje.
3. Įklijuokite scenarijų. Žemiau pridėkite tą patį kodą Pasirinktinis skystis skyriaus kaip jūsų konstruktorius (2 arba 4 parinktis), arba 3 parinktės poraštėje. Išsaugokite.

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

Kai jūsų klientas spustelia Pridėti į krepšelį, statybininkas siunčia apyrankę į jūsų puslapį: bendrą kainą, valiutą, riešo dydį, karoliuko dydį, akmenų sąrašą, sudėtį kaip tekstą ir nuorodą, kuri atidaro tikslią apyrankę. Scenarijus parenka variantą, kurio kaina tiksliai sutampa su bendra suma, prideda jį su sudėtimi, tada atidaro krepšelį.

Išsamus pranešimo formatas aprašytas mūsų pagalbos puslapyje Pridėti į jūsų parduotuvės krepšelį. Saugumo sumetimais, meistras siunčia apyrankę tik į parduotuvės adresą, nustatytą jūsų kliento zonoje, o skriptas priima tik žinutes, kurios gaunamos iš https://lochness-paris.com.

Kelios kalbos jūsų parduotuvėje

Statybininkas egzistuoja Anglų, prancūzų, ispanų ir vengrų (ir daug daugiau pagal užklausą). Norėdami pakeisti kalbą, pakeiskite /en/ adrese su /fr/, /es/ arba /hu/, and lang=en su atitinkamu kodu plūduriuojančiam mygtukui. Jei jūsų parduotuvė naudoja „Shopify Markets" su keliomis kalbomis, pridėkite po vieną „Custom Liquid" skyrių kiekvienai kalbos versijai arba paprašykite mūsų: jūsų kliento sritis pateikia kodus kiekvienai kalbai.

Patikrinkite, kad viskas veikia

• Konstruktorius rodo jūsų vardą ir spalvas. Jei matote Loch Ness spalvas, tada identifikatorius kode tikriausiai neteisingai parašytas.
• Testas jūsų telefone, ne tik redaktoriaus peržiūroje.
• Sukurkite testo projektą ir jį atsiųskite. Patikrinkite, ar užsakymo užklausa pasiekia el. pašto adresą, nustatytą jūsų parduotuvei.
• Su pridėjimo į krepšelį parinktimi, paruošti bandomąjį apyrankį: prekybos krepšelis turi rodyti tą pačią kainą kaip konstruktorius, o sudėtis turi būti žemiau produkto.
• Plūduriuojančiam mygtukai, palauk iki 5 minučių po to, kai jį įjungsi savo kliento zonoje: pakeitimui pasirodyti reikalinga tiek laiko.

Dažniausiai užduodami klausimai

Šaltiniai

Shopify — Skystoji nuoroda · Shopify — Skyrių grupės (antraštė ir poraštė) · Shopify — Cart API reference (Ajax API) · MDN Web Docs — Iframe elementas · MDN Web Docs — Window.postMessage()

Parašė Camille G., „Loch Ness" steigėjas. Nuo 2013 iki 2023 metų projektavau simbolinį papuošalą savo prekės ženklui, o nuo tada visą laiką kuriu žiniatinklio programas ir įrankius. Šią apyrankės konstruktorių programavau pats. Moja istorija · GitHub · ORCID