05. GC - Slider główny otwierający

Czas konfiguracji: 10-15 minut
Poziom trudności: Łatwy
Wymagania: Dostęp do edytora wizualnego, przygotuj sobie uprzednio grafiki w rozdzielczości min. 1920x600px lub 1920×400 (personalnie ja te niższe preferuje) i jego kopię najlepiej 600×800px na telefony

Co to za moduł i dlaczego go pokochasz?

Slider główny otwierający to pierwszy element, który widzi klient wchodząc na Twój sklep. To Twoja szansa na zrobienie świetnego pierwszego wrażenia! :)

Co potrafi ten moduł?

Do 10 slajdów - wystarcza na każdą promocję
Pozycjonowanie tekstu - lewa, środek, prawa (nowość!)
Wiele przycisków CTA - możesz dodać aż do 3 przycisków na slajd [CTA = Call To Action czyli Kup Teraz, zobacz, przejdź, Czytaj dalej]
Pasek nawigacji - profesjonalny wygląd jak u gigantów branży ecommerce
Efekt peek-a-boo - widać kawałek następnego slajdu lewa - prawa dla nowoczesnego designu wzorem z dużych sklepów
Pełna responsywność - ładnie wygląda na każdym urządzeniu, PAMIĘTAJ że oprócz slidera w wersji komputer masz też wersję mobilną!

Gdzie znaleźć ten cud?

Klasycznie otwieramy nasz edytor wizualny. Jeśli nie wiesz jak, to zerknij tutaj do poradnika.

Wejdź do "Wygląd i treści" → "Twoje szablony graficzne"
Kliknij paletkę (moja polecajka → kliknij scrollem myszki by otworzyć w nowej karcie)
Znajdź moduł "GC - Slider główny otwierający" - zazwyczaj jest na samej górze strony głównej
Kliknij w niego

Dodajemy pierwszy slajd - krok po kroku

No dobra, czas na akcję! Zaczynamy od podstaw.

Krok 1: Sekcja "Slajdy slidera"

Po otwarciu konfiguracji zobaczysz pierwszą sekcję "Slajdy slidera". Tu dzieje się magia!

Na samej górze znajdziesz super pomocny infobox z linkami do dokumentacji. Jak czegoś nie wiesz - klikaj śmiało!

Kliknij przycisk "Dodaj slajd" (albo edytuj istniejący jeśli jakiś jest)
Obraz slajdu - kliknij "Wybierz plik" i wgraj swoją grafikę
Uwaga! Używaj grafik w rozdzielczości minimum 1920x600px (albo znowu 1920×400) dla najlepszej jakości. Obsługiwane formaty: JPG, PNG, WebP, SVG, GIF.

Ucina Ci obraz na komputerze? Zmień proporcje lub je odznacz o tu:
Tytuł nawigacji - wpisz krótki tytuł np. "Promocja -30%" (max 20 znaków dla najlepszego efektu)
Główny nagłówek (opcjonalnie) - duży tekst na slajdzie, np. "Wielka wyprzedaż!"
Tekst opisu (opcjonalnie) - dodatkowy opis pod nagłówkiem

Krok 2: Pozycjonowanie tekstu (NOWOŚĆ!)

To jest świeża funkcja, którą dodaliśmy w sierpniu 2025. Teraz możesz ustawić gdzie ma się pojawić tekst na slajdzie!

W polu "Pozycja tekstu" wybierz:

Lewa - tekst po lewej (domyślnie)
Środek - wyśrodkowany, świetne dla symetrycznych kompozycji
Prawa - po prawej, gdy masz ważny element grafiki po lewej

Wskazówka: Używaj pozycjonowania mądrze! Jeśli na grafice masz produkt po lewej, ustaw tekst po prawej dla lepszego balansu wizualnego.

Krok 3: Kolory tekstu (opcjonalnie)

Pole "Kolor tekstu (opcjonalnie)" pozwala nadpisać domyślny kolor tekstu. Przydatne gdy masz ciemne i jasne slajdy na przemian.

Przyciski CTA - więcej niż jeden!

CTA = Call to Action = Kup teraz, zobacz także, sprawdź = wykonaj kliencie akcje!

Tu zaczyna się prawdziwa zabawa! Możesz dodać do 3 przycisków na każdy slajd.

Dodawanie przycisków

W sekcji "Przyciski akcji" kliknij "Nowy przycisk"
Tekst przycisku - np. "Zobacz więcej", "Kup teraz"
Link przycisku - pełny URL np. https://sklep.growcommerce.pl/konfiguracja-modern-3.0-storefront
Styl przycisku (nowość!):
- Pełny przycisk - pełne wypełnienie, dla głównego CTA
- Tylko kontur - tylko obramowanie, dla drugorzędnych akcji

Niestandardowe kolory przycisków

Chcesz żeby przycisk wyróżniał się jeszcze bardziej? Mamy to!

Opcja	Co robi?	Kiedy używać?
Kolor tła przycisku CTA (opcjonalnie)	Kolor tła przycisku	Gdy chcesz mocny akcent
Kolor tekstu przycisku CTA (opcjonalnie)	Kolor tekstu	Dla kontrastu z tłem
Kolor tła przycisku CTA przy najechaniu (opcjonalnie)	Tło po najechaniu	Efekt hover
Kolor tekstu przycisku CTA przy najechaniu (opcjonalnie)	Tekst po najechaniu	Zmiana koloru na hover

Zostaw puste jeśli chcesz użyć domyślnych kolorów z motywu. Na leniwca możesz olać te pola :)

Cały slajd klikalny

Super opcja dla minimalistów!

