Carrello

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione Shopify sull’editor del tema
3. Documentazione Company XYZ sulle impostazioni del layout della navigazione
4. Documentazione Company XYZ sulle impostazioni dei colori
5. Documentazione Company XYZ sulle impostazioni di visibilità

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usa questo blocco per aggiungere un’icona del carrello alla navigazione principale e posizionarla per il layout dell’header. Per una panoramica più ampia sul funzionamento dei blocchi del tema, consulta la documentazione Shopify sulle sezioni e i blocchi. Funziona bene per header semplici, design con navigazione divisa e configurazioni mobile personalizzate in cui il carrello necessita di un posizionamento diverso su schermi di dimensioni differenti.

Impostazioni di allineamento

Queste impostazioni controllano come il blocco del carrello si colloca nello spazio assegnato. Sono più evidenti quando il blocco viene esteso su spazio extra o spostato in una propria riga a tutta larghezza.

Se le modifiche all’allineamento sembrano sottili, controlla prima le impostazioni di layout. Un posizionamento compatto a sinistra, al centro o a destra lascia meno spazio per cambiamenti visibili dell’allineamento.

Impostazioni di layout

Usa queste impostazioni per decidere dove appare il blocco del carrello su desktop e mobile. Sinistra, centro e destra lo mantengono nella riga di navigazione principale, mentre Full-width lo sposta in una riga separata sotto.

Fill available space estende il blocco sulla larghezza rimanente della riga desktop. È utile quando vuoi che l’area del carrello contribuisca a bilanciare lo spazio dell’header, ma rende anche più importanti le impostazioni di allineamento perché l’icona si troverà all’interno di un’area più ampia.

Quando vuoi strutture dell’header diverse in base al dispositivo, imposta separatamente i layout per desktop e mobile nella documentazione Shopify sull’editor del tema. Per esempio, puoi mantenere il carrello ordinatamente raggruppato nella riga principale su desktop e dargli una riga propria su mobile. Usa il riferimento Impostazioni di layout della navigazione per ulteriori dettagli sul posizionamento.

Scegli il layout prima di perfezionare l’allineamento. Il posizionamento ha l’effetto maggiore su come il blocco del carrello si presenta nell’header.

Impostazioni standard del blocco

Impostazioni colore

Queste impostazioni sostituiscono i colori del tema più ampi per questo blocco, consentendoti di stilizzare in modo indipendente l’icona del carrello e il testo correlato. Questo è utile quando il carrello necessita di maggiore enfasi o quando il tuo header utilizza un trattamento di colore personalizzato.

Mantieni il carrello facile da individuare senza farlo sembrare scollegato dal resto dell’header. Controlla attentamente il contrasto se usi colori diversi per l’icona e il testo. Consulta il riferimento Impostazioni di colore per ulteriori dettagli.

Impostazioni di visibilità

Usa i controlli di visibilità per mostrare il blocco del carrello solo su desktop o solo su mobile. Questo è utile per header responsive personalizzati, soprattutto se un altro punto di accesso al carrello è già presente su una dimensione di dispositivo.

Prima di nascondere il blocco su qualsiasi dispositivo, assicurati che i clienti abbiano comunque un modo chiaro e prevedibile per raggiungere il carrello. Consulta il riferimento Impostazioni di visibilità per ulteriori dettagli.

Note sull’uso

1. Imposta prima il layout. Scegli il posizionamento per desktop e mobile prima di regolare allineamento o colori.
2. Usa Full-width in modo intenzionale. Sposta il blocco nella propria riga solo quando l’header trae vantaggio da un layout più a strati o più spazioso.
3. Estendi con attenzione. Attiva Fill available space quando vuoi che il blocco del carrello contribuisca a bilanciare lo spazio dell’header su desktop.
4. Conserva l’accesso al carrello. Se nascondi questo blocco su una dimensione di dispositivo, assicurati che lì sia chiaramente disponibile un altro link o un’altra icona del carrello.
5. Controlla il contrasto dell’header. Verifica i colori personalizzati rispetto allo sfondo dell’header in modo che il carrello resti facile da individuare.
6. Rivedi entrambi i viewport. Desktop e mobile possono comportarsi in modo diverso, quindi conferma posizionamento, visibilità e spaziatura su ogni dimensione dello schermo.
7. Tieni presente lo stile di fallback. Le scelte predefinite o dall’aspetto trasparente di solito si integrano con l’header, mentre i colori espliciti fanno sembrare il carrello più indipendente dagli elementi vicini.