cookie

Wykorzystujemy ciasteczka (ang. cookies) oraz podobne technologie w celu świadczenia usług, dostosowania serwisu do indywidualnych preferencji użytkowników oraz w celach statystycznych i reklamowych. Możesz zawsze wyłączyć ten mechanizm w ustawieniach przeglądarki. Korzystanie z naszego serwisu bez zmiany ustawień przeglądarki oznacza, że cookies będą zapisane w pamięci urządzenia. Więcej w Polityce Prywatności.

5 września 2020

Jak ustawić układ 2 kolumnowy na wersji mobilnej w sklepie Shoper?

Jeżeli Twój sklep posiada więcej niż kilkadziesiąt produktów, a klient aby dokonać wyboru musi przejrzeć nawet kilkaset z nich powinieneś rozważyć wprowadzenie układu dwu kolumnowego na widoku mobilnym. 

Zmniejsza on nieco podgląd zdjęcia na listingu, jednak pozwala przejrzeć użytkownikowi więcej produktów w krótszym czasie. Możemy wyświetlić więcej produktów, a nasza strona nie stanie się przesadnie wysoka

W przypadku posiadania indywidualnego szablonu graficznego, możemy poprosić o wdrożenie poprawki autora szablonu, niestety w przypadku posiadania standardowego szablonu Shoper RWD nie jesteśmy w stanie dokonać tej zmiany jednym kliknięciem

Jak wygląda listing produktów po zmianach?

Wysokość strony zmniejszyła się z 8435px do 4215px pozwalając użytkownikowi przejrzeć tę samą ilość produktów w 2x krótszym czasie, wykonując mniej gestów

Jak dokonać zmiany samodzielnie?

Jeżeli posiadasz standardowy szablon Shoper o nazwie „RWD – uniwersalny” nawet z niewielkimi modyfikacjami, możesz skorzystać z gotowego rozwiązania, które dla Ciebie przygotowaliśmy. Możesz je wdrożyć samodzielnie za darmo!

Zaloguj się do nowego panelu administracyjnego swojego sklepu Shoper. Z prawego menu wybierz „Wygląd i treści” -> „Wygląd sklepu” -> „Obecny szablon graficzny” następnie z menu znajdującego się obok wybierz „Własny styl CSS” i na końcu pola tekstowego wklej poniższy kod (nie usuwając tego co już zostało dodane)


/* -------- Układ 2 kolumnowy na mobile - START -------- */
@media screen and (max-width: 767px) {
  .rwd.wrap .main { margin: 0 1em; }
  .rwd .s-row, #box_specialoffer .innerbox, #box_lastadded .innerbox { margin-left: 0; display: flex; flex-wrap: wrap;}
  .rwd.wrap .main { margin: 0 1em;}
  .rwd .main #box_mainproducts .products.viewphot .product .product-inner-wrap { padding: 0.5em;}
  .rwd .main #box_mainproducts .products .product, #box_lastadded .product, #box_specialoffer .product { max-width: 50%;}
}
/* -------- Układ 2 kolumnowy na mobile - KONIEC -------- */
			

Sekcje START oraz KONIEC pozwolą Ci na szybkie rozpoznanie różnych modyfikacji oraz usunięcie ich w razie problemów lub zmiany zdania