Jak tworzyć responsywne kontenery w sklepie Shoper?

Ostatnia aktualizacja: 24 kwietnia 2024

Przykłady zastosowania kontenerów

Czasem mamy potrzebę wzbogacenia wyglądu sklepu. Dobrze przy tym, aby wszystkie moduły były responsywne – skalowały i wyświetlały się poprawnie na telefonach, tabletach jak i laptopach oraz komputerach. O czym właściwie mowa?

Pamiętaj, że podane przykłady to jedynie zrzuty ekranu, nie będą się zmieniały na różnych ekranach. W odsyłaczach do źródeł możesz sprawdzić, jak zachowują się na wskazanych sklepach.

Ikony graficzne z zachęcającymi podpisami. Na telefonie ikony pojawiają się jedna pod drugą
Rys 1. Ikony graficzne z zachęcającymi podpisami. Na telefonie ikony pojawiają się jedna pod drugą.
Ikony graficzne z zachęcającymi podpisami. Na telefonie ikony pojawiają się jedna pod drugą
Rys 1. Ikony graficzne z zachęcającymi podpisami. Na telefonie ikony pojawiają się jedna pod drugą.
Urozmaicenie wizualne karty produktu. W układzie mobilnym elementy układają się jeden pod drugim
Rys 2. Urozmaicenie wizualne karty produktu. W układzie mobilnym elementy układają się jeden pod drugim.
Urozmaicenie wizualne karty produktu. W układzie mobilnym elementy układają się jeden pod drugim
Rys 2. Urozmaicenie wizualne karty produktu. W układzie mobilnym elementy układają się jeden pod drugim.
Responsywne kategorie obrazkowe. Pozwalają urozmaicić stronę główną i szybciej przekierować klienta do promowanych kategorii
Rys 3. Responsywne kategorie obrazkowe pozwalają urozmaicić stronę główną i przekierować klienta do kategorii.
Responsywne kategorie obrazkowe. Pozwalają urozmaicić stronę główną i szybciej przekierować klienta do promowanych kategorii
Rys 3. Responsywne kategorie obrazkowe pozwalają urozmaicić stronę główną i przekierować klienta do kategorii.

Nawet jeśli edytor wizualny sklepu na coś nie pozwala, nie oznacza to absolutnie, że to niemożliwe. Jeśli tylko wiemy, jaki kod gdzie przekopiować, bez trudu dokonamy ciekawych modyfikacji.

Jeśli z kolei mamy chociaż podstawową wiedzę na temat HTML i CSS – uda nam się zmodyfikować jeszcze więcej. W tym poradniku pokażemy, jak dokonać ciekawych zmian bez zrozumienia kodu i za darmo. Musisz jednak przygotować wcześniej ciekawe grafiki lub zdjęcia.

Opisany w poniższym poradniku moduł jest modyfikacją wprowadzaną we własnym zakresie, która nie jest objęta wsparciem technicznym Shoper.

Wariant podstawowy – dwie kolumny

Ze względów bezpieczeństwa w sklepach Shoper domyślnie własny kod HTML jest czyszczony. Przejdź do sekcji menu: Ustawienia > Zaawansowane > Bezpieczeństwo i zaznacz opcję Wyłącz czyszczenie kodu HTML i zapisz zmiany.

Opcja wyłączania czyszczenia kodu HTML w sklepie Shoper
Rys 4. Opcja wyłączania czyszczenia kodu HTML w sklepie Shoper.
Opcja wyłączania czyszczenia kodu HTML w sklepie Shoper
Rys 4. Opcja wyłączania czyszczenia kodu HTML w sklepie Shoper.

Weźmy pod uwagę taki przykład: chcesz, aby obok siebie były dwa kontenery z obrazkami, które po kliknięciu odsyłają w jakieś wskazane miejsce. Finalny efekt ma być taki, jak poniżej, natomiast na mobile obrazki mają się znajdować jeden pod drugim:

Przykład wyświetlania obok siebie dwóch kontenerów
Rys 5. Przykład wyświetlania obok siebie dwóch kontenerów.
Przykład wyświetlania obok siebie dwóch kontenerów
Rys 5. Przykład wyświetlania obok siebie dwóch kontenerów.

Nie są to wymiary obowiązkowe. To przykładowe, optymalne wymiary obrazków, które będą się wyświetlały dobrze w większości sklepów Shoper (większość sklepów posiada środkową kolumnę na szerokość 1080 pikseli).l

Przejdź do sekcji: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > + dodaj moduł. W sekcji tytuł wpisz nazwę, którą później szybko rozpoznasz na liście modułów, np. kontenery na stronie głównej

