Voeg een knop Terug naar boven toe op lange pagina's

Als je pagina's hebt die lang zijn en veel moeten scrollen, kun je een knop Terug naar boven toevoegen aan je thema.

Voorbeeld van Terug naar boven

Maak een fragment Terug naar boven aan

  1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

  2. Noem je fragment back-to-the-top en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.

  3. Plak de volgende code in je zojuist aangemaakte back-to-the-top :

    ```html {% comment %} Verlaag de onderstaande waarde als je de knop Terug naar boven nodig hebt om hoger op de pagina te verschijnen. Die waarde is in pixels. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Verticale offset van onderaan de browser voor de positie van de knop. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Terug naar boven {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Klik op Opslaan.

    Voeg je fragment toe

    1. Open in de map Opmaak het theme.liquid-bestand.

    2. Blader naar de onderkant van het bestand. Plak deze code boven </body> de laatste tag:

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

    Je code ziet er als volgende uit:

    Terug naar boven inclusief fragment
    ]

    1. Klik op Opslaan.

    Configureer de knop Terug naar boven (optioneel)

    Om je knop Terug naar boven aan te passen, klik je hier en bekijk je de eerste regels van je fragment.

    • Bewerk de waarde position_from_bottom om de positie van je knop ten opzichte van de onderkant van de browser te wijzigen:
    {% assign position_from_bottom = '4em' %}
    • Bewerk de vertical_offset_for_trigger-waarde als je wilt wijzigen hoe ver naar beneden een klant moet scrollen voordat de knop wordt getoond:
    {% assign vertical_offset_for_trigger = 300 %}

    Demowinkel

    Ga naar de demowinkel om een voorbeeld van deze aanpassing te bekijken.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis