Dlaczego Twoim klientom to się spodoba?

Na długich stronach z listą produktów, blogu lub stronie głównej klienci po dotarciu do końca muszą przewijać z powrotem do góry. Estetyczny przycisk "wróć do góry" rozwiązuje ten problem jednym kliknięciem — poprawia nawigację i sprawia, że sklep jest wygodniejszy w użyciu.

Moduł dodaje przycisk który pasuje wizualnie do identyfikacji marki — możesz dostosować kolor, ikonę, rozmiar i animację.

Jakie posiada możliwości?

Moduł oferuje pełną kontrolę nad wyglądem i zachowaniem przycisku powrotu do góry:

• Dwa tryby widoczności: pojawia się po przewinięciu strony w górę lub zawsze widoczny,
• Dwa style animacji: wysuwanie z dołu ekranu lub pojawianie/zanikanie (fade),
• Pozycja na ekranie: lewa lub prawa strona,
• Konfigurowalny odstęp od krawędzi i od dołu ekranu (px),
• Kolor tła przycisku i kolor tła po najechaniu (hover),
• Własna ikona — SVG lub PNG z przezroczystym tłem (zalecane), z konfigurowalnym kolorem,
• Rozmiar przycisku i zaokrąglenie narożników — od prostokąta po okrąg,
• Opcja ukrycia przycisku na urządzeniach mobilnych,
• Możliwość włączenia lub wyłączenia bez usuwania modułu.

Korzyści dla Ciebie (Sprzedawcy)

Przycisk powrotu do góry to mały detal o dużym wpływie na UX sklepu:

• Lepsza nawigacja: klienci nie muszą ręcznie przewijać do góry długich stron,
• Spójny wygląd: kolor tła, ikona i rozmiar dopasowane do identyfikacji wizualnej marki,
• Obsługa LESS variables: kolor tła może być ustawiony jako zmienna AVANT (np. @primaryColor) dla automatycznej synchronizacji z paletą szablonu,
• Kontrola na mobile: opcja ukrycia przycisku na telefonach gdy zajmuje za dużo miejsca na ekranie.

Co zyska Twój klient?

Klient przeglądający długie strony sklepu z przyciskiem powrotu:

• Wygodę nawigacji: szybki powrót na górę strony jednym kliknięciem,
• Komfort przeglądania: nie trzeba ręcznie przewijać długich list produktów lub artykułów blogowych,
• Subtelne działanie: przycisk pojawia się tylko gdy jest potrzebny (po przewinięciu w górę), nie zaśmiecając widoku.

Jak to działa? (3 proste kroki)

- Krok 1: Instalacja: Zainstaluj moduł z Shoper AppStore i umieść go w edytorze wizualnym SVE w dowolnym miejscu szablonu.

- Krok 2: Konfiguracja: Ustaw zachowanie przycisku (tryb widoczności, animacja, pozycja, odstępy) i wygląd (kolor tła, kolor hover, ikona, kolor ikony, rozmiar, zaokrąglenie). Opcjonalnie wyłącz przycisk na mobile.

- Krok 3: Działa automatycznie: Przycisk jest widoczny globalnie na wszystkich stronach sklepu. Pojawia się i znika zgodnie z wybranym trybem widoczności i animacją.

Najczęściej zadawane pytania (FAQ)

Jak ustawić okrągły przycisk?
Ustaw wartość Border radius na 50 lub więcej pikseli. Przy domyślnym rozmiarze przycisku 44px wartość 50px daje idealny okrąg.

Czy mogę użyć koloru z palety szablonu AVANT?
Tak, pole koloru tła obsługuje zmienne LESS (@primaryColor, @primaryColors700 itp.) — wpisz nazwę zmiennej zamiast kodu hex.

Jakie formaty ikon są obsługiwane?
SVG, PNG (z przezroczystym tłem), WebP, JPG oraz JPEG. Najlepsze efekty daje SVG lub PNG z przezroczystym tłem — pozwala na właściwe zastosowanie koloru ikony.

Dodatkowe informacje

Moduł jest przeznaczony do szablonu Storefront.

Instrukcja modułu

Jeśli chcesz zobaczyć jakie inne aplikacje/moduły aktualnie oferujemy w sprzedaży w sklepie shoper - kliknij tutaj

Działanie przedstawionego modułu można zobaczyć w demo naszego szablonu Avant Storefront oraz można kupić gotowy szablon z wieloma innymi modułami dostępnymi w cenie szablonu.

Demo szablonu Avant Storefront