Aggiunta di un pulsante Torna in cima alle pagine lunghe

Se hai pagine lunghe che richiedono molto scorrimento, puoi aggiungere al tema un pulsante Back to the top (Torna all'inizio).

Su questa pagina

Creazione di un frammento back-to-the-top

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
Assegna al frammento il nome back-to-the-top e clicca su Crea frammento. Il file del frammento si aprirà nell'editor di codice.
Incolla il codice seguente nel file back-to-the-top appena creato:

{% 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>

Clicca su Salva.

Inclusione del frammento

Nella cartella Layout apri il file theme.liquid.
Scorri fino in fondo al file. Subito sopra il tag di chiusura </body> incolla questo codice:

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

Il codice dovrebbe avere l'aspetto seguente:

Clicca su Salva.

Configurazione del pulsante "Back to the top" (Torna all'inizio) (facoltativo)

Per personalizzare il pulsante Back to the top (Torna all'inizio), clicca qui e guarda le prime righe del frammento.

Per cambiare la posizione del pulsante in relazione alla parte inferiore del browser, modifica il valore position_from_bottom:

{% assign position_from_bottom = '4em' %}

Per cambiare la lunghezza dello scorrimento verso il basso di un cliente prima che il pulsante venga visualizzato, modifica il valore vertical_offset_for_trigger:

{% assign vertical_offset_for_trigger = 300 %}

Negozio demo

Visita il negozio demo per vedere un esempio di questa personalizzazione.