Nascondere i pulsanti Aggiungi al carrello

Attenzione

Questo è un tutorial avanzato e non è supportato da Shopify. Richiede la conoscenza di linguaggi di web design come HTML, CSS, Javascript e Liquid. Ti consigliamo di rivolgerti a un Partner di Shopify se incontri difficoltà con il tutorial seguente.

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

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 nascondere i pulsanti Aggiungi al carrello sulla vetrina virtuale e renderli visibili nuovamente in futuro.

Nota

Questa personalizzazione non è compatibile con i pulsanti di check-out dinamico. Se il tuo tema supporta il check-out dinamico, impedisci la visualizzazione dei pulsanti seguendo i passaggi per nascondere i pulsanti di check-out dinamico sulle pagine del prodotto.

Temi con sezioni e temi senza sezioni

Nota

I passaggi di questo tutorial variano a seconda che si usi un tema con sezioni o senza sezioni. Un tema con sezioni ti consente di trascinare e rilasciare le sezioni per organizzare il layout della homepage, diversamente da quanto accade con un tema senza sezioni.

Per scoprire se il tuo tema supporta le sezioni, vai alla pagina Modifica codice del tema. Se la directory Sections contiene file, stai usando un tema con sezioni. I temi senza sezioni sono stati pubblicati prima di ottobre 2016 e non hanno file nella directory Sections.

Se usi un tema con sezioni, fai clic sul pulsante Temi con sezioni e segui le istruzioni. Se usi un tema precedente senza sezioni, fai clic sul pulsante Temi senza sezioni e segui le istruzioni.

Sectioned

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 Sections (Sezioni), clicca sul file product-template.liquid per aprirlo. Trova il codice HTML per il pulsante Aggiungi al carrello. Come punto di partenza, puoi cercare la parola cart.

Il codice per il pulsante Aggiungi al carrello varia a seconda del tema. Cerca un tag <input> o <button> con testo come Add to cart, AddToCart oppure add-to-cart.

Nel tema Debut il codice per il pulsante Aggiungi al carrello ha l'aspetto seguente:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

1. Quando trovi il codice, racchiudilo in Liquid {% comment %} e nei tag {% endcomment %}. In questo modo, il codice non sarà visualizzato nel tuo negozio, ma potrai reinserirlo più facilmente nel caso volessi modificare il modello in un secondo momento.

Utilizzando l'esempio sopra riportato, il nuovo codice sarà simile a questo:

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Attenzione

: Assicurati di non commentare al di fuori dei tag <form> per la pagina del prodotto. I tag di commento non devono circondare nessun tag <form> o tag </form>, altrimenti i clienti potrebbero riscontrare errori durante la visualizzazione della pagina del prodotto.

1. Fai clic su Salva per confermare le modifiche.

Quando desideri mostrare di nuovo i pulsanti Aggiungi al carrello, torna al file product-template.liquid sulla pagina Edit HTML/CSS (Modifica l'HTML e il CSS), rimuovi i tag {% comment %} e {% endcomment %} e clicca su Salva.

Non-sectioned

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 Templates (Modelli) clicca sul file product.liquid per aprirlo. Trova il codice HTML per il pulsante Aggiungi al carrello. Come punto di partenza, puoi cercare la parola cart.

Il codice per il pulsante Aggiungi al carrello varia a seconda del tema. Cerca un tag <input> o <button> con testo come Add to cart, AddToCart oppure add-to-cart.

Nel tema Minimal, il codice per il pulsante Aggiungi al carrello ha il seguente aspetto:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>

1. Quando trovi il codice, racchiudilo in Liquid {% comment %} e nei tag {% endcomment %}. In questo modo, il codice non sarà visualizzato nel tuo negozio, ma potrai reinserirlo più facilmente nel caso volessi modificare il modello in un secondo momento.

Utilizzando l'esempio sopra riportato, il nuovo codice sarà simile a questo:

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Attenzione

: Assicurati di non commentare al di fuori dei tag <form> per la pagina del prodotto. I tag di commento non devono circondare nessun tag <form> o tag </form>, altrimenti i clienti potrebbero riscontrare errori durante la visualizzazione della pagina del prodotto.

1. Fai clic su Salva per confermare le modifiche.

Quando desideri mostrare di nuovo i pulsanti Aggiungi al carrello, torna al modello product.liquid nella pagina Edit HTML/CSS (Modifica l'HTML e il CSS), rimuovi i tag {% comment %} e {% endcomment %} e clicca su Salva.