Aggiunta di un link Continua lo shopping al carrello

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Se usi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Scopri di più sulla Design Policy di Shopify.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

Puoi aggiungere alla pagina del carrello un link Continua lo shopping che consenta ai clienti di tornare rapidamente a sfogliare i prodotti dopo aver aggiunto un articolo al carrello. Puoi scegliere di aggiungere un link che riporti i clienti alla pagina del catalogo, alla homepage o all'ultima pagina di collezione che stavano visualizzando.

Aggiunta di un link Continua lo shopping alla pagina del carrello

Desktop

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene questo file, clicca su cart.liquid nella directory Modelli.
4. Trova il codice per il pulsante Check-out cercando nel file name="checkout". La riga di codice del pulsante di check-out varia a seconda del tema, ma avrà un aspetto simile a questo:

<button type="submit" id="checkout" name="checkout" class="btn">
   {{ 'cart.general.checkout' | t }}
</button>

 5. Il passaggio successivo è incollare una nuova riga di codice per creare un link Continua lo shopping. Il codice che incolli dipende dalla pagina a cui si desidera che il link sia indirizzato: * Per aggiungere un link che riporti alla pagina del catalogo, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

• Per aggiungere un link che riporti alla homepage, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a href="/" title="Continue shopping">Continue shopping</a>

• Per aggiungere un link che riporti all'ultima collezione visualizzata, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

 6. Clicca su Salva. Se hai aggiunto un link che riporta alla pagina del catalogo o alla homepage, l'operazione è conclusa. Se hai aggiunto un link all'ultima collezione visualizzata, dovrai aggiungere al tema una parte di codice JavaScript. Continua seguendo i passaggi successivi. Continua a seguire i prossimi passaggi.

 7. Nella directory Layout, clicca su theme.liquid.

 8. Trova il tag di chiusura </body> in fondo al file e incolla il codice seguente al di sopra del tag </body>:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

 9. Clicca su Salva.

iPhone

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
5. Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene questo file, clicca su cart.liquid nella directory Modelli.
6. Trova il codice per il pulsante Check-out cercando nel file name="checkout". La riga di codice del pulsante di check-out varia a seconda del tema, ma avrà un aspetto simile a questo:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

1. Il passaggio successivo consiste nell'incollare una nuova riga di codice per creare un link Continua lo shopping. Il codice da incollare dipenderà dalla pagina a cui riporterà il link:
   • Per aggiungere un link che riporti alla pagina del catalogo, incolla il codice seguente in una nuova riga, prima o dopo il codice per il **pulsante Check-out:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

• Per aggiungere un link che riporti alla homepage, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a href="/" title="Continue shopping">Continue shopping</a>

• Per aggiungere un link che riporti all'ultima collezione visualizzata, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

1. Clicca su Salva. Se hai aggiunto un link che riporta alla pagina del catalogo o alla homepage, l'operazione è conclusa. Se hai aggiunto un link all'ultima collezione visualizzata, dovrai aggiungere al tema una parte di codice JavaScript. Continua seguendo i passaggi successivi.
2. Nella directory Layout, clicca su theme.liquid.
3. Trova il tag di chiusura </body> in fondo al file e incolla il codice seguente al di sopra del tag </body>:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

1. Clicca su Salva.

Android

1. Nell'app di Shopify tocca il pulsante ….
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.
4. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
5. Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene questo file, clicca su cart.liquid nella directory Modelli.
6. Trova il codice per il pulsante Check-out cercando nel file name="checkout". La riga di codice del pulsante di check-out varia a seconda del tema, ma avrà un aspetto simile a questo:

<button type="submit" id="checkout" name="checkout" class="btn">
  {{ 'cart.general.checkout' | t }}
</button>

1. Il passaggio successivo consiste nell'incollare una nuova riga di codice per creare un link Continua lo shopping. Il codice da incollare dipenderà dalla pagina a cui riporterà il link:
   • Per aggiungere un link che riporti alla pagina del catalogo, incolla il codice seguente in una nuova riga, prima o dopo il codice per il **pulsante Check-out:

<a href="/collections/all" title="Continue shopping">Continue shopping</a>

• Per aggiungere un link che riporti alla homepage, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a href="/" title="Continue shopping">Continue shopping</a>

• Per aggiungere un link che riporti all'ultima collezione visualizzata, incolla il codice seguente in una nuova riga, prima o dopo il codice per il pulsante Check-out:

<a
  id="continue-shopping"
  href=""
  title="Continue shopping">
  Continue shopping
</a>

1. Clicca su Salva. Se hai aggiunto un link che riporta alla pagina del catalogo o alla homepage, l'operazione è conclusa. Se hai aggiunto un link all'ultima collezione visualizzata, dovrai aggiungere al tema una parte di codice JavaScript. Continua seguendo i passaggi successivi.
2. Nella directory Layout, clicca su theme.liquid.
3. Trova il tag di chiusura </body> in fondo al file e incolla il codice seguente al di sopra del tag </body>:

<script>
  if(Storage !== undefined) {

    var defaultLink = "/collections/all";

    {% if template contains 'collection' %}
      sessionStorage.collection = "{{ collection.url }}";
    {% endif %}

    {% if template contains 'cart' %}
      if( !sessionStorage.collection ) {
        sessionStorage.collection = defaultLink;
      }
      document.getElementById("continue-shopping").href = sessionStorage.collection;
    {% endif %}

    }
</script>

1. Clicca su Salva.

Aggiunta di uno stile del pulsante (facoltativo)

Se utilizzi un tema gratuito di Shopify, puoi applicare uno stile al link Continua lo shopping per fargli avere l'aspetto di un pulsante. Aggiungendo un attributo di classe al codice per il link pulsante, puoi fare in modo che il pulsante corrisponda allo stile degli altri pulsanti del tema. Tutti i temi gratuiti di Shopify utilizzano lo stesso nome della classe per gli stili dei pulsanti primari e la maggior parte utilizza lo stesso nome della classe per gli stili dei pulsanti secondari.

Per applicare lo stile dei pulsanti primari al link Continua lo shopping:

Aggiungi l'attributo class="btn" alla riga del codice che hai incollato per aggiungere il link Continua lo shopping. Il codice dovrebbe avere l'aspetto seguente:

<a href="/collections/all" title="Continue shopping" class="btn">
  Continue shopping
</a>

Per applicare lo stile dei pulsanti secondari al link Continua lo shopping:

Nota

L'aggiunta di questa classe non avrà effetto su Boundless.

Se usi un tema gratuito diverso da Supply, aggiungi l'attributo class="btn--secondary" alla riga del codice che hai incollato per aggiungere il link Continua lo shopping. Il codice dovrebbe avere l'aspetto seguente:

<a href="/collections/all" title="Continue shopping" class="btn--secondary">
  Continue shopping
</a>

Se usi Supply, aggiungi l'attributo class="btn-secondary" alla riga del codice che hai incollato per il link Continua lo shopping. Il codice dovrebbe avere il seguente aspetto:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">
  Continue shopping
</a>