Logo

Link in evidenza

1. documentazione di Company XYZ sul blocco logo
2. documentazione Shopify sulle sezioni e i blocchi
3. documentazione di Company XYZ sulle impostazioni del layout di navigazione
4. documentazione di Company XYZ sulle impostazioni di visibilità

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Usi questo blocco per mostrare il logo del vostro brand nell’header e controllare come appare nelle layout desktop e mobile. Se non aggiungete un’immagine, il blocco mostra invece il nome del vostro negozio, il che può essere utile per il branding basato sul testo o come fallback temporaneo. Vedere la documentazione Company XYZ sul blocco Logo.

Impostazioni di base

Aggiungete l’immagine del vostro logo, quindi regolate separatamente la sua larghezza massima per desktop e mobile. Questo vi aiuta a mantenere il logo leggibile su schermi più piccoli senza farlo dominare l’header su quelli più grandi. Per un contesto più ampio dell’editor del tema, vedere la documentazione Shopify su sezioni e blocchi

Impostare la larghezza su 0 consente al logo di estendersi su tutto lo spazio disponibile. Questa opzione funziona meglio quando il logo si trova su una riga propria o ha pochissimi contenuti concorrenti nelle vicinanze.

Se il vostro logo include testo piccolo o dettagli fini, controllate attentamente sia le dimensioni desktop sia quelle mobile. Una dimensione desktop equilibrata può comunque diventare difficile da leggere su schermi più piccoli.

Impostazioni di layout

Usate queste impostazioni per scegliere dove si trova il logo nell’header su desktop e mobile. Sinistra, centro e destra collocano il blocco all’interno della riga principale dell’header, mentre full-width lo sposta su una riga propria sotto. Vedere la documentazione Company XYZ sulle impostazioni del layout di navigazione.

Quando il logo condivide una riga con altri elementi dell’header, la sua posizione influenza l’impressione generale dell’header a colpo d’occhio. Un posizionamento centrato dà più enfasi al logo, mentre un posizionamento a sinistra o a destra di solito funziona meglio nei layout orientati alle utility.

Potete anche fare in modo che il blocco riempia lo spazio rimanente nella riga su desktop. Questo è utile soprattutto quando il logo dovrebbe contribuire ad ancorare o bilanciare l’header completo invece di comportarsi come un elemento compatto.

Consiglio

Scegliete full-width quando volete che il logo si presenti da solo come elemento di brand più forte. Scegliete sinistra, centro o destra quando deve stare accanto alla navigazione, alla ricerca o alle icone di azione.

Impostazioni standard del blocco

Impostazioni di visibilità

Usate i controlli di visibilità per mostrare o nascondere questo blocco in base al dispositivo. Questo è particolarmente utile quando volete un trattamento del logo diverso su desktop e una disposizione dell’header diversa su mobile. Vedere la documentazione Company XYZ sulle impostazioni di visibilità.

Se nascondete il blocco su un dispositivo, assicuratevi che in quel punto rimanga un altro elemento di branding visibile, così che l’header continui a risultare completo e riconoscibile.

Note sull’uso

1. Iniziate con un file logo chiaro. Usate un’immagine che resti nitida alle dimensioni che prevedete di usare nell’header.
2. Dimensionate separatamente per dispositivo. Regolate in modo indipendente le larghezze per desktop e mobile, così il logo resta leggibile senza occupare troppo spazio limitato.
3. Abbinate il posizionamento al layout. Usate full-width per una riga centrata sul logo, oppure sinistra, centro o destra quando il logo deve condividere lo spazio con altri elementi dell’header.
4. Usate lo stretch in modo intenzionale. Riempite lo spazio disponibile solo quando una larghezza extra migliora l’equilibrio dell’header invece di far sembrare l’area logo sovradimensionata.
5. Rivedete entrambi i viewport. I controlli desktop e mobile possono produrre risultati diversi di allineamento, visibilità o layout, quindi controllate sempre entrambe le dimensioni prima di pubblicare.
6. Scegliete i media con attenzione. Immagini separate per desktop e mobile possono cambiare ritaglio, caricamento, comportamento del fallback e leggibilità, soprattutto quando le due versioni non sono strettamente allineate.
7. Mantenete semplice lo stile del fallback. Valori vuoti, trasparenti o predefiniti hanno più probabilità di preservare l’aspetto esistente, mentre colori espliciti, gradienti o override dei media rendono l’area logo più indipendente.