W polu edytora wizualnego wgraj pierwszy z obrazków. Pamiętaj, aby była podana tylko szerokość, a wymiar wysokości usuń (nie podawaj obu wymiarów). Dzięki takiemu ustawieniu, bez wymiarów podanych „na sztywno” obrazek będzie się poprawnie wyświetlał na urządzeniach mobilnych.

Dodawanie obrazka bez uzupełnionego atrybutu wysokości
Rys 6. Dodawanie obrazka bez uzupełnionego atrybutu wysokości.
Dodawanie obrazka bez uzupełnionego atrybutu wysokości
Rys 6. Dodawanie obrazka bez uzupełnionego atrybutu wysokości.

Zwróć również uwagę na pole opis obrazka – tekst alternatywny (w skrócie alt), który jest wyświetlany, kiedy obrazek się nie załaduje. Ma pewne znaczenie dla optymalizacji pod kątem wyników wyszukiwania (SEO) – ale także nie należy go przeceniać.

Tekst alternatywny powinien opisywać obrazek lub miejsce, do którego odsyła np. kategorie). Po wstawieniu obrazka wciśnij strzałkę w prawo i kliknij enter, żeby łatwo i szybko przejść do kolejnej linijki.

W taki sam sposób dodaj drugi obrazek.

Teraz zaznacz obrazek i dodaj link – wklej adres, do którego klient będzie przekierowany po kliknięciu. Postępuj jak na animacji:

Dodawanie linka na obrazku przy użyciu edytora tekstowego w sklepie Shoper
Rys 7. Dodawanie linka na obrazku przy użyciu edytora tekstowego w sklepie Shoper.
Dodawanie linka na obrazku przy użyciu edytora tekstowego w sklepie Shoper
Rys 7. Dodawanie linka na obrazku przy użyciu edytora tekstowego w sklepie Shoper.

Gdy oba obrazki mają dodane odsyłacze, wciśnij przycisk wyłącz edytor, aby z edytora wizualnego przejść do trybu kodu HTML.

W nowej karcie otwórz stronę: https://developers.shoper.pl/theme-development/rwd 

Przejdź do linijki Flex grid – 12 columns. Zobaczysz tam różne układy kolumnowe. Każdy z nich reprezentuje inny kod. Nas interesuje układ dwukolumnowy:

Schemat układu kolumn (Flex grid - 12 columns)
Rys 8. Schemat układu kolumn (Flex grid – 12 columns).
Schemat układu kolumn (Flex grid - 12 columns)
Rys 8. Schemat układu kolumn (Flex grid – 12 columns).

Z przykładów przejdź do zakładki HTML, aby pobrać kod.

Kod HTML układu dwóch kolumn (dwa kontenery obok siebie)
Rys 9. Kod HTML układu dwóch kolumn (dwa kontenery obok siebie).
Kod HTML układu dwóch kolumn (dwa kontenery obok siebie)
Rys 9. Kod HTML układu dwóch kolumn (dwa kontenery obok siebie).

Jak możesz się łatwo domyślić, interesuje cię zaznaczony powyżej fragment. W nim również pojawia się 2.1 oraz 2.2. Bez zagłębiania się w szczegóły, po prostu skopiuj ten fragment kodu.

Teraz wróć do obrazków w Panelu administracyjnym sklepu i wyświetl kod HTML (wyłącz edytor). Zobaczysz mniej więcej taki kod:

Kod HTML dodanych dwóch obrazków przed wrzuceniem ich do dwóch kontenerów (obok siebie)
Rys 10. Kod HTML dodanych dwóch obrazków przed wrzuceniem ich do dwóch kontenerów (obok siebie).
Kod HTML dodanych dwóch obrazków przed wrzuceniem ich do dwóch kontenerów (obok siebie)
Rys 10. Kod HTML dodanych dwóch obrazków przed wrzuceniem ich do dwóch kontenerów (obok siebie).

Fragment z jednym linkiem i obrazkiem i bardzo podobny fragment z drugą grafiką i odsyłaczem. Oba będą między <p> oraz </p> – akapicie.

U samej góry wklej skopiowany wcześniej kod. Teraz w zależności od tego, czy dany obrazek ma być po lewej, czy po prawej, przeklej kody obrazków, zastępując 2.1 i 2.2. Lepiej zobrazuje to poniższy zrzut ekranu:

