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).

Esempio Torna in cima

Creazione di un frammento back-to-the-top

  1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

  2. Assegna al frammento il nome back-to-the-top e clicca su Crea frammento. Il file del frammento si aprirà nell'editor di codice.

  3. Incolla il codice seguente nel file back-to-the-top appena creato:

    ```html {% comment %} Se desideri che il pulsante Back to the top (Torna all'inizio) sia visualizzato più in alto sulla pagina, riduci il valore sottostante, indicato in pixel. {% endcomment %} {% assign vertical_offset_for_trigger = 300 %}

    {% comment %} Offset verticale per la posizione del pulsante dalla parte inferiore del browser. {% endcomment %} {% assign position_from_bottom = '6em' %}

    Back to the top (Torna all'inizio) {{ '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' | stylesheet_tag }}```

    1. Clicca su Salva.

    Inclusione del frammento

    1. Nella cartella Layout apri il file theme.liquid.

    2. 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:

    Frammento di inclusione Torna in cima
    ]

    1. 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.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis