GrowDocs · Shoper Storefront

Moduły konwersji: konfiguracja bez wklejania kodu

Docelowy zakres pakietu obejmuje osiem modułów do Edytora wizualnego. Po udostępnieniu ich w zaakceptowanej wersji aplikacji dodajesz je na stronie głównej i karcie produktu, a następnie uzupełniasz dane w bezpiecznych polach ustawień.

Pobierz instrukcję PDF
08modułów
02widoki
0kodu do wklejenia
Na tej stronie

Zanim zaczniesz

Moduły mają pochodzić wyłącznie z aplikacji

Nie kopiuj kodu ani modułów ręcznie

Nie kopiuj ich do sekcji Modułów własnych i nie wklejaj HTML, JavaScriptu ani LESS-a. Moduł jest dostępny na liście dopiero po instalacji i zaakceptowaniu zawierającej go aktualizacji aplikacji przez Shoper.

Instrukcja opisuje cały zaakceptowany zakres, ale przed zakończeniem aktualizacji nie każdy moduł musi być już widoczny. Pracuj na wybranej kopii Storefront i konfiguruj tylko moduły dostarczone na listę przez aplikację. Są domyślnie wyłączone: najpierw uzupełnij dane, potem włącz przełącznik i zapisz cały Edytor wizualny.

  1. Otwórz właściwy układ Storefront

    Przejdź do Wygląd i treści → Wygląd sklepu → Edytuj układ. Sprawdź nazwę kopii szablonu przed rozpoczęciem konfiguracji.

  2. Znajdź moduł dostarczony przez aplikację

    Wybierz stronę główną albo kartę produktu i odszukaj moduł z prefiksem GC -. Nie twórz jego kopii jako modułu własnego.

  3. Uzupełnij dane przed włączeniem

    Skonfiguruj źródła produktów, adresy lub reguły opisane niżej. Brak wymaganych danych celowo pozostawia moduł niewidoczny.

  4. Zapisz i sprawdź podgląd

    Włącz moduł, zapisz jego ustawienia oraz cały układ. Sprawdź właściwy widok na komputerze i telefonie przed publikacją kopii.

Rozmieszczenie

Dodaj moduły do właściwych widoków

Położenie możesz dopasować do układu sklepu. Poniższy układ zachowuje naturalną kolejność decyzji klienta.

Strona główna

Treści społecznościowe

Instagram LightWidget oraz kafelki YouTube.

Karta produktu · zakup

Decyzja i termin

Licznik wysyłki, wybór pojemności oraz kod rabatowy producenta — blisko ceny i przycisku koszyka.

Karta produktu · niżej

Rekomendacje

Zalecane przy zakupie, Sprawdź także i Zobacz inne w kategorii.

Strona główna · Instagram

Automatyczny feed przez LightWidget

Strona główna

Kafelki Instagram

GC - Kafelki Instagram LightWidget v2

Połącz profil i utwórz responsywny feed w serwisie LightWidget. W kodzie osadzenia znajdź atrybut srcramki i skopiuj wyłącznie jego adres HTTPS.

  1. Wklej adres w polu Adres URL widżetu LightWidget.
  2. Ustaw nagłówek i krótki dostępny tytuł feedu.
  3. Włącz moduł i zapisz układ.

Moduł automatycznie pokazuje nagłówek po lewej stronie z takim samym krojem, rozmiarem, wagą i odstępem od lewej jak sekcja „Nowości”. Feed ma takie samo zaokrąglenie rogów jak moduł YouTube — nie wymaga to dodatkowego CSS ani ustawienia w edytorze.

Kontrola: nowe wpisy mają zaciągać się przez LightWidget, nagłówek „Instagram” ma odpowiadać typografii i lewej krawędzi nagłówka „Nowości”, a rogi feedu mają być zaokrąglone jak w module YouTube. Kafelki i linki muszą działać także na telefonie. Nie wklejaj całego fragmentu embed.

Strona główna · YouTube

Od trzech do sześciu filmów wskazanych ręcznie

Strona główna

Kafelki YouTube

GC - Kafelki YouTube v2

Dodaj od trzech do sześciu unikalnych, bezpośrednich adresów filmów albo Shorts. Moduł nie obsługuje playlist, kanałów w polu filmu ani automatycznego pobierania najnowszych materiałów.

  1. Dodaj każdy adres osobno w sekcji Zarządzaj filmami YouTube.
  2. Opcjonalnie wpisz tytuł filmu — nie jest pobierany automatycznie.
  3. Opcjonalnie ustaw osobny adres kanału i etykietę linku.

