Utilizzo delle icone

Link in evidenza

1. Documentazione Shopify su sezioni e blocchi
2. Material Symbols
3. Documentazione Company XYZ sulle impostazioni dei colori

Video utili

Video Shopify Academy: personalizzare il tuo negozio

Video Shopify Academy: personalizzare il tuo negozio

Molte aree di contenuto di Align includono un campo per le icone che aggiunge un riferimento visivo accanto al testo o all’interno di un pulsante. Nell’editor del tema Shopify, puoi utilizzare questi campi per intestazioni, contenuti del corpo, elementi in evidenza, inviti all’azione e aree simili.

Per una panoramica di dove possono comparire le impostazioni di sezioni e blocchi in Shopify, consulta la documentazione Shopify su sezioni e blocchi

Ogni campo per le icone di Align accetta un solo valore: uno slug di un’icona Material o un’emoji. Lascia vuoto il campo per una presentazione con solo testo.

Trovare e utilizzare uno slug di icona

Gli slug delle icone Material sono una scelta affidabile quando desideri uno stile a contorno coerente in tutta la vetrina Align. Utilizza la libreria Material Symbols per trovare le icone disponibili.

1. Apri Material Symbols
2. Cerca il simbolo che ti serve.
3. Seleziona un’icona dai risultati.
4. Copia il relativo slug in minuscolo, ad esempio local_shipping, verified o chevron_right.
5. Incolla lo slug nella relativa impostazione dell’icona di Align.

Gli spazi e i trattini vengono trattati come caratteri di sottolineatura e la distinzione tra maiuscole e minuscole non è rilevante. Copiare direttamente lo slug da Material Symbols resta comunque l’approccio più affidabile.

Consiglio

Sfoglia o filtra tenendo presente lo stile Outlined. Corrisponde all’aspetto predefinito delle icone di Align.

Se uno slug contiene un errore di ortografia o non è disponibile, l’icona potrebbe non essere visualizzata come previsto.

Utilizzare invece un’emoji

Puoi anche incollare una singola emoji in qualsiasi campo per le icone di Align compatibile. Questa soluzione funziona per le icone dei contenuti, le icone dei pulsanti, i separatori dei breadcrumb e altre impostazioni specializzate delle icone.

Aggiungere un’emoji

1. Incolla un’emoji nel campo, ad esempio 📦, ✓ o ⭐.
2. Non inserire una frase o più simboli.
3. Lascia vuoto il campo se non ti serve un’icona.

Scegliere lo stile adatto

Le emoji funzionano bene per messaggi amichevoli, informali o legati a una campagna. Possono inoltre aggiungere personalità a una semplice riga dedicata alla fiducia o a un vantaggio.

Le emoji utilizzano il loro stile cromatico nativo invece dello stile a contorno delle icone Material. Le impostazioni locali di Icon color possono avere un effetto minore sulle emoji, quindi utilizzale con attenzione insieme alle icone denominate nella stessa pagina.

Consiglio

Gli slug Material sono solitamente la scelta predefinita migliore per una vetrina curata e coerente. Scegli le emoji quando un accento più caldo o espressivo si adatta meglio al messaggio.

Icone dei contenuti e icone dei pulsanti

Le impostazioni delle icone svolgono generalmente uno di due ruoli. Entrambe utilizzano lo stesso formato di inserimento, ma influenzano parti diverse del layout.

Icone dei contenuti

• Compaiono accanto o intorno a un’intestazione, una didascalia o una riga con un vantaggio.
• Supportano il messaggio senza fungere da azione principale.
• Nell’editor sono generalmente denominate Icon.

Icone dei pulsanti

• Compaiono all’interno di un pulsante o di un’azione in stile link.
• Rafforzano l’etichetta del pulsante o, nei layout con solo icone, diventano l’azione visibile.
• Nell’editor sono generalmente denominate Button icon.

Quando possibile, abbina le icone dei pulsanti al testo. Un’icona dovrebbe rafforzare ciò che accade dopo, non essere l’unico indizio.

Posizionare chiaramente le icone

Alcune aree di contenuto includono Icon position, che controlla la posizione dell’icona rispetto al testo vicino.

1. Top posiziona l’icona sopra il blocco di testo ed è adatto a layout centrati o editoriali.
2. Bottom posiziona l’icona sotto il blocco di testo, permettendo al testo di avere la precedenza.
3. Left posiziona l’icona prima del testo in un layout orizzontale.
4. Right posiziona l’icona dopo il testo, in modo che i lettori incontrino prima il testo.
5. Middle centra l’icona come principale punto focale visivo.

