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

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

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:

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

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

  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.

Non trovi le risposte che stai cercando? Siamo qui per aiutarti.