Kontrola: sekcja pojawia się dopiero przy co najmniej trzech poprawnych, unikalnych filmach. Odtwarzacz ładuje się dopiero po kliknięciu kafelka.

Karta produktu

Sześć modułów wspierających decyzję zakupową

Każdy z nich działa samodzielnie i pozostaje ukryty, gdy brakuje wymaganych danych dla aktualnego produktu.

Karta produktu · okolice zakupu

„Zamów w ciągu… wyślemy dziś”

GC - Zamów w ciągu X v2

Ustaw godzinę graniczną wysyłki, czas przygotowania i zapasowy czas dostawy. Możesz korzystać z czasu dostawy produktu, ograniczyć moduł do kategorii oraz dodać wykluczenia produktów lub kategorii.

  • Włącz pomijanie polskich dni ustawowo wolnych i dodaj własne powtarzalne dni wolne, jeśli są potrzebne.
  • Sekcja magazynów jest opcjonalna i wymaga zgodnych czasów transferu.

Kontrola: sprawdź wynik przed i po godzinie granicznej, w weekend oraz na produkcie wykluczonym.

Karta produktu · rekomendacje

Zalecane przy zakupie

GC - Produkty komplementarne v2

Twórz ręczne zestawy dla konkretnego produktu albo całej kategorii. Pozycją zestawu może być produkt, kolekcja lub kategoria. Opcjonalne sugestie automatyczne mogą korzystać z bestsellerów, nowości, promocji, produktu dnia i wskazanych kategorii.

Priorytet dopasowania jest stały: zestaw konkretnego produktu, następnie zestaw kategorii, a na końcu sugestie automatyczne.

  • W trybie Kompaktowe wiersze przycisk + od razu dodaje wskazany produkt dodatkowy do koszyka. Nie trzeba najpierw dodawać produktu głównego; sklep pokazuje natywne potwierdzenie koszyka.
  • W trybie Wybieralne kafelki produktów zaznaczasz dodatki do zestawu. Trafiają do koszyka po dodaniu produktu głównego, a moduł pokazuje ich bieżącą sumę.

Kontrola: sprawdź właściwy zestaw, spójny rozmiar tekstu ceny oraz samodzielne dodanie przyciskiem + w widoku kompaktowym. W widoku kafelków sprawdź zaznaczenie i dodanie zestawu razem z produktem głównym. Cena i jej zagnieżdżone elementy powinny dziedziczyć tę samą typografię modułu. Przy produktach wariantowych moduł nie zastępuje wyboru wariantu.

Karta produktu · okolice wariantów

Wybór pojemności produktu

GC - Wybór pojemności v2

Utwórz osobną grupę dla każdej rodziny produktów i dodaj do niej co najmniej dwie karty, które mają prowadzić do siebie nawzajem.

  • Wpisz dokładną nazwę atrybutu, na przykład Pojemność, z zachowaniem liter i spacji.
  • Własna etykieta ma pierwszeństwo przed wartością atrybutu; miniatury są opcjonalne.

Kontrola: bieżąca pojemność jest oznaczona, a pozostałe kafelki otwierają właściwe karty produktów.

Karta produktu · rekomendacje

Sprawdź także

GC - Sprawdź także v2

Najpierw przypisz warianty, próbki, zestawy lub produkty z tej samej linii jako natywne produkty powiązane w panelu Shoper. Moduł odczytuje tę relację i steruje wyłącznie jej prezentacją.

Możesz ustawić nagłówek, pokazywanie nazw i bieżącego produktu oraz automatyczny jeden wiersz albo próg rozwijania od 3 do 16 kafelków.

Kontrola: produkt bez relacji nie pokazuje sekcji, a każdy kafelek prowadzi do oczekiwanej karty.

Karta produktu · rekomendacje

Zobacz inne w kategorii

GC - Zobacz inne w kategorii v2

Moduł pobiera dostępne produkty z głównej kategorii aktualnego produktu, pomija bieżącą kartę i usuwa duplikaty. Nie wymaga ręcznego mapowania.

  • Ustaw od 2 do 12 produktów i zdecyduj, czy uwzględnić podkategorie.
  • Opcjonalnie pokaż link do pełnej kategorii obok nagłówka sekcji.