I layout affiancati possono disporsi verticalmente sugli schermi più piccoli. Controlla la visualizzazione mobile quando utilizzi il posizionamento a sinistra, a destra o al centro.

Impostare il layout dell’icona del pulsante

Quando un pulsante supporta un’icona, Button layout controlla come vengono visualizzati insieme l’icona e l’etichetta.

1. Icon left posiziona l’icona prima del testo del pulsante ed è il modello con etichetta più familiare.
2. Icon right posiziona l’icona dopo il testo del pulsante ed è adatto alle azioni che indicano un avanzamento.
3. Icon only visualizza un’icona senza un’etichetta visibile.

Attenzione

I pulsanti con sole icone possono essere facilmente fraintesi. Utilizzali con moderazione e solo quando il layout circostante rende l’azione inequivocabile.

Regolare colore e stile

Per impostazione predefinita, le icone ereditano il colore delle icone di Align e si adattano alle dimensioni del contenitore. Alcune aree offrono anche controlli locali per un contrasto più marcato o un accento coordinato al brand.

1. Icon color modifica il colore dell’icona.
2. Icon border color è disponibile quando un’icona si trova all’interno di una forma con bordo.
3. Show icon border è disponibile in alcuni layout in stile elemento in evidenza per creare un contorno simile a un badge.

Per indicazioni più generali sulle sostituzioni locali dei colori, consulta le Impostazioni dei colori.

Utilizzare i campi specializzati per le icone

La maggior parte dei campi per le icone di Align segue le stesse regole, anche quando le relative etichette descrivono un ruolo di layout specifico. Incolla uno slug Material o un’emoji, oppure lascia vuoto il campo per nascondere l’icona.

1. Separator icon viene visualizzata tra gli elementi breadcrumb, ad esempio come chevron o simbolo in stile barra.
2. Home icon visualizza il collegamento alla home nei percorsi breadcrumb.
3. Announcement icon aggiunge un piccolo accento accanto al messaggio della barra degli annunci.
4. Heading icon aggiunge un accento in linea allo stile dell’intestazione.
5. Draggable icon imposta il simbolo in stile maniglia utilizzato con determinati controlli interattivi.
6. Contact or feature icons aggiunge accenti singoli ai blocchi di contenuto, ad esempio ai dettagli dell’email o agli elementi in evidenza.

Si tratta di slug Material o emoji scelti dal merchant, non di icone di sistema automatiche.

Riconoscere altri tipi di icone

I campi per le icone a inserimento libero non controllano tutti gli elementi simili alle icone in Align.

1. Social media icons utilizza gli URL dei profili social configurati nelle impostazioni del tema.
2. Payment icons visualizza automaticamente i metodi di pagamento abilitati.
3. Navigation utility icons, incluse quelle del carrello, dell’account, della ricerca e del menu, sono integrate nell’header.

Scenari di esempio

Elemento in evidenza per la spedizione

1. Cerca local_shipping in Material Symbols.
2. Copia lo slug e incollalo in un campo Icon accanto a un breve messaggio sulla spedizione gratuita.
3. In alternativa, utilizza 📦 per un accento più caldo e informale.

Separatore breadcrumb

1. Imposta Separator icon su chevron_right per un divisore compatto a contorno tra gli elementi breadcrumb.
2. In alternativa, utilizza › o → per un separatore più semplice, simile al testo.

Note sull’uso

1. Scegli intenzionalmente uno stile. Utilizza gli slug Material per la coerenza e le emoji quando il colore nativo o un tono più espressivo si adattano al messaggio.
2. Copia gli slug dalla libreria. Cerca in Material Symbols e incolla lo slug invece di indovinare il nome di un’icona.
3. Nascondi intenzionalmente le icone. Lascia vuoto un campo quando un simbolo non aggiunge significato.
4. Mantieni coerenti i contenuti correlati. Riutilizza slug a contorno o emoji in una pagina, così la presentazione risulta coordinata.
5. Controlla il contrasto e i layout mobili. Esamina le icone su sfondi chiari e scuri, soprattutto con colori personalizzati o contenuti multimediali di sfondo, e verifica che il posizionamento funzioni ancora sugli schermi più piccoli.