Carrello

Link in evidenza

1. Documentazione di Company XYZ sul blocco Custom liquid
2. Documentazione di Company XYZ sulle impostazioni del padding della sezione
3. Documentazione di Company XYZ sulle impostazioni degli sfondi della sezione
4. Documentazione di Company XYZ sulle impostazioni dei separatori
5. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout
6. Documentazione Shopify su sezioni e blocchi

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Questa sezione mostra gli articoli del carrello quando i prodotti sono stati aggiunti e passa al messaggio del carrello vuoto quando il carrello è vuoto. Usatela per rifinire lo stile e il layout della pagina del carrello e per aggiungere contenuti personalizzati o supportati da app, quando supportano il percorso di acquisto.

Impostazioni colore

Questi controlli colore consentono di sostituire lo stile della pagina del carrello senza modificare i colori generali del tema. Sono particolarmente utili per migliorare il contrasto, separare più chiaramente le righe degli articoli o rendere più facili da leggere le intestazioni e le etichette di supporto.

Mantenete leggibili per primi i colori del testo e delle icone, quindi usate in modo più discreto i colori di sottotitoli e bordi per dare struttura. Di solito piccoli interventi funzionano meglio di cambi di colore drastici in una pagina orientata all’utilità come il carrello.

Se aggiungete uno sfondo personalizzato o un overlay, ricontrollate il contrasto per i dettagli degli articoli, i totali e le azioni, così il carrello resta facile da usare.

Tipi di blocco supportati

1. App
2. Custom liquid

App

I blocchi App consentono alle app installate di inserire funzionalità o messaggi all’interno della sezione carrello. Usateli per aggiunte legate al carrello, come incentivi, avvisi o altri strumenti che devono rimanere vicini al contenuto del carrello. Per il comportamento del blocco nell’editor, consultate documentazione Shopify sulle sezioni e i blocchi

Siate selettivi nel posizionamento. Troppi blocchi aggiunti possono far sembrare il carrello più lungo e distrarre dalla revisione degli articoli e dall’avanzamento.

Liquid personalizzato

Il Liquid personalizzato aggiunge contenuti personalizzati avanzati all’interno della sezione carrello.

Usatelo quando vi servono messaggi flessibili, snippet di app o altri output personalizzati non coperti dalle impostazioni predefinite del carrello. Questo blocco include anche una propria impostazione di visibilità, utile quando volete che i contenuti di supporto compaiano solo su mobile o solo su desktop.

Consiglio

Se i contenuti personalizzati sono utili ma non essenziali, considerate di nasconderli su mobile per mantenere la pagina del carrello più breve e più facile da consultare.

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto il contenuto del carrello su desktop e mobile. Usatele per rendere la pagina più ariosa oppure per ridurre lo spazio extra quando il carrello include già messaggi più lunghi o blocchi aggiunti.

Un padding separato per mobile è particolarmente utile perché le pagine del carrello possono diventare lunghe molto rapidamente. Ridurre lo spazio verticale sugli schermi più piccoli può rendere la pagina più efficiente senza modificare la presentazione su desktop.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione consentono di aggiungere un colore di sfondo, un gradiente, un’immagine, un video e un overlay alla sezione carrello. Queste impostazioni sono più adatte quando volete che la pagina del carrello risulti più coerente con il brand, mantenendo leggibile il contenuto.

Le scelte di gradiente sostituiscono le scelte di colore pieno e i gradienti dell’overlay sostituiscono i colori dell’overlay. Potete anche impostare un supporto di sfondo separato per mobile, utile quando le immagini desktop si ritagliano male sugli schermi più piccoli.

Attenzione

Immagini o movimenti molto forti dietro i dettagli del carrello possono ridurre la leggibilità. Usate overlay e controlli del contrasto per mantenere il carrello prima di tutto funzionale.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea opzionale nella parte superiore o inferiore della sezione carrello. Sono utili quando il carrello ha bisogno di un confine visivo più chiaro rispetto ai contenuti vicini.

Se lasciate trasparente il colore del separatore, la sezione torna al colore del bordo del tema. Spesso è il modo più semplice per mantenere il carrello coerente con il resto del design.

Impostazioni di larghezza

Impostazioni di larghezza controllano sia la larghezza massima del contenuto del carrello sia la larghezza del wrapper della sezione. Questo vi consente di mantenere il carrello compatto e facile da leggere, oppure di renderlo più spazioso quando è abbinato a uno stile di pagina più ampio.

Per la maggior parte degli store, una larghezza moderata del contenuto mantiene comodi da consultare articoli, prezzi e controlli. La larghezza del wrapper conta soprattutto quando usate uno sfondo, perché modifica fino a dove si estende quel trattamento visivo sulla pagina.

Nota

Le modifiche alla larghezza possono apparire diverse nell’editor rispetto alla pagina live, quindi visualizzate in anteprima il frontend reale prima di finalizzare le decisioni di layout.

Note sull’uso

1. Mantenete il carrello facile da consultare. Date priorità a un contrasto chiaro per testo, icone e bordi, così i dettagli e i totali degli articoli restano leggibili a colpo d’occhio.
2. Usate i blocchi extra con parsimonia. Aggiungete contenuti app o personalizzati solo quando supportano il percorso del carrello invece di competere con le azioni principali del carrello.
3. Regolate separatamente il mobile. Verificate padding, visibilità e supporti di sfondo su mobile, così il carrello non diventa troppo lungo o visivamente affollato.
4. Scegliete la larghezza con attenzione. Una larghezza del contenuto equilibrata di solito funziona meglio di un carrello troppo stretto o di uno che estende troppo i dettagli sulla pagina.
5. Controllate entrambi gli stati del carrello. Visualizzate in anteprima la sezione con articoli nel carrello e con il carrello vuoto, così stile e spaziatura risultano rifiniti in entrambe le situazioni.
6. Rivedete il comportamento su desktop e mobile. Confrontate entrambe le viewport per allineamento, visibilità e ritaglio dei media, soprattutto se usate sfondi diversi o nascondete contenuti su una dimensione dello schermo.
7. Mantenete leggibile il feedback dei moduli. Assicuratevi che le modifiche di quantità, i messaggi di convalida e gli stati vuoto o di successo restino facili da leggere quando i clienti interagiscono con i controlli del carrello.
8. Considerate il contesto del prodotto. Ricontrollate il carrello dopo aver modificato varianti, quantità o disponibilità, così le azioni visualizzate e i dettagli degli articoli continuano ad avere senso.