Na komputerze produkty tworzą zwartą pionową listę. Na telefonie sekcja automatycznie przechodzi w poziomy, przewijany slider z przyciąganiem kolejnych kart.

Kontrola: główna kategoria produktu zawiera inne dostępne pozycje, lista na komputerze nie rozciąga kafelków, slider na telefonie przewija się poziomo, a link „Zobacz wszystkie” prowadzi we właściwe miejsce.

Karta produktu · okolice zakupu

Kod rabatowy producenta

GC - Kod rabatowy producenta v2

Dla każdej reguły wybierz producenta, przepisz dokładny kod oraz procent rabatu z panelu Shoper i opcjonalnie ustaw okres ważności. Obie daty graniczne są wliczane, a pusty zakres pozostawia kod aktywny bez limitu daty.

Moduł pokazuje wyliczoną cenę po rabacie oraz kod, który klient może skopiować jednym kliknięciem. Gdy aktywne okresy się nakładają, używana jest pierwsza pasująca reguła.

Kod nie synchronizuje się automatycznie

Edytor wizualny Storefront nie udostępnia pola wyboru kodów z panelu administracyjnego. Skopiuj kod i procent z sekcji Marketing i sprzedaż → Promocje i kody rabatowe. Po zmianie kodu w Shoperze zaktualizuj również regułę modułu.

Kontrola: porównaj wyliczoną cenę z procentem ustawionym w Shoperze, sprawdź produkt pasującego i niepasującego producenta, daty przed i po okresie oraz komunikat „Kod skopiowany”.

Kontrola po zapisie

Sprawdź cały pakiet przed publikacją szablonu

  • Wszystkie używane moduły pochodzą z aplikacji, a nie z sekcji modułów własnych.
  • Na stronie głównej działają kafelki Instagram i 3–6 filmów YouTube.
  • Karta produktu ma tylko jedną instancję każdego wybranego modułu.
  • Produkty z danymi pokazują właściwe sekcje, a produkty bez dopasowania nie pokazują pustych ramek.
  • Linki, kopiowanie kodu i dodawanie produktów działają z klawiatury oraz myszą.
  • Widok telefonu nie ma poziomego przewijania ani treści nachodzących na cenę lub koszyk.
  • Licznik pokazuje zgodny termin przed i po godzinie granicznej.
  • Test wykonano w podglądzie dokładnie tej kopii szablonu, która ma zostać opublikowana.
Usługi zewnętrzne

Feed Instagram ładuje zawartość z LightWidget. Odtwarzacz YouTube łączy się z usługą YouTube po kliknięciu filmu. Uwzględnij te usługi w konfiguracji zgód i dokumentach prywatności swojego sklepu.

Poza tym pakietem

Dwie funkcje są dostarczane jako osobne aplikacje

Nie znajdziesz ich na liście modułów aplikacji „Moduły konwersji”. Każda ma własną instalację i konfigurację.

Osobna aplikacja

GrowB2B

Ukrywa ceny i przycisk „Dodaj do koszyka” przed niezalogowanymi użytkownikami dla wskazanych producentów. To reguła prezentacji Storefront, a nie serwerowa ochrona ceny.

Osobna aplikacja

GrowGift

Obsługuje progi wyboru gratisu według wartości koszyka oraz marki lub producenta. Jej progów nie konfiguruje się w modułach opisanych na tej stronie.

Rozwiązywanie problemów

Gdy modułu nie widać albo pozostaje pusty

Modułu nie ma na liście

Potwierdź instalację i aktualną wersję aplikacji, użycie Storefront oraz właściwą kopię szablonu. Zamknij i otwórz Edytor wizualny ponownie. Nie odtwarzaj modułu ręcznie.

Moduł jest dodany, ale go nie widać

Sprawdź główny przełącznik i dane wymagane dla bieżącego widoku: poprawny URL, minimum trzy filmy, grupę produktów, relację, kategorię albo aktywną regułę producenta.

Sekcja pojawia się podwójnie

Usuń dodatkową instancję z układu w Edytorze wizualnym. Nie usuwaj aplikacji i nie edytuj kodu modułu.

Wsparcie

Problem nadal występuje?

Podaj nazwę modułu, widok, kroki prowadzące do problemu i zrzut ekranu bez danych klientów.

Napisz do wsparcia