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

Als je pagina's hebt die lang zijn en waar veel gescrold moet worden, kun je een knop Terug naar boven aan je thema toevoegen.

Voorbeeld van Terug naar boven

Maak een fragment Terug naar boven aan

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