Sostituzione di "Aggiungi al carrello" con un link di contatto

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 utilizzi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Per maggiori informazioni, consulta la pagina Assistenza per i temi.

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 sostituire il pulsante Aggiungi al carrello con un link a un indirizzo email o con un modulo di contatto. Ad esempio, potresti voler sostituire il pulsante Aggiungi al carrello per i prodotti attualmente non in vendita o per i prodotti su ordinazione.

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.

Passaggi per i Temi con sezioni

Seleziona il tuo tema

I passaggi per questa personalizzazione variano a seconda che tu utilizzi il tema Narrative o un altro tema gratuito creato da Shopify. Prima di seguire le istruzioni riportate di seguito, clicca sul pulsante del tuo tema:

Narrative

Creazione di un nuovo modello di prodotto in Narrative

Per sostituire il pulsante Aggiungi al carrello per un prodotto, dovrai creare un modello di prodotto personalizzato per tale prodotto.

Passaggi:

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 Modelli, clicca su Aggiungi un nuovo modello.

4. Crea il modello di prodotto:

   • Dal menu a discesa seleziona Prodotto.
   • Assegna al modello il nome requires-contact.
   • Clicca su Crea modello.

5. Trova il codice seguente:

{% section 'product-template' %}

Sostituiscilo con:

{% section 'product-template-requires-contact' %}

Questo codice collega il nuovo modello a una nuova sezione del prodotto che creerai nei passaggi successivi.

1. Clicca su Salva.

Creazione di una nuova sezione di prodotto

1. Nella directory Sezioni, clicca su Aggiungi una nuova sezione.

2. Crea la sezione:

   1. Assegna alla nuova sezione il nome product-template-requires-contact.
   2. Clicca su Crea sezione.

3. Elimina tutto il codice predefinito nel file della sezione, in modo che questo sia vuoto.

4. Nella directory Sections (Sezioni), clicca su product-template.liquid. Copia tutto il contenuto del file negli appunti.

5. Torna alla nuova sezione product-template-requires-contact.liquid e incolla il codice nel file.

6. Clicca su Salva.

Annullamento della visualizzazione del pulsante "Aggiungi al carrello"

1. Nel file della sezione product-template-requires-contact.liquid, trova il codice HTML per il modulo di prodotto della pagina del prodotto cercando nel file la parola form.

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

Per Narrative il codice modificato dovrebbe avere l'aspetto seguente:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

1. Clicca su Salva.

Aggiunta di un link a un indirizzo email o di un modulo di contatto

Ora che hai nascosto il pulsante Aggiungi al carrello, puoi aggiungere il contenuto sostitutivo che desideri mostrare.

Link a un indirizzo email

Puoi aggiungere un link a un indirizzo email che porterà all'apertura del programma di posta elettronica predefinito del cliente inserendo come destinatario l'indirizzo email mostrato ai clienti del tuo negozio. Per aggiungere il link a un indirizzo email:

1. Su una nuova riga sotto il tag Liquid {% endcomment %}, aggiunto nell'ultimo passaggio, aggiungi il codice HTML per un link all'email:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Clicca su Salva.

Modulo di contatto

Puoi aggiungere un modulo di contatto al nuovo modello di prodotto copiando il codice dal modello della pagina dei contatti del tema. Per aggiungere un modulo di contatto:

1. Nella directory Modelli, clicca su page.contact.liquid.
2. Trova nel file il tag Liquid {% form 'contact' %}.
3. Copia tutto il codice del tag Liquid {% form 'contact' %} fino al tag Liquid {% endform %}. Includi i tag del modulo Liquid nel codice copiato.
4. Torna al file product.requires-contact.liquid nella directory Modelli.

Su una nuova riga sotto il tag Liquid {% endcomment %} che hai aggiunto, incolla il codice per il modulo di contatto.

1. Il passaggio successivo consiste nel racchiudere il codice appena incollato in tag div HTML. L'attributo di classe incluso nel codice del tag div garantisce che il modulo di contatto venga visualizzato correttamente sulla pagina.

Su una nuova riga sopra {% form 'contact' %} incolla il codice seguente:

<div class="form-vertical">

