Breadcrumbs

Link in evidenza

1. Documentazione di Company XYZ sul blocco Breadcrumbs
2. Documentazione di Company XYZ sulle icone
3. Documentazione di Company XYZ sul blocco breadcrumb
4. Documentazione di Company XYZ sulle impostazioni dei colori
5. Documentazione di Company XYZ sulle impostazioni di visibilità
6. documentazione Shopify sulle sezioni e i blocchi
7. documentazione Shopify sull’editor del tema

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi questo blocco per visualizzare un percorso breadcrumb nella parte superiore di una pagina, così i clienti possono capire rapidamente dove si trovano e tornare a pagine più generali. Funziona meglio nelle pagine con percorsi di navigazione più profondi, dove un ulteriore livello di orientamento aiuta le persone a navigare con meno attrito.

Può personalizzare l’icona della home, scegliere uno stile del separatore e, facoltativamente, aggiungere un link padre fisso. Per un riferimento generale, veda Breadcrumbs. Per sapere come i blocchi sono organizzati nell’editor, veda documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

Le impostazioni principali controllano lo stile visivo del percorso breadcrumb stesso.

Usi il campo Home icon per sostituire l’icona con un’altra, se il suo negozio usa un set di icone coerente o un aspetto più minimale. La Separator icon può usare un’emoji o un nome di icona supportato, e può lasciarla vuota se desidera che gli elementi breadcrumb appaiano senza divisori visibili. Per aiuto sui nomi delle icone, veda Icons.

Consiglio

Le icone semplici e familiari sono solitamente più facili da individuare rispetto a quelle decorative.

Link padre

Questo gruppo aggiunge un link padre statico al percorso breadcrumb. È utile quando desidera guidare i clienti verso una pagina di destinazione specifica, un hub di collezioni o una destinazione curata che conta nel flusso di navigazione.

Aggiunga sia il testo sia il link, così il passaggio padre risulta naturale nel percorso. Aprire il link padre in una nuova scheda è disponibile, ma i breadcrumb risultano di solito più naturali quando mantengono i clienti nello stesso percorso di navigazione. Per maggior contesto, veda Link padre.

Aggiunga un link padre statico solo quando corrisponde al percorso della pagina che i clienti si aspettano. Se sembra fuori sequenza, può rendere il breadcrumb meno affidabile.

Impostazioni di allineamento

Queste impostazioni consentono di controllare l’allineamento orizzontale separatamente su desktop e mobile. È utile quando il percorso breadcrumb deve allinearsi con un header di pagina centrato su una dimensione del dispositivo e con una colonna di contenuto allineata a sinistra su un’altra.

Se il suo percorso breadcrumb diventa lungo, testi con attenzione il layout mobile. L’allineamento a sinistra è spesso più facile da leggere quando il percorso va a capo su più righe.

Nota

I controlli per desktop e mobile possono comportarsi in modo diverso nei layout stretti, quindi riveda entrambe le dimensioni del viewport dopo aver regolato l’allineamento o la visibilità.

Impostazioni standard del blocco

Impostazioni di colore

Queste impostazioni sostituiscono le scelte di colore più ampie del tema per questo blocco. Le usi quando il breadcrumb si trova su uno sfondo colorato, basato su immagini o comunque non standard e richiede un contrasto migliore. Per il comportamento condiviso dei colori, veda Impostazioni colore.

Attenzione

Si assicuri che sia il testo sia le icone rimangano facili da leggere rispetto allo sfondo, soprattutto se usa colori personalizzati più chiari.

Impostazioni di visibilità

Usi queste impostazioni per nascondere il blocco su desktop o mobile. È utile quando desidera un header mobile più pulito o quando i breadcrumb sono utili solo in un contesto di layout. Per il comportamento condiviso della visibilità, veda Impostazioni di visibilità.

Impostazioni dell’editor

Queste impostazioni influiscono su come il blocco viene etichettato nella barra laterale dell’editor. Un titolo dell’editor chiaro può rendere questo blocco più facile da trovare quando gestisce diversi blocchi relativi alla navigazione o all’header. Per l’interfaccia dell’editor, veda documentazione Shopify sull’editor del tema

Note sull’uso

1. Lo posizioni in alto nella pagina. I breadcrumb sono più utili quando compaiono prima del contenuto principale, dove i clienti si aspettano strumenti di orientamento.
2. Mantenga il percorso intuitivo. Usi il link padre solo quando supporta la gerarchia della pagina che i clienti probabilmente si aspettano.
3. Scelga icone sobrie. Icone della home e del separatore discrete aiutano il breadcrumb a rimanere leggibile senza competere con il titolo della pagina.
4. Controlli gli schermi più piccoli. Riveda i percorsi breadcrumb lunghi su mobile per assicurarsi che l’andata a capo e l’allineamento risultino ancora puliti.
5. Usi con attenzione le sostituzioni di colore. I colori personalizzati di icone e testo dovrebbero migliorare il contrasto, non solo abbinarsi agli accenti grafici vicini.