Salta ai contenuti

Pulsanti di acquisto

Personalizzi l'area di acquisto del prodotto con opzioni di checkout, dettagli di acquisto e comportamento sticky della barra di acquisto.

Usi questo blocco per controllare le principali azioni di acquisto in una pagina prodotto. Per una panoramica più ampia su come è organizzato il contenuto del tema, veda la documentazione Shopify sulle sezioni e i blocchi. Insieme al pulsante di aggiunta al carrello, può mostrare opzioni di checkout più rapide, dettagli di evasione, messaggi di pagamento e una barra di acquisto sticky che mantiene visibili le azioni chiave mentre gli acquirenti scorrono la pagina.

Queste impostazioni definiscono quanta assistenza all’acquisto appare attorno al pulsante principale. Una configurazione essenziale funziona bene quando i prodotti sono semplici e facili da valutare, mentre una configurazione più dettagliata può ridurre le esitazioni per i prodotti che richiedono più contesto.

L’icona del pulsante è un piccolo miglioramento visivo per l’azione principale. Può aiutare il pulsante di aggiunta al carrello a risaltare, soprattutto quando il modulo prodotto include vicino diversi controlli.

I pulsanti di checkout aggiuntivi sono utili quando desidera abbreviare il percorso di acquisto per i clienti pronti a comprare. Se la pagina ha già molti elementi attorno al modulo prodotto, disattivarli può mantenere l’attenzione sull’azione principale di aggiunta al carrello.

Le informazioni sulla spedizione gratuita, le opzioni di ritiro locale e le icone di pagamento aiutano a rispondere alle domande più comuni prima dell’acquisto vicino al pulsante. Le usi quando aggiungono chiarezza, ma eviti di sovrapporre troppi elementi di supporto se l’area di acquisto inizia a sembrare affollata.

La barra sticky durante lo scorrimento è più utile nelle pagine prodotto più lunghe. Mantiene le azioni di acquisto a portata di mano quando gli acquirenti superano l’area di acquisto iniziale per leggere i dettagli, sfogliare i media o confrontare le informazioni.

L’opzione per il destinatario della gift card si applica solo ai prodotti gift card. Quando è abilitata, aggiunge l’opzione di inviare la gift card via email a un’altra persona.

Mantenga questo blocco focalizzato sul processo decisionale e sulle azioni di acquisto. Abilitare tutte le opzioni disponibili può rendere l’area di acquisto più affollata e ridurre la prominenza del pulsante principale.

Le informazioni a rate sono più utili per i prodotti a prezzo più elevato, dove la flessibilità di pagamento può aumentare la fiducia. Se questo messaggio non è pertinente al suo catalogo o alla sua configurazione, lasciarlo disattivato può mantenere il blocco più pulito.

Questo blocco usa lo stile del pulsante principale del tema, a meno che non lo sostituisca qui. Usi i controlli colore quando il pulsante di acquisto necessita di un contrasto più forte, di un migliore allineamento visivo con il layout circostante o di uno stato hover personalizzato per questa specifica area prodotto.

Mantenga gli stati predefinito e hover visivamente collegati, così il pulsante continua a sembrare un’unica azione coerente. Controlli con attenzione le combinazioni di testo, bordo e sfondo per mantenere leggibilità e risalto.

Usi i controlli di visibilità per mostrare o nascondere questo blocco su desktop o su mobile. Questo è utile quando sta creando layout diversi della pagina prodotto per schermi più piccoli e più grandi.

Se nasconde il blocco su una dimensione del dispositivo, si assicuri che il percorso di acquisto compaia comunque chiaramente nell’altro punto di quel layout.

  1. Mantenga semplice l’area di acquisto. Mostri i dettagli di supporto che aiutano i clienti a decidere e rimuova quelli che aggiungono rumore.
  2. Usi lo sticky buy nelle pagine lunghe. Abiliti la barra sticky quando è probabile che gli acquirenti scorrano ben oltre il modulo prodotto principale.
  3. Abbini le funzionalità al tipo di prodotto. Le opzioni per il destinatario della gift card sono adatte ai prodotti gift card, mentre i messaggi a rate sono più utili per gli articoli di prezzo più elevato.
  4. Controlli il contrasto del pulsante. Se sostituisce i colori, si assicuri che il pulsante rimanga facile da vedere e da leggere sia nello stato predefinito sia in quello hover.
  5. Pianifichi separatamente mobile e desktop. Verifichi entrambe le dimensioni del viewport quando usa i controlli di visibilità, perché l’area di acquisto può presentarsi in modo diverso nei vari layout.
  6. Mantenga leggibili gli stati del modulo. Se l’area di acquisto include input del cliente, si assicuri che gli stati vuoto, di convalida e inviato rimangano facili da consultare, soprattutto quando vengono mostrate più opzioni di acquisto.