Barra delle funzionalità

Link in evidenza

1. Documentazione Shopify sulle sezioni e i blocchi
2. Documentazione di Company XYZ sulle impostazioni dei colori
3. Documentazione di Company XYZ sul blocco delle funzionalità
4. Documentazione Shopify sulla personalizzazione delle sezioni
5. Documentazione di Company XYZ sulle impostazioni del padding della sezione
6. Documentazione di Company XYZ sulle impostazioni degli sfondi della sezione
7. Documentazione di Company XYZ sulle impostazioni dei separatori
8. Documentazione di Company XYZ sulle impostazioni di visibilità
9. Documentazione di Company XYZ sulle impostazioni delle larghezze del layout

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Usate questa sezione per evidenziare messaggi brevi e di alto valore, come vantaggi di spedizione, promesse di supporto, politiche del negozio o annunci tempestivi. Può seguire il comportamento condiviso del tema per impostazione predefinita, oppure potete aggiungere blocchi Feature per controllare completamente i contenuti mostrati qui.

Impostazioni standard della sezione

Queste impostazioni definiscono il layout complessivo e la presentazione della barra prima che personalizziate i singoli elementi.

1. Allineamento del testo controlla come il testo della funzionalità si dispone all’interno di ciascun elemento. Abbinate-lo alle sezioni vicine per mantenere coerente l’aspetto della pagina.
2. Posizione dell’icona modifica il rapporto tra icone e testo. A sinistra o a destra in genere è adatto a layout orizzontali compatti, mentre in alto o in basso funziona meglio quando ogni funzionalità ha bisogno di maggiore separazione visiva.
3. Mostra bordo icona aggiunge ulteriore enfasi attorno alle icone. Può aiutare le icone semplici a risaltare, ma può risultare troppo affollato se la sezione usa già separatori marcati o uno sfondo intenso.

Se volete che questa sezione mostri contenuti delle funzionalità personalizzati, aggiungete almeno un blocco Feature. Una volta aggiunti i blocchi, questi sostituiscono il comportamento dei contenuti condivisi predefiniti per questa sezione.

Per indicazioni più generali sul funzionamento dei blocchi nell’editor, consultate la documentazione Shopify sulle sezioni e i blocchi

Impostazioni colori

Queste impostazioni sostituiscono i colori predefiniti per questa sezione. Usatele quando la barra delle funzionalità richiede un contrasto più forte, un accento del brand o una priorità visiva diversa rispetto al layout circostante. Scoprite di più nella documentazione Company XYZ su Impostazioni colore.

Regolate i colori di icona, testo e bordo dell’icona come insieme, così la sezione risulta intenzionale. Se usate uno sfondo personalizzato, controllate con attenzione la leggibilità prima di pubblicare.

Tipi di blocco supportati

1. Feature

Blocco Feature

Usate il blocco Feature per aggiungere un’icona, un titolo, testo di supporto facoltativo e un link facoltativo. Scoprite di più nella documentazione Company XYZ sul blocco Funzionalità.

1. Icona può essere un’emoji o il nome di un’icona. Lasciatela vuota per una presentazione più semplice, incentrata sul testo.
2. Titolo e sottotitolo funzionano meglio se rimangono brevi. Un testo conciso aiuta più funzionalità a restare bilanciate in una sola riga.
3. Link è utile per destinazioni correlate come politiche, FAQ o collezioni. Aggiungete link solo quando la destinazione corrisponde chiaramente al messaggio.
4. Visibilità del blocco consente di nascondere singole funzionalità su desktop o su mobile, il che è utile quando una versione mobile più breve risulta più leggibile.

Nota

Questa sezione supporta fino a 4 blocchi Feature, quindi concentratevi sui messaggi che i clienti dovrebbero notare per primi.

Per i dettagli di configurazione dell’editor, consultate la documentazione Shopify sulla personalizzazione delle sezioni

Impostazioni standard della sezione

Impostazioni di padding

