Dodaj konstruktor bransoletek do swojego Shopify

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

Sprzedajesz bransoletki ze kamieni szlachetnych i chcesz, aby Twoi klienci projektowali je samodzielnie bezpośrednio w Twoim sklepie Shopify? Możesz to zrobić bez instalowania aplikacji i bez modyfikowania kodu motywu. Ten przewodnik pokazuje cztery sposoby dodania konstruktora bransoletki Loch Ness, od prostego linku w menu po przycisk unoszący się na każdej stronie, krok po kroku.

Zanim zaczniesz

Konstruktor pozostaje hostowany na naszych serwerach i pojawia się w Twojej sklepie. Zawsze otrzymujesz najnowszą wersję, bez konieczności aktualizacji z Twojej strony. 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 niedawne motywy Shopify, w tym Dawn.

Twoja nazwa, logo, kolory, menu, ceny, waluta i wybór kamieni są powiązane z Twoim identyfikatorem. Zmieniasz je z panelu klienta, a aktualizują się wszędzie jednocześnie, bez konieczności ponownego konfigurowania Shopify.

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>

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.
• 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) · MDN Web Docs — Element iframe

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