Aggiunta di un link Continua lo shopping al carrello

Puoi aggiungere alla pagina del carrello un link Continua lo shopping che consenta ai clienti di tornare facilmente 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 home page o all'ultima pagina di collezione che stavano visualizzando.

Continua lo shopping

Per aggiungere un link Continua lo shopping alla pagina del carrello:

  1. Nella directory Sezioni, clicca su cart-template.liquid. Se il tema non contiene questo file, clicca su cart.liquid nella directory Modelli.

  2. 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 home page, 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 home page, 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> nella parte inferiore del 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.

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>

Se utilizzi 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>

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis