Przygotowanie logo: Logo powinno być przygotowane w formacie SVG - najbardziej zalecany. Wtedy Logo niezależnie od wielkości nie traci na jakości :). Jeżeli nie dysponują Państwo formatem SVG - można również wykorzystać format PNG. Logo najlepiej jakby nie miało wokół siebie żadnych pustych / białych przestrzeni. Wstawianie logo: Aby dodać Logo do szablonu należy wejść w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne i wybrać szablon na którym chcemy wprowadzać zmiany. Następnie klikamy "Edytuj układ i styl szablonu". Wersja DESKTOPNastępnie klikamy w nagłówek i klikamy w moduł Logo.W edycji modułu możemy ustawić szerokość logo - aby dopasować wielkość do nagłówka. Logo tekstowe - to opis alt naszego logo - warto to uzupełnić pod SEO. Wersja MOBILE Za górnych przycisków zmiany widoku, zmieniamy widok na wersję mobilną. Następnie klikamy w nagłówek i klikamy w moduł Logo. I tutaj analogicznie jak w wersji Desktop.W edycji modułu możemy ustawić szerokość logo - aby dopasować wielkość do nagłówka. Logo tekstowe - to opis alt naszego logo - warto to uzupełnić pod SEO. Następnie Zapisujemy wszystkie zmiany i gotowe.

Tabela Rozmiarów Storefront — profesjonalna prezentacja rozmiarów w Twoim sklepieAplikacja Tabela Rozmiarów Storefront umożliwia dodanie czytelnej, estetycznej i wygodnej w obsłudze tabeli rozmiarów na karcie produktu. Dzięki niej klienci mogą szybko sprawdzić właściwy rozmiar, co znacząco zmniejsza liczbę zwrotów oraz poprawia komfort zakupów.Aby ustawić Tabelę rozmiarów należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Karta produktu > Dodaj [NORD] Tabela rozmiarów Pro lub [NORD] Tabela rozmiarów - Produkt Aplikacja zawiera dwa moduły:[NORD] Tabela Rozmiarów Storefront – moduł, który umożliwia przypisanie Tabeli rozmiarów do kategorii głównej produktu.[NORD] Tabela Rozmiarów – Produkt – moduł dzięki któremu ustawisz Tabelę rozmiarów dla pojedynczego produktu.Priorytet tabeli dla produktu: Tabela Rozmiarów przypisana bezpośrednio do pojedynczego produktu ma zawsze wyższy priorytet niż tabela przypisana do kategorii głównej. Oznacza to, że jeśli dany produkt posiada własną Tabelę Rozmiarów, zostanie ona wyświetlona zamiast tabeli przypisanej do kategorii, do której produkt należy. Zobacz demo - obrazekZobacz demo - tabela Instrukcja obsługi modułu “Tabela rozmiarów storefront”

Jak zacząć?

Q: Jak podmienić film wideo?

Przygotowanie pliku Aby podmienić wideo w module [NORD] Banner wideo, należy przygotować plik z filmem, najlepiej w formacie .mp4. Zalecamy wideo w formacie full HD - 1920x1080px, bez dźwięku, o czasie trwania od kilku do 30-45 sekund. Zalecamy skompresować plik za pomocą darmowego narzędzia do kompresji filmów wideo: https://tools.rotato.app/compress Dzięki temu wideo będzie się szybko wczytywało. Wgrywanie pliku Nazwa pliku nie może posiadać spacji. Odstępy możesz zamienić na "-" lub "_". Gotowy plik wideo wgrywamy w:Ustawienia > Zaawansowane > Zarządzanie plikami > Menadżer plików > Upload. Wgrywamy plik wideo a następnie przechodzimy do Ustawień modułu. Podmiana linku w module Skopiuj link do swojego sklepu, następnie daj /upload/ a następnie wklej nazwę pliku z rozszerzeniem. Po wgraniu pliku link będzie wyglądał następująco:https://nazwa-sklepu.pl/upload/nazwa-pliku.mp4 Przykład z DEMO: https://demo-135165.shoparena.pl/upload/nordhero.mp4Następnie przechodzimy do edycji modułu i wklejamy link do wideo.

Q: Jak ustawić własny OG:image?

