Einloggen
Kostenlosen Test starten

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

Auf dieser Seite

Snippet back-to-the-top erstellen

Desktop
  1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
  2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
  3. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
  4. Benenne dein Snippet back-to-the-top und klicke auf Snippet erstellen. Die Snippet-Datei wird im Code-Editor geöffnet.
  5. Füge den folgenden Code in die neu erstellte Datei back-to-the-top ein:
{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}


{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}


<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};


if (scrolled &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

function backToTop() {
    if (window.pageYOffset &#x3E; 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, backToTop);
})();
</script>
  1. Klicke auf Speichern.
iPhone
  1. Tippe in der Shopify-App auf die Schaltfläche ....
  2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
  3. Tippe auf Themes verwalten.
  4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
  5. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
  6. Benenne dein Snippet back-to-the-top und klicke auf Snippet erstellen. Die Snippet-Datei wird im Code-Editor geöffnet.
  7. Füge den folgenden Code in die neu erstellte Datei back-to-the-top ein:
{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}


{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}


<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};


if (scrolled &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

function backToTop() {
    if (window.pageYOffset &#x3E; 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, backToTop);
})();
</script>
  1. Klicke auf Speichern.
Android
  1. Tippe in der Shopify-App auf die Schaltfläche ....
  2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
  3. Tippe auf Themes verwalten.
  4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
  5. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
  6. Benenne dein Snippet back-to-the-top und klicke auf Snippet erstellen. Die Snippet-Datei wird im Code-Editor geöffnet.
  7. Füge den folgenden Code in die neu erstellte Datei back-to-the-top ein:
{% comment %}
  Reduce below value if you need the back to the top button to appear higher up on the page.
  That value is in pixels.
{% endcomment %}
{% assign vertical_offset_for_trigger = 300 %}


{% comment %}
  Vertical offset from bottom of browser for the position of the button.
{% endcomment %}
{% assign position_from_bottom = '6em' %}


<a id="BackToTop" href="#" title="Back to the top" class="back-to-top hide">
  <span>Back to the top</span> <i class="fa fa-arrow-circle-o-up fa-2x"></i>
</a>
{{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}
<style>
  .back-to-top {
    position: fixed;
    bottom: {{ position_from_bottom }};
    right: 0px;
    text-decoration: none;
    color: #999;
    background-color: #eee;
    font-size: 16px;
    padding: 0.3em;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    z-index: 60000;
  }
  .back-to-top i {
    vertical-align: middle;
  }
  .back-to-top span {
    padding-left: 0.5em;
  }
  .back-to-top i + span {
    padding-left: 0;
  }
  .back-to-top:hover {
    text-decoration: none;
    color: #555;
  }
  .hide {
    display: none!important;
  }
</style>
<script>
    (function() {
    function trackScroll() {
        var scrolled = window.pageYOffset;
        var coords = {{ vertical_offset_for_trigger }};


if (scrolled &#x3E; coords) {
    goTopBtn.classList.remove(&#x27;hide&#x27;);
    }
    if (scrolled &#x3C; coords) {
    goTopBtn.classList.add(&#x27;hide&#x27;);
    }
}

function backToTop() {
    if (window.pageYOffset &#x3E; 0) {
    window.scrollBy(0, -80);
    setTimeout(backToTop, 0);
    }
}

var goTopBtn = document.querySelector(&#x27;.back-to-top&#x27;);

window.addEventListener(&#x27;scroll&#x27;, trackScroll);
goTopBtn.addEventListener(&#x27;click&#x27;, backToTop);
})();
</script>
  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 folgendermaßen 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.

Du hast die gesuchten Antworten nicht gefunden? Wir helfen dir gerne weiter.