GC - Slider główny otwierający

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
• Pasek nawigacji - profesjonalny wygląd jak u gigantów
• Efekt peek-a-boo - widać kawałek następnego slajdu lewa - prawa dla nowoczesnego designu
• 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.

1. Wejdź do "Wygląd i treści" → "Twoje szablony graficzne"
2. Kliknij paletkę (moja polecajka → kliknij scrollem myszki by otworzyć w nowej karcie)
3. Znajdź moduł "GC - Slider główny otwierający" - zazwyczaj jest na samej górze strony głównej
4. 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!

1. Kliknij przycisk "Dodaj slajd" (albo edytuj istniejący jeśli jakiś jest)
2. Obraz slajdu - kliknij "Wybierz plik" i wgraj swoją grafikę
   Uwaga! Używaj grafik w rozdzielczości minimum 1920x600px dla najlepszej jakości. Obsługiwane formaty: JPG, PNG, WebP, SVG, GIF.
3. Tytuł nawigacji - wpisz krótki tytuł np. "Promocja -30%" (max 20 znaków dla najlepszego efektu)
4. Główny nagłówek (opcjonalnie) - duży tekst na slajdzie, np. "Wielka wyprzedaż!"
5. 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

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

1. W sekcji "Przyciski akcji" kliknij "Nowy przycisk"
2. Tekst przycisku - np. "Zobacz więcej", "Kup teraz"
3. Link przycisku - pełny URL np. https://sklep.growcommerce.pl/konfiguracja-modern-3.0-storefront
4. 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!

Cały slajd klikalny

Super opcja dla minimalistów!

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

Ustawienia slidera - magia autoplay

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

Najważniejsze ustawienia

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!

Pasek nawigacji - profesjonalny touch

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

1. Włącz pasek nawigacji - zdecydowanie TAK! ✓
2. Pokaż strzałki nawigacji - włącz jeśli masz dużo slajdów
3. Widoczne tytuły:
   • Desktop: 5 (optymalnie)
   • Tablet: 3
   • Mobile: 2
4. 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)

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!

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

Możesz też zajrzeć do:

• Demo sklepu z działającym sliderem

Poradnik stworzony z ❤️ przez zespół GrowCommerce