Po wklejeniu kodu kontenerów, umieść w odpowiednich miejscach kod HTML obrazków
Rys 11. Po wklejeniu kodu kontenerów, umieść w odpowiednich miejscach kod HTML obrazków.
Po wklejeniu kodu kontenerów, umieść w odpowiednich miejscach kod HTML obrazków
Rys 11. Po wklejeniu kodu kontenerów, umieść w odpowiednich miejscach kod HTML obrazków.

Wytnij (ctrl + x lub prawy kliknięcie prawym przyciskiem myszy i opcja wytnij) fragment odpowiedzialny za jeden z obrazków i wstaw w miejsce „2.1”. „2.2” zastąp pozostałym fragmentem kodu. Następnie usuń zbędne linijki odstępów („entery”), jeśli takie zostały.

Wracamy do edytora wizualnego, wybierając przycisk włącz edytor. Kliknij dowolne miejsce i wciśnij ctrl + a, aby zaznaczyć wszystko we właśnie utworzonym moduke. Wybierz ikonę wyśrodkowania, aby całość zgrabnie wyświetlała się na mniejszych ekranach telefonów komórkowych. Pozostaje zapisać zmiany.

Jak wstawić responsywny moduł do sklepu Shoper?

Teraz pora zamieścić dopiero co utworzony moduł na stronie głównej. W Panelu administracyjnym sklepu przejdź do sekcji menu: Wygląd i treści > Wygląd sklepu > Obecny szablon graficzny > Moduły > Strona główna. Z listy dostępnych modułów przemieść nowy moduł do wybranego przez siebie miejsca i zapisz zmiany.

Wstaw moduł kategorii obrazkowych w wybranym miejscu sklepu Shoper (np. strona główna)
Rys 12. Wstaw moduł kategorii obrazkowych w wybranym miejscu sklepu Shoper (np. strona główna).
Wstaw moduł kategorii obrazkowych w wybranym miejscu sklepu Shoper (np. strona główna)
Rys 12. Wstaw moduł kategorii obrazkowych w wybranym miejscu sklepu Shoper (np. strona główna).

Czy mogę dodać kontenery na kartach produktów w sklepie Shoper?

Tę samą mechanikę możesz zastosować przy kartach produktów, które najbardziej cię interesują.

W pierwszej kolejności przygotuj opis.
W opisie użyj nagłówków, pogrubień, dobrego formatowania tekstu.

Wstaw obrazek (pamiętaj o usunięciu wymiaru wysokości).
Następnie wyłącz edytor wizualny i przejdź do widoku z kodem.
Na samej górze wklej kod skopiowany ze wskazanej przez nas wcześniej strony.
W miejsce „2.1” wklej fragment kodu odpowiedzialny za wyświetlanie obrazka.

Poznasz go bardzo łatwo, bo zawiera skrót img (z angielskiego image – obrazek) i tekst alternatywny (alt) taki, jaki wcześniej został wpisany. Jeśli martwisz się, że nie rozpoznasz kodu z obrazkiem, po prostu kilkukrotnie wciśnij enter. Uda ci się łatwiej rozróżnić opis od obrazka.

W miejsce „2.2” wklej kod, który pozostał.

Jest to treść odpowiedzialna za formatowanie twojego opisu.

Wyłącz edytor HTML, zaznacz obrazek i kliknij wyśrodkowanie, aby estetycznie wyświetlał się na telefonie (nie wyrównany do lewej strony z marginesem po prawej).
Zapisz zmiany i zobacz, jak produkt prezentuje się w sklepie.

Po lewej stronie będzie znajdował się obrazek, a po prawej sformatowany tekst. Warto zwrócić uwagę na to, że nie może być dużych dysproporcji między tekstem a wysokością obrazka. Zbyt wysoki obrazek i mało tekstu sprawią, że pod tekstem będzie zbyt wiele pustej przestrzeni. Niewielki obrazek i bardzo dużo tekstu zaowocują nieestetyczną przerwą pod obrazekiem.

Jak dodać więcej kolumn do kontenera?

Wystarczy, że na stronie https://developers.shoper.pl/theme-development/rwd przekopiujesz inny fragment kodu. Doskonałym przykładem są cztery kolumny z kategoriami obrazkowymi.

Przykład z ikonami obrazującymi wyróżniki marki, z dodanymi nagłówkami i podpisami, opisaliśmy w artykule: Jak zaprezentować wyróżniki marki w sklepie Shoper?

To doskonały moduł do wykorzystania na stronie głównej, czy do wstawienia jako moduł na kartach produktów („Szczegóły produktu” w sekcji menu: Styl graficzny & Nawigacja > Aktywny styl graficzny > Moduły).

Do dyspozycji masz różne układy: 

