Inchieste e ricerca su Shopify e l’e-commerce
Dawn v16.0.0 chiede al browser 9 larghezze di immagine da 375 a 3840px, e una scala diversa fino a 7680px quando usi due immagini. Queste sono tutte le impostazioni della sezione Image banner, tutti i valori predefiniti e le altezze esatte in pixel, lette dal codice del tema stesso.
La documentazione di Shopify sulla sezione Image banner si ferma a “aggiungi un’immagine e del testo”. Non ti dice che dimensione dovrebbe avere quell’immagine, quanto alto risulterà il banner, o cosa cambi davvero ogni singolo menu a tendina. Questa pagina sì, perché tutto è scritto nel codice sorgente di Dawn e noi lo abbiamo letto lì.
Come abbiamo ottenuto questi numeri. Il 1 settembre 2026 abbiamo letto quattro file dal repository pubblico Shopify/dawn alla release v16.0.0 (2026-08-10): la sezione sections/image-banner.liquid, 507 righe, per lo schema delle impostazioni e le scale srcset; assets/section-image-banner.css per le regole di altezza; layout/theme.liquid per il font-size radice che converte i rem in pixel; e config/settings_schema.json per l’intervallo della dimensione del testo del corpo. Ogni cifra di questa pagina è stata estratta da quei file via script, non trascritta a mano. Se un numero appare qui, appare nel tema.
Questa è la parte che nessuno pubblica, ed è la parte che decide se il tuo banner sarà nitido su un portatile retina.
Dawn non serve una sola immagine. Costruisce un srcset e lascia scegliere al browser. La scala delle larghezze è hardcoded nella sezione, e ce ne sono due:
| Quando | Intervallo | Gradini | Larghezze richieste |
|---|---|---|---|
| Una immagine | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Due immagini | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
La seconda scala si attiva quando riempi entrambi gli slot image e image_2. Ogni immagine occupa allora metà della larghezza, quindi Dawn richiede file sorgente più grandi per mantenere la stessa densità a schermo — il gradino più alto passa da 3840px a 7680px.
Cosa caricare. Allinea la dimensione al gradino più alto della scala che userai davvero: 3840px di larghezza per un banner a immagine singola, 7680px di larghezza per uno a due immagini. Tutto ciò che è più grande viene buttato via dalla CDN immagini di Shopify. Tutto ciò che è più piccolo fa sì che la voce più grande del srcset ricada silenziosamente sul tuo originale, ed è così che i banner finiscono per risultare sfocati sui display ad alta densità.
Il menu a tendina Height ha 4 opzioni: adapt, small, medium, large. Tre di queste sono altezze minime fisse impostate nel CSS, e differiscono tra mobile e desktop (il breakpoint è 750px):
| Impostazione | Mobile (<750px) | Desktop (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
La quarta opzione, adapt, elimina del tutto l’altezza fissa e lascia che il banner assuma le proporzioni della tua prima immagine. È quella da scegliere quando la tua grafica ha un soggetto che non deve essere tagliato.
Quei valori in pixel non sono fissi. Dawn imposta la dimensione del font radice in layout/theme.liquid come calc(var(--font-body-scale) * 62.5%), e --font-body-scale arriva direttamente dall’impostazione dimensione del testo del corpo del tema stesso, che ha come valore predefinito 100% e può essere portata fino al 130% a passi del 5%.
Al valore predefinito del 100%, un rem è 10px, ed è da qui che nasce la tabella qui sopra. Porta il testo del corpo al 130% e ogni banner cresce nella stessa proporzione: un banner Large passa da 720px a 936px di altezza su desktop. I merchant cambiano l’impostazione della dimensione del testo per la leggibilità e poi si chiedono perché l’hero improvvisamente si mangi tutto lo schermo. Il motivo è questo.
12 impostazioni, esattamente come appaiono nell’editor del tema:
| ID nel codice | Etichetta nell’editor | Tipo | Predefinito | Intervallo / opzioni |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100, passo 10 |
image_height | Height | select | medium | 4 opzioni |
image_behavior | Animation | select | none | 4 opzioni |
desktop_content_position | Position | select | middle-center | 9 opzioni |
desktop_content_alignment | Alignment | select | center | 3 opzioni |
show_text_box | Container | checkbox | true | — |
color_scheme | Color scheme | color_scheme | scheme-1 | — |
stack_images_on_mobile | Stack images | checkbox | true | — |
mobile_content_alignment | Alignment | select | center | 3 opzioni |
show_text_below | Container | checkbox | true | — |
Alcune vale la pena conoscerle:
image_overlay_opacity — uno slider da 0 a 100 a passi di 10, predefinito 0. È il rimedio più rapido in assoluto per un testo illeggibile sopra una foto affollata, ed è fornito disattivato.
image_behavior — 4 opzioni: none, ambient, fixed, zoom-in. Predefinito none. Tre delle quattro si animano allo scroll, il che costa lavoro sul main thread proprio sull’elemento che il browser è già occupato a disegnare.
desktop_content_position — 9 posizioni, una griglia 3×3 completa, predefinito middle-center. Separata da desktop_content_alignment, che controlla come il testo si allinea all’interno di quel box.
show_text_below e show_text_box hanno entrambe come predefinito true. La prima sposta il testo sotto l’immagine su mobile invece che sopra; la seconda disegna il contenitore pieno dietro al testo su desktop.
La sezione accetta 3 tipi di blocco, con 1 disposizione preimpostata:
| Tipo | Nome | Impostazioni |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
Il blocco buttons porta 8 impostazioni perché contiene due pulsanti completi: etichetta, link e una casella di controllo per lo stile secondario per ciascuno. Entrambe le caselle di stile sono disattivate per impostazione predefinita, il che significa che entrambi i pulsanti vengono resi come primari — ed è per questo che tanti banner Dawn arrivano con due call to action dall’aspetto identico.
È tutto a un clic di distanza. Apri sections/image-banner.liquid e scorri fino al blocco {% schema %} in fondo: quel JSON è l’elenco delle impostazioni, valori predefiniti compresi. Le altezze si trovano in assets/section-image-banner.css. Le scale delle larghezze sono le istruzioni assign widths vicino all’inizio della sezione, alle righe 34 e 40.
Se Shopify pubblica una nuova release di Dawn, quei numeri possono cambiare. Questa pagina indica la versione da cui è stata letta proprio per questo motivo.
3840px di larghezza per un banner con una sola immagine. Dawn costruisce un srcset di 9 larghezze da 375px a 3840px, quindi tutto ciò che è più largo viene scartato e tutto ciò che è più stretto fa sì che la voce più grande ricada sul tuo file originale. Se usi entrambi gli slot immagine, carica invece 7680px — la scala per due immagini si ferma lì.
Su desktop le tre opzioni fisse sono 420px, 560px e 720px. Sotto il breakpoint di 750px diventano 280px, 340px e 390px. La quarta opzione, Adapt to first image, non ha un'altezza fissa e segue le proporzioni della tua immagine.
Le altezze del banner sono definite in rem, e la dimensione del font radice di Dawn è calc(var(--font-body-scale) * 62.5%). Quella variabile è l'impostazione della dimensione del testo del corpo del tema, predefinita 100%, regolabile fino al 130%. Aumentare la dimensione del testo scala con sé ogni altezza basata sui rem, banner compresi.
12 impostazioni sulla sezione stessa in Dawn v16.0.0, più 3 tipi di blocco (heading, text e buttons) che ne portano altre 12 complessivamente.
Scurisce l'immagine dietro al testo. È uno slider da 0 a 100 a passi di 10, e viene fornito a 0, ovvero disattivato. È la soluzione più rapida quando un titolo è illeggibile sopra una foto affollata.