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.
Maak een fragment Terug naar boven aan
Desktop
- Ga in het Shopify-beheercentrum naar webshop > Thema's.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Noem je fragment
back-to-the-top
en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.
- Plak de volgende code in je zojuist aangemaakte
back-to-the-top
:
- Klik op Opslaan.
iPhone
- Tik in de Shopify-app op de knop ….
- Tik in het gedeelte Verkoopkanalen op webshop.
- Tik op Thema's beheren.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Noem je fragment
back-to-the-top
en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.
- Plak de volgende code in je zojuist aangemaakte
back-to-the-top
:
- Klik op Opslaan.
Android
- Tik in de Shopify-app op de knop ….
- Tik in het gedeelte Verkoopkanalen op webshop.
- Tik op Thema's beheren.
- Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.
- Klik in de directory Fragmenten op Een nieuw fragment toevoegen.
- Noem je fragment
back-to-the-top
en klik vervolgens op Fragment aanmaken. Je fragmentbestand wordt geopend in de code-editor.
- Plak de volgende code in je zojuist aangemaakte
back-to-the-top
:
- Klik op Opslaan.
Voeg je fragment toe
- Open in de map Opmaak het
theme.liquid
-bestand.
- Blader naar de onderkant van het bestand. Plak deze code boven
</body>
de laatste tag:
Je code ziet er als volgende uit:
- Klik op Opslaan.
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:
- Bewerk de
vertical_offset_for_trigger
-waarde als je wilt wijzigen hoe ver naar beneden een klant moet scrollen voordat de knop wordt getoond:
Demowinkel
Ga naar de demowinkel om een voorbeeld van deze aanpassing te bekijken.