Tilføj knappen Tilbage til toppen på lange sider

Hvis du har lange sider, der kræver megen rulning, kan du føje knappen Tilbage til toppen til dit tema.

Eksempel på “Tilbage til toppen”

Opret et kodestykke for “tilbage til toppen”

  1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

  2. Navngiv kodestykket back-to-the-top, og klik derefter på Opret kodestykke. Din kodestykkefil åbnes i kodeeditoren.

  3. Indsæt følgende kode i din nye back-to-the-top-fil:

    ```html {% comment %} Reducer nedenstående værdi, hvis knappen “Tilbage til toppen” skal vises højere oppe på siden. Denne værdi er i pixel. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Lodret forskydning fra bunden af browseren til knappens placering. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Tilbage til toppen {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Klik på Gem.

    Inkluder dit kodestykke

    1. Åbn theme.liquid-filen i mappen Layouts.

    2. Rul ned til bunden af filen. Indsæt denne kode lige over det afsluttende </body>-tag:

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

    Din kode bør se således ud:

    Inkluder kodestykke for “tilbage til toppen”
    ]

    1. Klik på Gem.

    Konfigurer knappen “Tilbage til toppen” (valgfrit)

    Hvis du vil tilpasse knappen Tilbage til toppen, skal du klikke her og se nærmere på de første linjer i dit kodestykke.

    • Hvis du vil ændre placeringen af knappen i forhold til bunden af browseren, skal du redigere position_from_bottom-værdien:
    {% assign position_from_bottom = '4em' %}
    • Hvis du vil ændre, hvor langt dine kunder skal rulle ned, før knappen vises, skal du redigere vertical_offset_for_trigger-værdien:
    {% assign vertical_offset_for_trigger = 300 %}

    Demobutik

    Besøg demobutikken for at se et eksempel på denne tilpasning.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis