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' %}
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci 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' %}
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci 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' %}
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.
Non trovi le risposte che stai cercando? Siamo qui per aiutarti.
