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".Nastę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.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 [FLOW] Tabela rozmiarów Pro lub [FLOW] Tabela rozmiarów - Produkt Aplikacja zawiera dwa moduły:[FLOW] Tabela Rozmiarów Storefront – moduł, który umożliwia przypisanie Tabeli rozmiarów do kategorii głównej produktu.[FLOW] 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 - tabela Instrukcja obsługi modułu “Tabela rozmiarów storefront”

Jak zacząć?

Q: Jak podmienić film wideo na sliderze?

Przygotowanie pliku Aby podmienić wideo w module [FLOW] Flow Slider lub dowolnym innym module Wideo w szablonie FLOW, 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-380007.shoparena.pl/upload/hero.mp4Następnie przechodzimy do edycji modułu i wklejamy link do wideo.Edytujemy [FLOW] Flow Slider > Przechodzimy do ustawień i sekcji Slajdy > Klikamy Slajd 1 > Zaznaczamy checkbox "Włącz wideo dla tego slajdu" i wklejamy link do filmu w pole URL pliku 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) > [FLOW] 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-380007.shoparena.pl/upload/og-image.pngDodanie 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 i kolekcji

Rozwijane opisy kategorii / kolekcji — pełna kontrola nad długością opisów w Shoper StorefrontZadbaj o przejrzystość, estetykę i SEO kategorii dzięki aplikacji Rozwijane opisy kategorii / kolekcji.Moduł umożliwia włączenie rozwijania oraz ustawienie wysokości widocznego fragmentu zarówno górnego, jak i dolnego opisu kategorii / kolekcji — w pełni dostosowanego do Twojego sklepu.Aby ustawić Rozwijane opisy kategorii / kolekcji 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) > [FLOW] Rozwijane opisy kategorii lub analogicznie [FLOW] Rozwijane opisy kolekcji Najważniejsze funkcje 1. Niezależna kontrola górnego i dolnego opisu kategorii / kolekcjiMoż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 / kolekcji 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 [FLOW] 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: 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 [FLOW] 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. 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) > [FLOW] 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 FLOW.

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

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

Jak wstawić logo?

Jak podmienić film wideo na sliderze?

Jak ustawić Video Reels na karcie produktu?

Jak ustawić kupon rabatowy na karcie produktu?

Jak ustawić moduł Zamów do godziny?

Jak wstawić wideo do galerii zdjęć produktu?

Jak ustawić własny OG:image?

Rozwijane opisy kategorii i kolekcji

Tabela Rozmiarów

Pasek Postępu Darmowej Dostawy

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 > [FLOW] FAQ - wybierz odpowiedni moduł

Wbudowany mechanizm FAQ Schema

Aplikacja 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 SZEŚĆ 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 Informacyjnej

Pozwala 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ów

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

4. Moduł FAQ dla pojedynczego produktu

Pozwala przypisać FAQ do pojedynczego produktu. Oznacza to że dla każdego produktu, możesz przypisać osobne FAQ. Sprawdza się dobrze, przy mniejszej ilości produktów.

5. Moduł FAQ MULTI dla pojedynczego produktu

Rozbudowana wersja modułu 4. Dzięki niemu możesz w wygodniejszy sposób zarządzać listami FAQ dla produktów w jednym miejscu - jednym module. Działanie jest takie same jak w module 4. ale usprawnia pracę z dużą ilością produktów.

6. Moduł FAQ dla wpisu Blogowego

Pozwala przypisać FAQ do pojedynczego artykułu blogowego. Oznacza to że dla każdego wpisu blogowego, możesz przypisać osobne FAQ.

Instrukcja obsługi modułu “FAQ - Pytania i Odpowiedzi”

Rozwijany opis SEO

Przewijany górny pasek informacji

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>

Tabele możesz stworzyć za pomocą wbudowanych narzędzi w edytor treści Shoper.

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.