Co to jest OG:image? jest to obraz ( miniaturka ) wklejania linku do sklepu w Social mediach. Aby zadbać o pełen profesjonalizm wyglądu Twojego sklepu przygotowaliśmy moduł OG:image - który pozwala ustawić wybrane zdjęcie jako banner graficzny dla linku w Social Mediach.Aby ustawić OG:image należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Integracje (lewy dolny róg) > [NORD] OG:imagePrzygotuj obraz Rekomendowany rozmiar OG Image: 1200 x 630 px (proporcje 1.91:1) - najlepszy standard dla Facebooka, Messengera, LinkedIn i większości platform.Link do przykładowego obrazu: https://demo-135165.shoparena.pl/upload/og.png Dodanie obrazu do szablonu Aby ustawić OG:image należy wejść w:Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne - wybrać szablon na którym chcesz wprowadzić zmiany a następnie kliknij w przycisk "Edytuj układ i styl szablonu". W edytorze w lewym dolnym rogu kliknij w przycisk Integracje.Wgraj przygotowany wcześniej obraz i Zapisz. Wklejam link w Social Media - a obraz się nie wyświetla Należy poprosić Facebooka o aktualizację linku. W tym celu wchodzimy na: https://developers.facebook.com/tools/debug/ - wklejmy adres do naszego sklepu i klikamy Debug Po chwili otrzymamy wyniki, w jaki sposób Facebook widzi link naszego sklepu. Klikając przycisk Scrape Again - odświeżamy nasz link w Social Mediach.

Q: Rozwijane opisy kategorii

Rozwijane opisy kategorii — pełna kontrola nad długością opisów w Shoper StorefrontZadbaj o przejrzystość, estetykę i SEO kategorii dzięki aplikacji Rozwijane opisy kategorii.Moduł umożliwia włączenie rozwijania oraz ustawienie wysokości widocznego fragmentu zarówno górnego, jak i dolnego opisu kategorii — w pełni dostosowanego do Twojego sklepu.Aby ustawić Rozwijane opisy kategorii należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Integracje (lewy dolny róg) > [NORD] Rozwijane opisy kategoriiNajważniejsze funkcje 1. Niezależna kontrola górnego i dolnego opisu kategoriiMożesz osobno ustawić rozwijanie górnego oraz dolnego opisu.Daje to pełną elastyczność — np. górny opis możesz ukryć pod rozwinięciem, a dolny zostawić widoczny w całości lub odwrotnie.2. Ustalanie wysokości widocznego fragmentu przed rozwinięciemSam decydujesz, ile treści widzi użytkownik.Po kliknięciu opis rozwija się płynnie do pełnej długości.Dlaczego warto?Bo to najprostszy i najskuteczniejszy sposób, aby estetycznie wyświetlać długie opisy kategorii w Storefront Shoper — bez kodowania, bez ryzyka błędów i bez ograniczeń SEO. Instrukcja obsługi modułu “Rozwijane opisy kategorii”

Q: Pasek Postępu Darmowej Dostawy

Zwiększ wartość koszyka dzięki inteligentnym paskom darmowej dostawy – dokładnie tam, gdzie klient podejmuje decyzję zakupową.Aplikacja „Pasek Postępu Darmowej Dostawy” to nowoczesne narzędzie dla szablonu Storefront, które w prosty i elegancki sposób motywuje klientów do większych zakupów. Dzięki czytelnym, dynamicznym paskom klient zawsze wie, jak blisko jest osiągnięcia darmowej wysyłki - bez liczenia i szukania informacji.Aby ustawić Pasek postępu darmowej dostawy należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Karta produktu > Dodaj [NORD] Pasek postępu darmowej dostawy - ustaw kwotę i gotowe.Możesz ustawić własny próg darmowej dostawy oraz umieścić pasek w dowolnym miejscu na stronie produktu. Minimalistyczny design dopasowuje się do każdego szablonu, a czytelna informacja o brakującej kwocie skutecznie zachęca do domówienia dodatkowych produktów.Co ważne, aplikacja działa modułowo - możesz ustawić własny próg darmowej dostawy i umieścić minimalistyczny pasek w dowolnym miejscu karty produktu lub koszyka, a czytelna informacja o brakującej kwocie w naturalny sposób zachęca klientów do dodania kolejnych produktów do zamówienia.Darmowa dostawa w koszyku to moduł Premium przeznaczony do wykorzystania w koszyku - Wymagany Abonament Shoper PremiumInstrukcja obsługi modułu “Pasek postępu darmowej dostawy”

Q: FAQ - Pytania i Odpowiedzi

