Dodaj konstruktor bransoletek do swojego sklepu Shopify

Autor: Camille G. · Zaktualizowano październik 2026 · Czas czytania ≈ 9 min

Sprzedajesz bransoletki z kamieniami szlachetnymi i chcesz, aby Twoi klienci sami je projektowali bezpośrednio w Twojim sklepie Shopify? Możesz to zrobić bez instalowania aplikacji i bez modyfikowania kodu szablonu. Ten przewodnik pokazuje cztery sposoby dodania kreatora bransoletek Loch Ness, od prostego linku w menu po pływający przycisk na każdej stronie, krok po kroku, oraz jak wysyłać każdą bransoletę bezpośrednio do koszyka Shopify.

Zanim zaczniesz

Konstruktor pozostaje hostowany na naszych serwerach i pojawia się w Twoim sklepie. Zawsze otrzymujesz najnowszą wersję, bez konieczności aktualizacji po Twojej stronie. Potrzebujesz dwóch rzeczy:

• twój identyfikator, wysłane przez Loch Ness gdy twój konstruktor jest skonfigurowany (na przykład my-shop);
• an Motyw Online Store 2.0, która obejmuje wszystkie ostatnie motywy Shopify, w tym Dawn.

Twoja nazwa, logo, kolory, menu, ceny, waluta i wybór kamieni są powiązane z twoim identyfikatorem. Zmieniasz je w panelu klienta, a aktualizują się wszędzie naraz, bez konieczności ponownego wchodzenia w Shopify'ego.

Którą opcję powinieneś wybrać?

Możesz je łączyć. Wiele sklepów używa dedykowanej strony i dodaje do niej link w menu głównym.

Opcja 1: link w menu lub gotowy przycisk

Bez żadnej ramki, kreator otwiera pełną stronę w twoich kolorach. To daje mu największą przestrzeń, szczególnie na telefonach.

1. Dodaj to do menu. W panelu administracyjnym Shopify przejdź do Sklep internetowy → Nawigacja, otwórz menu główne i kliknij Dodaj element menu.
2. Nazwij to i wklej adres. Nazwij to, na przykład "Zaprojektuj swoją bransoletkę", a następnie wklej ten adres w polu Link:

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

Aby wyświetlić przycisk na stronie głównej lub w opisie produktu, użyj gotowy przycisk z obszaru Twojego klienta. Już używa Twoich kolorów.

Opcja 2: dedykowana strona "Zaprojektuj swoją bransoletkę"