Su una nuova riga sotto {% endform %}, incolla il codice seguente:

</div>

1. Clicca su Salva.

Assegnazione del nuovo modello a un prodotto

Ora che il modello è terminato, puoi assegnarlo a tutti i prodotti per cui desideri nascondere il pulsante Aggiungi al carrello.

1. Dal pannello di controllo Shopify vai a Prodotti.

2. Clicca sul nome di un prodotto per cui desideri nascondere il pulsante Aggiungi al carrello.

3. Nella pagina del prodotto del pannello di controllo Shopify, in Negozio online, scegli il tuo nuovo modello requires-contact dal menu a discesa Modello del tema.

4. Clicca su Salva.

Ripeti questi passaggi per ogni prodotto a cui desideri aggiungere il nuovo modello.

Other

Creazione di un nuovo modello di prodotto

Per sostituire il pulsante Aggiungi al carrello per un prodotto, dovrai creare un modello di prodotto personalizzato per tale prodotto.

Passaggi:

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 Modelli, clicca su Aggiungi un nuovo modello.

4. Crea il modello di prodotto:

   • Dal menu a discesa seleziona Prodotto.
   • Assegna al modello il nome requires-contact.
   • Clicca su Crea modello.

5. Trova il codice seguente:

{% section 'product-template' %}

Sostituiscilo con:

{% section 'product-template-requires-contact' %}

Questo codice collega il nuovo modello a una nuova sezione del prodotto che creerai nei passaggi successivi.

1. Clicca su Salva.

Creazione di una nuova sezione di prodotto

1. Nella directory Sezioni, clicca su Aggiungi una nuova sezione.

2. Crea la sezione:

   1. Assegna alla nuova sezione il nome product-template-requires-contact.
   2. Clicca su Crea sezione.

3. Elimina tutto il codice predefinito nel file della sezione, in modo che questo sia vuoto.

4. Nella directory Sections (Sezioni), clicca su product-template.liquid. Copia tutto il contenuto del file negli appunti.

5. Torna alla nuova sezione product-template-requires-contact.liquid e incolla il codice nel file.

6. Clicca su Salva.

Annullamento della visualizzazione del pulsante "Aggiungi al carrello"

1. Nel nuovo file della sezione product-template-requires-contact.liquid trova il codice HTML per il pulsante Aggiungi al carrello della tua pagina del prodotto cercando nel file 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 del 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.

Per Debut il codice modificato dovrebbe avere il seguente aspetto:

