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).
Creazione di un frammento back-to-the-top
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
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.
Nell'app Shopify tocca Negozio.
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-tope clicca su Crea frammento. Il file del frammento si aprirà nell'editor di codice.Incolla il codice seguente nel file
back-to-the-topappena 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' %}Your code should look like this:
]- 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.