Aplikacja umożliwia tworzenie estetycznych rozwijanych sekcji FAQ z wbudowanym schema dla SEO. To jest moduł który z którego właśnie korzystasz :)Aplikacja FAQ – Pytania i Odpowiedzi to rozbudowane narzędzie, które pozwala w czytelny i estetyczny sposób prezentować najważniejsze informacje, jednocześnie znacząco wzmacniając SEO Twojego sklepu. Dzięki elastycznej konfiguracji modułów, możliwości zaawansowanej personalizacji i wbudowanemu schema FAQ, aplikacja poprawia doświadczenia użytkownika oraz widoczność sklepu w wyszukiwarkach.Aby ustawić FAQ należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Wybierz stronę na której chcesz umieścić FAQ > [NORD] FAQ - wybierz odpowiedni modułWbudowany mechanizm FAQ SchemaAplikacja posiada natywnie zaimplementowany FAQ Schema (strukturalne dane FAQ), który automatycznie generuje poprawny kod JSON-LD zgodny ze standardami Google.W ramach jednej aplikacji otrzymujesz TRZY MODUŁY dla pełnej elastyczności!1. Moduł FAQ (dowolne miejsce w szablonie)Możesz wstawić moduł FAQ w każdym obszarze sklepu.Moduły możesz dodawać wielokrotnie, tworząc osobne sekcje FAQ dla różnych produktów, kategorii czy obszarów sklepu.2. Moduł FAQ dla Strony InformacyjnejPozwala przypisać FAQ do konkretnej strony informacyjnej.Dzięki temu treści są uporządkowane, logiczne i spójne z układem sklepu.3. Moduł FAQ dla Kategorii produktówPozwala przypisać FAQ do konkretnej listy kategorii produktów. Moduł może być wykorzystywany wielokrotnie dla dowolnych kategorii produktów.Dzięki temu oprócz opisów kategorii, mogą być wyświetlane estetyczne listy rozwijane FAQ z schema.org dla SEO.Instrukcja obsługi modułu “FAQ - Pytania i Odpowiedzi”

Q: Rozwijany opis SEO

Rozwijany opis SEO – doskonałe narzędzie do skracania długich treści pod SEOModuł Rozwijany opis SEO pozwala w prosty i elegancki sposób umieszczać długie treści SEO w dowolnym miejscu szablonu, bez przeładowywania strony i bez tworzenia „ściany tekstu”. To idealne rozwiązanie dla sklepów, które chcą poprawić widoczność w Google, zachować estetykę strony i jednocześnie zapewnić klientom wygodne czytanie.Aby ustawić Rozwijane opisy SEO należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Wybierz stronę na której chcesz ustawić opis SEO > Dodaj [NORD] Rozwijany opis SEOW module możesz dodać dowolną ilość treści — teksty, nagłówki, listy, grafiki, instrukcje, tabele, infografiki — a wszystko to edytujesz wygodnie za pomocą wbudowanego edytora.Moduł możesz umieścić w dowolnym miejscu szablonu i używać go wielokrotnie. Zobacz demo (na dole strony)Instrukcja obsługi modułu "Rozwijany opis SEO"

Q: Przewijany górny pasek informacji

Przewijany górny pasek informacji — profesjonalna prezentacja ważnych informacji w Twoim sklepiePrzewijany górny pasek informacji to lekki, elegancki moduł, który pozwala w prosty sposób wyświetlać kluczowe komunikaty na samej górze strony sklepu. Dzięki płynnej animacji i możliwości pełnej personalizacji, pasek idealnie wpasowuje się w wygląd sklepu i pomaga przyciągnąć uwagę klientów do najważniejszych treści.Aby ustawić Przewijany górny pasek informacji należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Integracje (lewy dolny róg) > [NORD] Przewijany górny pasek informacji - ustaw wygląd, dodaj treść i gotowe.Instrukcja obsługi modułu "Przewijany górny pasek informacji"

Szablon został zakupiony - co dalej?

Po zakupie, szablon natychmiastowo pojawi się w panelu administratora Shoper. Szablon będzie posiadał gotowy układ z wersji DEMO.

Przed rozpoczęciem konfiguracji zalecamy wykonanie kopii bezpieczeństwa szablonu NORD.

Dzięki kopii, zachowają Państwo układy oraz konfigurację elementów i modułów zgodnie z wersją DEMO. W przypadku gdyby pojawił się problem podczas konfiguracji szablonu - zawsze mogą się Państwo odwołać do kopii zapasowej lub do niej powrócić.

Zalecamy wprowadzać zmiany na kopii szablonu NORD.

Po zakończonej konfiguracji szablonu - możesz go łatwo aktywować klikając "Aktywuj szablon w sklepie".

Jak wstawić logo?

Jak podmienić film wideo?

Jak ustawić własny OG:image?

Rozwijane opisy kategorii

Tabela Rozmiarów

Pasek Postępu Darmowej Dostawy

FAQ - Pytania i Odpowiedzi

Rozwijany opis SEO

