Horizon Hero Banner: dimensioni e impostazioni direttamente dal codice

Horizon è il tema che Shopify fornisce ai nuovi store, e la sua sezione Hero è la prima cosa su cui la maggior parte dei merchant mette mano. L’editor del tema ti mostra un menu a tendina Height con sei scelte e uno slot per l’immagine. Non ti dice che tre di quelle scelte cambiano la loro unità di misura a seconda della larghezza dello schermo, né che qui “Large” significa qualcosa di completamente diverso da “Large” in Dawn.

Come abbiamo ottenuto questi numeri. Il 1 settembre 2026 abbiamo letto il repository pubblico Shopify/horizon al commit 8b42ace (2026-08-31) — Horizon non pubblica release né tag, quindi il commit è la versione. Abbiamo preso lo schema delle impostazioni e le scale srcset da sections/hero.liquid, 1496 righe; le variabili di altezza da snippets/theme-styles-variables.liquid; e le regole della sezione da assets/base.css. Le descrizioni dei blocchi sono state ricostruite dalla libreria condivisa blocks/ del tema, perché lo schema dell’hero si limita a nominarli. Ogni dato è stato estratto da quei file tramite script.

Le altezze cambiano unità al crescere dello schermo

Questa è la parte che sorprende le persone. Horizon non ha un’altezza per opzione — ne ha tre, su due breakpoint, e l’unità cambia:

Sotto 40em le altezze sono fisse in rem. Sopra diventano svh, l’unità small viewport height — una percentuale dello schermo visibile. Così su un telefono un hero Large è alto 560px fissi, e su un desktop ampio è l’80% di qualunque dimensione abbia la finestra del visitatore.

Altre due altezze bypassano completamente la tabella. full-screen imposta 100svh. custom espone uno slider, section_height_custom, che va da 0 a 100% con un default di 50 — e anche quel valore viene scritto direttamente come svh, non in pixel.

Perché “Large” non è lo stesso “Large” di Dawn

Entrambi i temi offrono un hero Large. Non sono comparabili, per due ragioni distinte.

La base rem è diversa. Abbiamo cercato in tutti i file del tema: Horizon non sovrascrive mai la dimensione del font di root, quindi 1rem è il valore predefinito del browser, 16px. Dawn imposta font-size: calc(var(--font-body-scale) * 62.5%), che rende 1rem pari a 10px. Lo stesso 35rem significherebbe 560px in Horizon e 350px in Dawn.

L’unità è diversa sopra il breakpoint. Il Large di Dawn è un valore fisso di 720px su desktop, uguale su ogni schermo. Il Large di Horizon è 80svh, quindi cresce con il display: circa 720px su una finestra alta 900px e circa 1152px su una da 1440px.

Se stai portando un design da un tema all’altro, questa è l’impostazione che più probabilmente lo romperà.

Le dimensioni esatte delle immagini

Horizon costruisce un srcset da due scale hardcoded, alle righe 103 e 105 della sezione:

Carica 3840px di larghezza per un hero che occupa tutta la pagina. La scala più stretta si ferma a 1600px perché lì ogni immagine occupa sempre solo una parte della larghezza.

Nota il gradino più basso: Horizon parte da 832px dove Dawn parte da 375px. Horizon semplicemente non serve una versione da telefono di un’immagine hero a piena larghezza, cosa che vale la pena sapere se il tuo traffico è prevalentemente mobile e su connessioni lente.

I blocchi non sono in questo file

Dawn descrive i suoi blocchi all’interno dello schema della sezione. Horizon li nomina e tiene le descrizioni in una libreria condivisa, quindi leggere solo sections/hero.liquid non ti dice nulla su cosa può fare un blocco. Una volta ricostruiti, gli 8 tipi portano 104 impostazioni complessive:

@theme è una wildcard: accetta qualsiasi blocco del tema, ed è per questo che non ha impostazioni proprie. group è il più pesante con 36 impostazioni, perché è un contenitore di layout che ripete un livello più sotto la maggior parte dei controlli di allineamento e spaziatura della sezione stessa.

Per avere un ordine di grandezza: l’image banner di Dawn offre 3 tipi di blocco con 12 impostazioni in totale. L’hero di Horizon ne offre 8 con 104. Questa è la vera differenza tra i due temi, e non è visibile in nessun punto dell’editor del tema.

Tutte le impostazioni della sezione

36 impostazioni, così come appaiono nell’editor:

Vale la pena segnalare:

Quattro impostazioni di allineamento distinte. horizontal_alignment e vertical_alignment si applicano quando il contenuto scorre in riga; horizontal_alignment_flex_direction_column e vertical_alignment_flex_direction_column si applicano quando si impila. Cambiane una e l’altra conserva il vecchio valore: è il motivo tipico per cui un hero appare corretto su desktop e sbagliato su mobile.

reflection_opacity — uno slider da 0 a 100%, default 75, abbinato a blurred_reflection. Dawn non ha un equivalente.

Quattro slot immagine e quattro slot video. L’hero prende i media due volte — desktop e un set mobile separato dietro custom_mobile_media, il cui default è false.

Verificarlo in autonomia

Apri sections/hero.liquid e leggi il blocco {% schema %} in fondo per le impostazioni. Le altezze sono alle righe da 143 a 157 di snippets/theme-styles-variables.liquid. Le descrizioni dei blocchi sono in blocks/ — un file per tipo, denominato esattamente come nella colonna type qui sopra.

Horizon non ha release, quindi non c’è alcun numero di versione da citare. Questa pagina indica invece il commit da cui è stata letta; se il tema cambia, questi dati cambiano con esso.