{% 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. Clicca su Salva.

Aggiunta di un link a un indirizzo email o di un modulo di contatto

Ora che hai nascosto il pulsante Aggiungi al carrello, puoi aggiungere il contenuto sostitutivo che desideri mostrare.

Link a un indirizzo email

Puoi aggiungere un link a un indirizzo email che porterà all'apertura del programma di posta elettronica predefinito del cliente inserendo come destinatario l'indirizzo email mostrato ai clienti del tuo negozio. Per aggiungere il link a un indirizzo email:

1. Su una nuova riga sotto il tag Liquid {% endcomment %}, aggiunto nell'ultimo passaggio, aggiungi il codice HTML per un link all'email:

<p>Please <a href="mailto:{{ shop.email }}">contact us</a> if you are interested in this product.</p>

1. Clicca su Salva.

Modulo di contatto

Puoi aggiungere un modulo di contatto al nuovo modello di prodotto copiando il codice dal modello della pagina dei contatti del tema. Per aggiungere un modulo di contatto:

1. Nella directory Modelli, clicca su page.contact.liquid.
2. Trova nel file il tag Liquid {% form 'contact' %}.
3. Copia tutto il codice del tag Liquid {% form 'contact' %} fino al tag Liquid {% endform %}. Includi i tag del modulo Liquid nel codice copiato.
4. Torna al nuovo file product-template-requires-contact.liquid nella directory Sezioni.
5. Trova il tag di chiusura </form> nel file. Su una nuova riga sotto il tag di chiusura </form> incolla il codice del modulo di contatto.
6. Il passaggio successivo consiste nel racchiudere il codice appena incollato in tag div HTML. L'attributo di classe incluso nel codice del tag div garantisce che il modulo di contatto venga visualizzato correttamente sulla pagina.

Su una nuova riga sopra {% form 'contact' %} incolla il codice seguente:

<div class="form-vertical"></div>

Su una nuova riga sotto {% endform %}, incolla il codice seguente:

</div>

1. Clicca su Salva.

Assegnazione del nuovo modello a un prodotto

Ora che il modello è terminato, puoi assegnarlo a tutti i prodotti per cui desideri nascondere il pulsante Aggiungi al carrello.

1. Dal pannello di controllo Shopify vai a Prodotti.

2. Clicca sul nome di un prodotto per cui desideri nascondere il pulsante Aggiungi al carrello.

3. Nella pagina del prodotto del pannello di controllo Shopify, in Negozio online, scegli il tuo nuovo modello requires-contact dal menu a discesa Modello del tema.

4. Clicca su Salva.

Ripeti questi passaggi per ogni prodotto a cui desideri aggiungere il nuovo modello.

Passaggi per i Temi senza sezioni

Creazione di un nuovo modello di prodotto

Per sostituire il pulsante Aggiungi al carrello per un prodotto, dovrai creare un modello di prodotto personalizzato per tale prodotto.

Passaggi:

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 Modelli, clicca su Aggiungi un nuovo modello.
4. Crea il modello di prodotto:
   • Dal menu a discesa seleziona Prodotto.
   • Assegna al modello il nome requires-contact.
   • Clicca su Crea modello.

Annullamento della visualizzazione del pulsante "Aggiungi al carrello"

1. Nel nuovo file product.requires-contact.liquid trova il codice HTML per il pulsante Aggiungi al carrello cercando 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 del 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.

Per Debut il codice modificato dovrebbe avere il seguente aspetto:

{% 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. Clicca su Salva.

Aggiunta di un link a un indirizzo email o di un modulo di contatto

Ora che hai nascosto il pulsante Aggiungi al carrello, puoi aggiungere il contenuto sostitutivo che desideri mostrare.

Link a un indirizzo email

1. Su una nuova riga sotto il tag Liquid {% endcomment %}, aggiunto nell'ultimo passaggio, aggiungi il codice HTML per un link all'email:

Please <a href="mailto:{{ shop.email }}">contact us</a> if you are
interested in this product.

1. Clicca su Salva.

Modulo di contatto

Puoi aggiungere un modulo di contatto al nuovo modello di prodotto copiando il codice dal modello della pagina dei contatti del tema. Per aggiungere un modulo di contatto:

1. Nella directory Modelli, clicca su page.contact.liquid.
2. Trova nel file il tag Liquid {% form 'contact' %}.
3. Copia tutto il codice del tag Liquid {% form 'contact' %} fino al tag Liquid {% endform %}. Includi i tag del modulo Liquid nel codice copiato.
4. Torna al file product.requires-contact.liquid nella directory Modelli.
5. Trova il tag di chiusura </form> nel file. Su una nuova riga sotto il tag di chiusura </form> incolla il codice del modulo di contatto.
6. Il passaggio successivo consiste nel racchiudere il codice appena incollato in tag div HTML. L'attributo di classe incluso nel codice del tag div garantisce che il modulo di contatto venga visualizzato correttamente sulla pagina.

Su una nuova riga sopra {% form 'contact' %} incolla il codice seguente:

<div class="form-vertical"></div>

Su una nuova riga sotto {% endform %}, incolla il codice seguente:

</div>

1. Clicca su Salva.

Assegnazione del nuovo modello a un prodotto

Ora che il modello è terminato, puoi assegnarlo a tutti i prodotti per cui desideri nascondere il pulsante Aggiungi al carrello.

1. Dal tuo pannello di controllo Shopify, vai a Prodotti.
2. Clicca sul nome di un prodotto per cui desideri nascondere il pulsante Aggiungi al carrello.
3. Nella pagina del prodotto del pannello di controllo Shopify, in Negozio online, scegli il tuo nuovo modello requires-contact dal menu a discesa Modello del tema.
4. Clicca su Salva.

Ripeti questi passaggi per ogni prodotto a cui desideri aggiungere il nuovo modello.