Lägg till en Tillbaka till början-knapp på långa sidor

Om du har sidor som är långa och kräver mycket bläddring kan du lägga till en Tillbaka till början-knapp i ditt tema.

Tillbaka till början-exempel

Skapa ett back-to-the-top-fragment

  1. Klicka på Lägg till en ny snippet i katalogen Snippets.

  2. Döp ditt fragment till back-to-the-top och klicka sedan på Skapa fragment. Din fragmentfil öppnas i kodredigeraren.

  3. Klistra in följande kod i din nyligen skapade back-to-the-top-fil:

    ```html {% comment %} Minska värdet nedan om du vill att tillbaka till början-knappen ska visas högre upp på sidan. Värdet är i pixlar. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Vertikal kompensation från längst ner i webbläsaren för knappens placering. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Tillbaka till början {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Klicka på Spara.

    Inkludera ditt fragment

    1. Öppna filen theme.liquid i mappen Layouter.

    2. Bläddra längst ner i filen. Precis ovanför den avslutande </body>-taggen klistrar du in den här koden:

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

    Din kod ska se ut så här:

    Tillbaka till början med fragment
    ]

    1. Klicka på Spara.

    Konfigurera tillbaka till början-knappen (valfritt)

    Om du vill anpassa din tillbaka till början-knapp klickar du här och tittar på de första raderna i ditt fragment.

    • Redigera position_from_bottom-värdet för att ändra knappens placering i förhållande till den nedre delen av webbläsaren:
    {% assign position_from_bottom = '4em' %}
    • Redigera vertical_offset_for_trigger-värdet för att ändra hur långt ner en kund behöver bläddra innan knappen syns:
    {% assign vertical_offset_for_trigger = 300 %}

    Demobutik

    Besök demobutiken för att se ett exempel på denna anpassning.

Är du redo att börja sälja med Shopify?

Prova gratis