12-kolumnowy „Flex grid – 12 columns” z marginesami dookoła:

  • jedna kolumna na 100% szerokości,
  • dwie kolumny,
  • trzy kolumny,
  • cztery kolumny,
  • sześć kolumn,
  • dwanaście kolumn.

Układ dwunastokolumnowy działa w ten sposób, że liczba kolumn musi być dzielnikiem liczby 12. Dlatego tą metodą nie uzyskasz np. pięciu kolumn.

10-kolumnowy „Flex grid – 10 columns” bez marginesów między kolumnami

Ten układ oferuje różne możliwości, także układy, gdzie kolumny nie mają równej szerokości:

Schemat układu kolumn (Flex grid – 10 columns)
Rys 13. Schemat układu kolumn (Flex grid – 10 columns).
Schemat układu kolumn (Flex grid – 10 columns)
Rys 13. Schemat układu kolumn (Flex grid – 10 columns).

Jak zrobić bardziej rozbudowane responsywne kontenery?

Z reguły bardziej skomplikowane układy stosuje się jednorazowo – na przykład dla stworzenia bardziej rozbudowanej, ciekawej strony głównej. W wypadku produktów, bardziej złożone układy są rzadziej spotykane.

Spotykaną praktyką jest jednak przygotowanie szablonu. Możesz utworzyć szablon dla najważniejszych produktów, następnie podmieniać jedynie treść.

Tutaj warto posiadać większe zrozumienie kodu, jednak spróbujemy uprościć schemat działania. Kontenery można nawzajem w sobie zagnieżdżać.

Na stronie możesz skorzystać z dwóch gotowych przykładów, których kod przekopiujesz, po przejściu do zakładki HTML:

Schemat układu kolumn (Flex grid – 12 columns - nesting)
Rys 14. Schemat układu kolumn (Flex grid – 12 columns – nesting).
Schemat układu kolumn (Flex grid – 12 columns - nesting)
Rys 14. Schemat układu kolumn (Flex grid – 12 columns – nesting).

Chcąc zaprojektować własny układ, zacznij od rozrysowania tabel. Załóżmy, że interesuje nas taki podział:

Przykładowy rozszerzony układ kolumn
Rys 15. Przykładowy rozszerzony układ kolumn.
Przykładowy rozszerzony układ kolumn
Rys 15. Przykładowy rozszerzony układ kolumn.
Przygotuj zawartość modułu: obrazki, teksty – wszystko co ma się znajdować w poszczególnych miejscach.

Przekopiuj kod odpowiedzialny za wyświetlanie dwóch kolumn:
Przykładowy kod HTML dla układu dwóch kolumn
Rys 16. Przykładowy kod HTML dla układu dwóch kolumn.
Przykładowy kod HTML dla układu dwóch kolumn
Rys 16. Przykładowy kod HTML dla układu dwóch kolumn.
Wklej kod na samej górze edytora. W miejsce pierwszej kolumny – „2.1” – wklej ten sam kod raz jeszcze. W ten sposób wewnątrz pierwszej kolumny zamieścisz układ dwukolumnowy.
Umieszczanie wewnątrz pierwszej kolumny kolejnego układu dwukolumnowego
Rys 17. Umieszczanie wewnątrz pierwszej kolumny kolejnego układu dwukolumnowego.
Umieszczanie wewnątrz pierwszej kolumny kolejnego układu dwukolumnowego
Rys 17. Umieszczanie wewnątrz pierwszej kolumny kolejnego układu dwukolumnowego.
Pod całym kodem będzie się znajdował kod obrazków czy treści – zrobionych wcześniej w edytorze wizualnym.

Pozostaje przekleić go po kolei w miejsce kolumn: 2.1, 2.2 (które są w pierwszej kolumnie) i 2.2 (szerokiej na połowę strony drugiej kolumny).

Warto zapamiętać!
W powyższym poradniku zostało wyjaśnione:
  • jakie zastosowanie mają takie kontenery?
  • jak ich używać bez znajomości HTML i CSS?
  • zobaczysz przykłady użycia z konkretnych sklepów;
  • dowiesz się krok po kroku, jak wygląda tworzenie układów kolumnowych, które na telefonach zmienią sposób wyświetlania.
Udostępnij artykuł:

Przetestuj sklep internetowy
przez 14 dni za darmo

Korzystaj ze wszystkich funkcji oprogramowania za darmo i bez zobowiązań.

Testuj wszystkie funkcje przez 14 dni bez zobowiązań. Zakładając sklep poprzez podanie
adresu e-mail akceptujesz nasz Regulamin i Politykę Prywatności