Przewijany górny pasek informacji

Wideo z YouTube na Karcie Produktu

Galeria zdjęć – siatka z wideo

Nowoczesny moduł galerii zdjęć w układzie kafelkowym z obsługą wideo z YouTube, idealny do atrakcyjnej i profesjonalnej prezentacji produktów.

Aplikacja dodaje do sklepu nowy moduł galerii zdjęć w układzie kafelkowym, który pozwala prezentować produkty w sposób bardziej atrakcyjny, czytelny i angażujący. To idealne rozwiązanie dla branż, w których jakość zdjęć ma kluczowe znaczenie – m.in. meble, moda, obuwie, wnętrza, dekoracje, beauty, elektronika, produkty premium – wszędzie tam, gdzie liczy się pierwsze wrażenie i profesjonalna ekspozycja wizualna.

Aby ustawić Galeria produktu - siatka z wideo należy wejść w panelu Shoper w Wygląd i treści > Wygląd sklepu > Twoje szablony graficzne > (wybierz szablon który chcesz edytować) > Edytuj układ i styl szablonu > Kara produktu > I podmienić aktualną galerię zdjęć na nową [NORD] Galeria zdjęć - siatka z wideo - dodaj atrybuty produktu oraz link do wideo zgodnie z instrukcją.

Moduł umożliwia również wyświetlenie wideo z YouTube jako kafelka, dzięki czemu klient otrzymuje pełniejszy obraz produktu: zdjęcia + dynamiczna, filmowa prezentacja, która wspiera decyzję zakupową.

Możesz w pełni dopasować wygląd galerii produktu do stylu sklepu:

Pozycja wideo w kafelkach - możliwość ustawienia, w którym miejscu galerii ma pojawić się kafelek wideo (pierwszy kafelek, drugi lub ostatni).
Sposób odtwarzania wideo - wybór trybu: odtwarzaj wideo w kafelku lub w oknie popup, zależnie od preferowanego stylu prezentacji.
Wyciszenie wideo - możliwość uruchomienia filmu w trybie muted (bez dźwięku), co jest idealne dla automatycznego odtwarzania i lepszego UX.
Zapętlenie wideo - opcja loop pozwala odtwarzać film w pętli, dzięki czemu materiał prezentacyjny może działać jak „wizualny showcase” produktu.
Autoodtwarzanie wideo - możliwość automatycznego odtwarzania wideo po wejściu na kartę produktu lub w oknie popup.
Włączenie kontrolek wideo - możliwość włączenia klasycznych kontrolek wideo YouTube tj. pasek, play, itp.
Konfiguracja kafelka wideo - czy miniatura z YouTube ma być pobrana jako tło.

Pływający opis produktu

Dodaj do kolumny z opisem produktu klasę CSS “sticky-opis”, aby ustawić pływający opis względem dłuższej galerii zdjęć. Oznacza to, że opis produktu może pozostawać przyklejony w prawej kolumnie i podążać za przewijaniem, co zapewnia lepszą czytelność i wygodę użytkownika.

Zobacz demo

Instrukcja obsługi modułu “Galeria zdjęć - siatka z wideo”

Układ kolumnowy

Specjalny kod, który umożliwia tworzenie estetycznych układów kolumnowych w treści stron informacyjnych oraz w opisach produktów. Kod jest w pełni responsywny - na mobile układa się jeden pod drugim.

Skopiuj poniższy kod HTML do strony informacyjnej lub opisu produktu. W edytorze kliknij "Wyłącz edytor" aby przejść do edycji kodu HTML a następnie wklej poniższy kod.

Kod HTML gotowy do użycia:
Kolumny odwrócone - Prawo tekst / lewo zdjęcie:


<div class="row-rev">
<div class="col">TUTAJ WSTAW ZDJĘCIE</div>
<div class="col">TUTAJ WSTAW TEKST</div>
</div>

Kolumny - Lewo tekst / prawo zdjęcie:


<div class="row">
<div class="col">TUTAJ WSTAW TEKST</div>
<div class="col">TUTAJ WSTAW ZDJĘCIE</div>
</div>

Responsywne tabele na mobile

Aby wykonać przewijaną palcem tabelę na mobile - przykład tutaj - wystarczy że dowolną tabelę otoczymy prostym kodem:


<div class="table-wrapper">
TUTAJ KOD TABELI
</div>

Możesz dodać tabelę w formie HTML ( możesz do tego skorzystać z gotowych narzędzi online, takich jak: https://divtable.com/generator/ ) – dzięki temu wygenerujesz gotowy kod HTML tabeli do wklejenia w Edytorze.