1. Utwórz stronę. W panelu administratora przejdź do Sklep Online → Strony → Dodaj stronę. Nadaj mu tytuł („Zaprojektuj swoją bransoletkę") i zapisz.
2. Utwórz szablon strony. Przejdź do Sklep online → Motywy → Dostosuj. W menu rozwijanym na górze edytora wybierz Strony, wtedy Utwórz szablon. Na przykład nazwij to bracelet-builder.
3. Dodaj sekcję Custom Liquid. W tym szablonie kliknij Dodaj sekcję i wybierz Niestandardowy Płyn.
4. Wklej kod. Wklej poniższy kod do pola Custom Liquid i zapisz.
5. Przypisz szablon. Wróć do Sklep online → Strony, otwórz swoją stronę i wybierz bracelet-builder w Szablon pole. Zapisz.
6. Dodaj to do menu. W Sklep internetowy → Nawigacja, dodaj element menu wskazujący na tę stronę.

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

Na komputerze konstruktor wyświetla dwie kolumny: bransoletę z jednej strony, kamienie z drugiej. Na telefonie automatycznie przechodzi do swojego mobilnego układu.

Opcja 3: pływający przycisk na każdej stronie

W rogu Twojego sklepu pojawia się mały okrągły przycisk. Jedno kliknięcie otwiera konstruktor w panelu, bez opuszczania strony. Konstruktor ładuje się tylko przy pierwszym kliknięciu, dzięki czemu Twój sklep pozostaje szybki.

1. Otwórz edytor motywów. Przejdź do Sklep online → Motywy → Dostosuj.
2. Dodaj niestandardową sekcję Liquid do stopki. W Stopka obszar lewego panelu, kliknij Dodaj sekcję i wybierz Niestandardowy Płyn. Sekcja w stopce pojawia się na każdej stronie.
3. Wklej poniższy kod i zapisz.
4. Włącz przycisk. W panelu klienta włącz przycisk pływający i wybierz jego tekst oraz stronę (lewą lub prawą). Możesz go wyłączyć w dowolnym momencie, bez konieczności ingerencji w 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/pl" style="color:inherit">Loch Ness&reg;</a></p>

Jeśli Twój motyw nie pozwala na sekcje w stopce, wklej ten sam kod w Sklep internetowy → Motywy → … → Edytuj kod, w layout/theme.liquid plik, tuż przed </body>.

Opcja 4: kompaktowy konstruktor (kolumna lub strona produktu)

Ta wersja zawsze używa układu mobilnego, w wąskiej ramce. Nadaje się do paska bocznego, strony produktu bransoletki lub bloku „spróbuj" na stronie głównej. Dodaj ją w Niestandardowy Płyn sekcja lub blok, jak w opcji 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/pl" style="color:inherit">Loch Ness&reg;</a></p>

Opcjonalnie: dodaj bransoletkę bezpośrednio do koszyka Shopify

Domyślnie gotowy projekt dociera do Ciebie jako prośba o zamówienie pocztą elektroniczną. Jeśli wolisz, Twoja klientka może umieścić jej bransoletkę prosto do koszyka Shopify i zapłacić przy kasie, jak każdy inny produkt. To działa, gdy konstruktor jest w Twoim sklepie, z opcjami 2, 3 i 4. Z linkiem menu (opcja 1) konstruktor otwiera się na pełnej stronie na naszej witrynie, więc zamówienie e-mail pozostaje na miejscu.

1. Włącz to w swoim panelu klienta. W Sklep → Zamówienia, haczyk Dodaj bransoletkę do koszyka mojego sklepu i wprowadź adres swojego sklepu, na przykład https://www.my-shop.com. W Twoim sklepie przycisk zamówienia staje się Dodaj do koszyka.
2. Utwórz produkt "Niestandardowa bransoletka". Shopify nie pozwala na ustawienie bezpłatnej ceny na stronie koszyka, więc cena pochodzi z wariantu produktu. Utwórz produkt z identyfikatorem custom-bracelet, z jedną opcją „Cena" i jedną odmianą dla każdej możliwej ceny (na przykład co €0,50 od €10 do €150; edytor zbiorczy lub import CSV oszczędza czas). Odznacz Ilość śladu więc warianty nigdy nie wyświetlają się jako wyprzedane i utrzymują produkt poza twoimi kolekcjami.
3. Wklej skrypt. Dodaj poniższy kod w tym samym Niestandardowy Płyn sekcję jako konstruktora (opcja 2 lub 4) lub w sekcji stopki opcji 3. Zapisz.

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

Gdy twój klient kliknie Dodaj do koszyka, budowniczy wysyła bransoletkę na Twoją stronę: całkowita cena, waluta, rozmiar nadgarstka, rozmiar koralika, lista kamieni, skład jako tekst i link, który przywraca dokładną bransoletkę. Skrypt wybiera wariant, którego cena dokładnie odpowiada sumie, dodaje go wraz ze składem, a następnie otwiera koszyk.

Pełny format wiadomości jest opisany na naszej stronie pomocy Dodaj do koszyka swojego sklepu. Ze względów bezpieczeństwa konstruktor wysyła bransoletkę tylko na adres sklepu ustawiony w Twojej przestrzeni klienta, a skrypt akceptuje tylko wiadomości pochodzące z https://lochness-paris.com.

Kilka języków w Twojym sklepie

Konstruktor istnieje w Angielski, francuski, hiszpański i węgierski (i wiele więcej na życzenie). Aby zmienić język, zamień /en/ w adresie z /fr/, /es/ lub /hu/, and lang=en z pasującym kodem dla pływającego przycisku. Jeśli Twój sklep korzysta z Shopify Markets z wieloma językami, dodaj jedną sekcję Custom Liquid na każdą wersję języka, lub skontaktuj się z nami: Twój panel klienta zawiera kody dla każdego języka.

Sprawdź, że wszystko działa

• Konstruktor pokazuje Twoją nazwę i kolory. Jeśli zamiast tego widzisz kolory Loch Ness, identyfikator w kodzie jest prawdopodobnie błędnie napisany.
• Testuj na swoim telefonie, nie tylko w podglądzie edytora.
• Opracuj projekt testu i wyślij go. Sprawdź, czy żądanie zamówienia dotrze na adres e-mail skonfigurowany dla Twojego sklepu.
• Z opcją dodaj do koszyka, zrób testową bransoletkę: koszyk musi wyświetlać tę samą cenę co konstruktor, ze składem pod produktem.
• Dla pływającego przycisku, czekaj do 5 minut po włączeniu w panelu klienta: zmiana pojawia się przez tyle czasu.

Często zadawane pytania

Źródła

Shopify — Odniesienie ciekłe · Shopify — Grupy sekcji (nagłówek i stopka) · Shopify — Dokumentacja API Koszyka (Ajax API) · MDN Web Docs — Element iframe · MDN Web Docs — Window.postMessage()

Napisane przez Camille G., założyciela Loch Ness. Od 2013 do 2023 roku projektowałem biżuterię symboliczną dla własnej marki, a od tego czasu na pełny etat tworzę aplikacje internetowe i narzędzia. Sam kodowałem ten konstruktor bransoletek. My story · GitHub · ORCID