Zaznacz "Spraw, by cały slajd był klikalny"
W polu "Ogólny link slajdu" wpisz URL
Teraz cała grafika jest klikalnym linkiem!

Uwaga! Gdy włączysz tę opcję, przyciski nadal działają osobno. To nie zastępuje przycisków, tylko dodaje link do grafiki.

Ustawienia slidera - magia autoplay

Przejdź do zakładki "Ustawienia slidera". Tu ustawiamy jak slider ma się zachowywać.

WAŻNE! Na górze sekcji jest ostrzeżenie o zaawansowanych ustawieniach. Jeśli nie wiesz co robisz, zostaw domyślne wartości!

Najważniejsze ustawienia

Opcja	Zalecana wartość	Opis
Włącz autoprzewijanie	Włączone ✓	Slajdy zmieniają się automatycznie
Interwał autoprzewijania (ms)	5000ms	5 sekund na slajd to optymalna opcja
Prędkość przejścia (ms)	800ms	Płynność animacji
Pokaż strzałki nawigacji	Włączone ✓	Strzałki lewo/prawo

Efekt Peek-a-boo (Podglądy boczne)

To moja ulubiona funkcja! W polu "Podglądy boczne (Padding)" możesz ustawić np. "50px" i wtedy:

Widać kawałek poprzedniego slajdu z lewej
Widać kawałek następnego slajdu z prawej
Klient wie, że może przewijać dalej!

Pro tip: Na desktop ustaw "50px", na mobile zostaw puste (0) dla pełnej szerokości.

Pasek nawigacji - profesjonalny touch

Zakładka "Pasek nawigacji" to wisienka na torcie!

Włącz pasek nawigacji - zdecydowanie TAK! ✓
Pokaż strzałki nawigacji - włącz jeśli masz dużo slajdów
Widoczne tytuły:
- Desktop: 5 (optymalnie)
- Tablet: 3
- Mobile: 2
Wyśrodkuj aktywny tytuł w nawigacji - włącz dla lepszego efektu wizualnego

Pasek nawigacji wyświetla tytuły które wpisałeś w "Tytuł nawigacji" dla każdego slajdu. Aktywny slajd jest podświetlony i ma animowany progress bar!

Stylowanie - dopasuj do swojego sklepu

Ostatnia zakładka "Stylizacja" pozwala dostosować kolory do Twojego brandu.

Co możesz zmienić?

Kolor strzałek nawigacji - kolor strzałek głównego slidera
Kolor tekstu nawigacji - kolor nieaktywnych tytułów w pasku
Kolor aktywnego tekstu nawigacji - kolor aktywnego tytułu
Tło aktywnej nawigacji - tło aktywnego elementu
Kolor obramowania aktywnej nawigacji - kolor animowanego paska postępu
Kolor tła paska nawigacji - tło całego paska nawigacji
Przezroczystość elementów nawigacji - przezroczystość nieaktywnych (domyślnie 0.6)

Możesz używać kodów HEX (#FF5733), RGB, a nawet zmiennych CSS z motywu!

Najczęstsze problemy (i jak je rozwiązać)

Problem: Slajdy się nie zmieniają

Rozwiązanie: Sprawdź czy "Włącz autoprzewijanie" jest włączone. Jeśli tak, zwiększ "Interwał autoprzewijania (ms)" - może jest za krótki.

Problem: Nie widać paska nawigacji

Rozwiązanie: Upewnij się że "Włącz pasek nawigacji" jest zaznaczone i że masz więcej niż 1 slajd.

Problem: Tekst jest nieczytelny na tle

Rozwiązanie: Użyj opcji "Kolor tekstu (opcjonalnie)" dla konkretnego slajdu lub dodaj półprzezroczyste tło do grafiki w programie graficznym.

Problem: Slider czasami się nie przewija mimo końca odliczania

Rozwiązanie: Tak ma być :) Slider ma funkcję zatrzymywania przewijania gdy masz na nim myszkę, żeby ułatwić Ci czytanie treści slidera. Później wraca do swojego stanu.

Problem: Przyciski nie działają

Rozwiązanie: Sprawdź czy w "Link przycisku" masz pełny URL z https:// na początku!

Uwaga!: Nie usuwaj klasy gc__mobile__max__width z modułu! To zepsuje responsywność! Więcej na ten temat tutaj.

Wskazówki PRO

Kompresuj grafiki - używaj TinyPNG lub Squoosh czy innych podobnych przed uploadem
Testuj na mobile - 60% ruchu to telefony! PAMIĘTAJ że slider mobilny jest OSOBNYM modułem!
Nie przesadzaj z ilością - 2-3 slajdów to optimum
Aktualizuj regularnie - stare promocje = utrata wiarygodności
A/B testuj - różne wersje CTA mogą dać różne wyniki

Checklist - czy wszystko działa?

Przed publikacją sprawdź:

☐ Wszystkie grafiki się wczytują (żadnych błędów 404)
☐ Linki w przyciskach prowadzą do właściwych stron
☐ Autoplay działa płynnie
☐ Pasek nawigacji pokazuje właściwe tytuły
☐ Kolory pasują do reszty sklepu
☐ Slider dobrze wygląda na telefonie
☐ Teksty są czytelne na wszystkich slajdach
☐ Pozycjonowanie tekstu jest optymalne dla każdej grafiki

Gratulacje! Właśnie skonfigurowałeś profesjonalny slider! Teraz Twój sklep wygląda jak u najlepszych. Powodzenia w sprzedaży! :)
P.S. Po skonfigurowaniu wersji na komputerze kliknij sobie widok mobilny:

Możesz też zajrzeć do:

Demo sklepu z działającym sliderem