Dodaj przycisk Powrót do góry na długich stronach

W przypadku długich stron wymagających czasochłonnego przewijania możesz dodać przycisk Powrót do góry do swojego szablonu.

Przykład powrotu do góry

Utwórz fragment kodu powrotu do góry

  1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

  2. Nazwij swój fragmentu kodu back-to-the-top, a następnie kliknij opcję Utwórz fragment kodu. Plik fragmentu kodu otworzy się w edytorze kodu.

  3. Wklej następujący kod do nowo utworzonego pliku back-to-the-top:

    ```html {% comment %} Zmniejsz poniższą wartość, jeśli chcesz, aby przycisk powrotu do góry był wyświetlany wyżej na stronie. Wartość ta jest podana w pikselach. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Pionowe przesunięcie przycisku od dołu przeglądarki. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Powrót do góry {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Kliknij opcję Zapisz.

    Dołącz fragment kodu

    1. W folderze Układy otwórz plik theme.liquid.

    2. Przewiń do dołu pliku. Bezpośrednio nad tagiem zamykającym </body> wklej ten kod:

    {% render 'back-to-the-top' %}

    Twój kod powinien wyglądać tak:

    Powrót do góry zawiera fragment kodu
    ]

    1. Kliknij opcję Zapisz.

    Skonfiguruj przycisk powrotu do góry (opcjonalnie)

    Aby dostosować przycisk powrotu do góry, kliknij tutaj i sprawdź pierwsze linie fragmentu kodu.

    • Aby zmienić położenie przycisku względem dołu przeglądarki, edytuj wartość position_from_bottom:
    {% assign position_from_bottom = '4em' %}
    • Aby zmienić wartość wskazującą, jak daleko w dół klient musi przewinąć, zanim przycisk będzie widoczny, edytuj wartość vertical_offset_for_trigger:
    {% assign vertical_offset_for_trigger = 300 %}

    Sklep w wersji demonstracyjnej

    Odwiedź sklep w wersji demonstracyjnej, aby zobaczyć przykład tego dostosowania.

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo