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

Den här sidan skrevs ut den Jun 09, 2023. Besök https://help.shopify.com/sv/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-back-to-top för den aktuella versionen.

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

På den här sidan

Skapa ett back-to-the-top-fragment

  1. Från din Shopify-admin går du till Webbshop > Teman.

  2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

  4. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  1. Från Shopify-appen klickar du på Butik.

  2. Tryck på Webbshop i avsnittet Försäljningskanaler.

  3. Tryck på Hantera teman.

  4. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

  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:

{% 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 > coords) {
        goTopBtn.classList.remove('hide');
        }
        if (scrolled < coords) {
        goTopBtn.classList.add('hide');
        }
    }

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

    var goTopBtn = document.querySelector('.back-to-top');

    window.addEventListener('scroll', trackScroll);
    goTopBtn.addEventListener('click', backToTop);
    })();
</script>
  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