Impostazioni di padding controllano lo spazio sopra e sotto la barra delle funzionalità. Spaziatura più ridotta funziona bene per messaggi di tipo utilitario, mentre una spaziatura maggiore rende la sezione più simile a un’area di contenuto autonoma. Valori separati per desktop e mobile sono utili quando la barra appare troppo compressa su schermi più piccoli.

Impostazioni dello sfondo sezione

Impostazioni dello sfondo sezione vi consentono di aggiungere un colore, un gradiente, un’immagine o un video dietro la barra delle funzionalità. Questo è utile quando la sezione necessita di una maggiore separazione visiva o di un aspetto più promozionale. Le impostazioni di overlay aiutano a preservare la leggibilità e gli overlay con gradiente hanno la priorità rispetto ai colori di overlay pieni.

Attenzione

Gli sfondi con immagini e video possono ridurre rapidamente la chiarezza del testo in una sezione piccola come questa. Controllate sia la vista desktop sia quella mobile per assicurarvi che il testo resti facile da leggere.

Impostazioni dei separatori

Impostazioni dei separatori aggiungono una linea nella parte superiore o inferiore della sezione. Usatele quando la barra si trova tra sezioni più grandi e ha bisogno di un confine sottile senza aggiungere altro spazio. Se il colore del separatore viene lasciato trasparente, viene usato il colore del bordo condiviso.

Impostazioni di visibilità

Impostazioni di visibilità controllano se l’intera sezione appare su desktop, su mobile o su entrambi. Questo è utile quando volete un layout mobile semplificato o una disposizione diversa tra i dispositivi. Quando usate anche la visibilità a livello di blocco, verificate che almeno una funzionalità rimanga visibile dove vi serve.

Impostazioni di larghezza

Impostazioni di larghezza controllano sia la larghezza massima del contenuto sia la larghezza esterna della sezione. Larghezze del contenuto più strette possono rendere più facile scorrere rapidamente testi brevi delle funzionalità, mentre impostazioni più ampie possono aiutare la barra a sembrare più integrata con layout di pagina più estesi. Se possibile, visualizzate in anteprima le modifiche alla larghezza sulla pagina live, perché la cornice dell’editor può rendere la spaziatura fuorviante.

Note sull’uso

1. Mantenete il testo breve. Questa sezione funziona meglio per affermazioni brevi che i clienti possono capire a colpo d’occhio.
   1. I messaggi brevi sono più facili da scorrere in una barra stretta.
   2. Se un messaggio richiede più contesto, collegatevi alla destinazione completa invece di aggiungere altro testo.
2. Usate i blocchi con intenzione. Aggiungete blocchi Feature quando questa barra deve mostrare icone, testo o link specifici della sezione invece del comportamento dei contenuti condivisi.
   1. L’aggiunta di blocchi può modificare in modo significativo ciò che appare qui.
   2. Esaminate la sezione dopo aver aggiunto o rimosso blocchi per confermare che il messaggio finale risulti ancora equilibrato.
3. Controllate entrambe le dimensioni del viewport. I controlli per desktop e mobile possono influire in modo diverso su layout, allineamento, visibilità e comportamento dei media.
   1. Verificate che icone e testo risultino ancora allineati su schermi più piccoli.
   2. Assicuratevi che eventuali scelte solo mobile o solo desktop lascino comunque la barra leggibile e utile.
4. Usate con attenzione le sostituzioni di colore e media. I valori di stile predefiniti in genere mantengono lo stile di fallback, mentre colori, gradienti o media espliciti rendono la sezione più autonoma.
   1. Uno stile locale forte può migliorare l’enfasi, ma aumenta anche la necessità di verificare il contrasto.
   2. Media separati per desktop e mobile possono influire su ritaglio e leggibilità, quindi confermate entrambe le versioni prima di pubblicare.
5. Mantenete facili da leggere i messaggi in stile modulo. Se la barra viene usata per input dei clienti, convalida o messaggi di successo ed errore, lasciate contrasto e spaziatura sufficienti perché questi stati risaltino chiaramente.