Legg til en Tilbake til toppen-knapp på lange sider

Hvis du har sider som er lange og krever mye rulling, kan du legge til en Tilbake til toppen-knapp i temaet.

Tilbake til toppen-eksempel

Opprett en tilbake-til-toppen-kodebit

  1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

  2. Gi kodebiten navnet back-to-the-top, og klikk på Opprett kodebit. Kodebitfilen åpnes i koderedigeringsprogrammet.

  3. Lim inn følgende kode i den nyopprettede back-to-the-top-filen:

    ```html {% comment %} Reduser verdien under hvis du ønsker at tilbake til toppen-knappen skal vises høyere på siden. Denne verdien er i piksler. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Vertikal offset fra nederst i nettleseren til knappens posisjon. {% endcomment %} {% assign position_from_bottom = '6em' %}

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

    1. Klikk på Lagre.

    Inkluder kodebiten din

    1. Åpne theme.liquid-filen i Layouter-mappen.

    2. Bla til bunnen av filen, og lim inn denne koden rett over den avsluttende </body>-taggen:

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

    Koden din skal se slik ut:

    Tilbake til toppen inkluderer kodebit
    ]

    1. Klikk på Lagre.

    Konfigurer tilbake til toppen-knappen (valgfritt)

    For å tilpasse tilbake til toppen-knappen, kan du klikke her og se på de første linjene i kodebiten.

    • Hvis du vil endre posisjonen til knappen relativt til bunnen av nettleseren, redigerer du position_from_bottom-verdien:
    {% assign position_from_bottom = '4em' %}
    • For å endre hvor langt ned en kunde må bla før knappen vises, redigerer du vertical_offset_for_trigger-verdien:
    {% assign vertical_offset_for_trigger = 300 %}

    Demobutikk

    Besøk demobutikken for å se et eksempel på denne tilpasningen.

Er du klar til å begynne å selge med Shopify?

Prøv det gratis