Schaltfläche "Zurück nach oben" auf langen Seiten hinzufügen

Wenn du Seiten hast, die lang sind und viel Scrollen erfordern, kannst du deinem Theme die Schaltfläche Zurück nach oben hinzufügen.

Beispiel für

Snippet back-to-the-top erstellen

  1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

  2. Benenne dein Snippet back-to-the-top und klicke auf Snippet erstellen. Die Snippet-Datei wird im Code-Editor geöffnet.

  3. Füge den folgenden Code in die neu erstellte Datei back-to-the-top ein:

    ```html {% comment %} Reduziere bei Bedarf den unten angegebenen Wert, wenn die Schaltfläche "Zurück nach oben" weiter oben auf der Seite angezeigt werden soll. Der Wert wird in Pixel angegeben. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Vertikaler Offset basierend auf dem unteren Browser-Rand für die Position der Schaltfläche. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Zurück nach oben {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Klicke auf Speichern.

    Snippet einschließen

    1. Öffne im Verzeichnis Layout die Datei theme.liquid.

    2. Scrolle zum Ende der Datei. Füge direkt über dem abschließenden Tag </body> diesen Code ein:

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

    Dein Code sollte so aussehen:

    Einschließendes Snippet für
    ]

    1. Klicke auf Speichern.

    Schaltfläche "Zurück nach oben" konfigurieren (optional)

    Um die Schaltfläche "Zurück nach oben" anzupassen, klicke hier und schau dir die ersten Zeilen des Snippets an.

    • Um die Position der Schaltfläche basierend auf dem unteren Rand des Browsers zu ändern, bearbeite den Wert position_from_bottom:
    {% assign position_from_bottom = '4em' %}
    • Um zu ändern, wie weit nach unten ein Kunde scrollen muss, bevor die Schaltfläche angezeigt wird, bearbeite den Wert vertical_offset_for_trigger:
    {% assign vertical_offset_for_trigger = 300 %}

    Demo-Shop

    Öffne den Demo-Shop, um ein Beispiel für diese Anpassung anzuzeigen.

Bereit, mit Shopify zu verkaufen?

Kostenlos ausprobieren