Bannière hero Horizon : tailles et réglages directement issus du code

Horizon est le thème que Shopify livre aux nouvelles boutiques, et sa section Hero est la première chose que la plupart des marchands touchent. L’éditeur de thème vous montre un menu déroulant Hauteur avec six choix et un emplacement d’image. Il ne vous dit pas que trois de ces choix changent d’unité de mesure selon la largeur de l’écran, ni que « Large » signifie ici quelque chose de complètement différent du « Large » de Dawn.

Comment nous avons obtenu ces chiffres. Le 1er septembre 2026, nous avons lu le dépôt public Shopify/horizon au commit 8b42ace (2026-08-31) — Horizon ne publie ni releases ni tags, le commit tient donc lieu de version. Nous avons pris le schéma de réglages et les échelles de srcset dans sections/hero.liquid, 1496 lignes ; les variables de hauteur dans snippets/theme-styles-variables.liquid ; et les règles de section dans assets/base.css. Les descriptions de blocs ont été résolues depuis la bibliothèque partagée blocks/ du thème, parce que le schéma du hero se contente de les nommer. Chaque chiffre a été extrait de ces fichiers par script.

Les hauteurs changent d’unité à mesure que l’écran grandit

C’est la partie qui surprend. Horizon n’a pas une hauteur par option — il en a trois, réparties sur deux points de rupture, et l’unité change :

En dessous de 40em, les hauteurs sont fixées en rem. Au-dessus, elles deviennent des svh, l’unité de petite hauteur de viewport — un pourcentage de l’écran visible. Sur un téléphone, un hero Large fait donc 560px de haut, fixes, et sur un large écran de bureau il fait 80 % de ce que mesure la fenêtre du visiteur.

Deux autres hauteurs contournent complètement le tableau. full-screen fixe 100svh. custom expose un curseur, section_height_custom, allant de 0 à 100 % avec une valeur par défaut de 50 — et cette valeur est elle aussi écrite directement en svh, pas en pixels.

Pourquoi « Large » n’est pas le même que le « Large » de Dawn

Les deux thèmes proposent un hero Large. Ils ne sont pas comparables, pour deux raisons distinctes.

La base du rem diffère. Nous avons cherché dans chacun des fichiers du thème : Horizon ne redéfinit jamais la taille de police racine, donc 1rem vaut la valeur par défaut du navigateur, 16px. Dawn fixe font-size: calc(var(--font-body-scale) * 62.5%), ce qui porte 1rem à 10px. Le même 35rem signifierait 560px dans Horizon et 350px dans Dawn.

L’unité diffère au-delà du point de rupture. Le Large de Dawn fait 720px fixes sur desktop, identiques sur tous les écrans. Le Large d’Horizon fait 80svh, il grandit donc avec l’affichage : environ 720px sur une fenêtre de 900px de haut et environ 1152px sur une fenêtre de 1440px.

Si vous portez une maquette d’un thème à l’autre, c’est le réglage le plus susceptible de tout casser.

Les tailles d’image exactes

Horizon construit un srcset à partir de deux échelles codées en dur, aux lignes 103 et 105 de la section :

Chargez une image de 3840px de large pour un hero qui occupe toute la page. L’échelle la plus étroite plafonne à 1600px parce que chaque image n’y occupe jamais qu’une partie de la largeur.

Notez le barreau du bas : Horizon démarre à 832px là où Dawn démarre à 375px. Horizon ne sert tout simplement pas de version au format téléphone d’une image de hero pleine largeur, ce qui mérite d’être su si votre trafic est majoritairement mobile et sur connexions lentes.

Les blocs ne sont pas dans ce fichier

Dawn décrit ses blocs à l’intérieur du schéma de section. Horizon les nomme et conserve les descriptions dans une bibliothèque partagée : lire sections/hero.liquid seul ne vous apprend donc rien sur ce qu’un bloc sait faire. Une fois résolus, les 8 types portent 104 réglages à eux tous :

@theme est un joker : il accepte n’importe quel bloc de thème, c’est pourquoi il n’a aucun réglage propre. group est le plus lourd avec 36 réglages, parce qu’il s’agit d’un conteneur de mise en page qui reprend, un niveau plus bas, la plupart des contrôles d’alignement et d’espacement de la section elle-même.

Pour l’échelle : la bannière image de Dawn propose 3 types de blocs totalisant 12 réglages. Le hero d’Horizon en propose 8 totalisant 104. Voilà la vraie différence entre les deux thèmes, et elle n’est visible nulle part dans l’éditeur de thème.

Tous les réglages de la section

36 réglages, tels qu’ils apparaissent dans l’éditeur :

À souligner :

Quatre réglages d’alignement distincts. horizontal_alignment et vertical_alignment s’appliquent quand le contenu s’écoule en ligne ; horizontal_alignment_flex_direction_column et vertical_alignment_flex_direction_column s’appliquent quand il s’empile. Modifiez l’un et l’autre conserve son ancienne valeur, ce qui est la raison habituelle pour laquelle un hero est correct sur desktop et raté sur mobile.

reflection_opacity — un curseur de 0 à 100 %, par défaut 75, associé à blurred_reflection. Dawn n’a pas d’équivalent.

Quatre emplacements d’image et quatre de vidéo. Le hero prend des médias en double — le desktop et un jeu mobile séparé derrière custom_mobile_media, qui vaut false par défaut.

Vérifier par vous-même

Ouvrez sections/hero.liquid et lisez le bloc {% schema %} en bas pour les réglages. Les hauteurs se trouvent aux lignes 143 à 157 de snippets/theme-styles-variables.liquid. Les descriptions de blocs sont dans blocks/ — un fichier par type, nommé exactement comme dans la colonne type ci-dessus.

Horizon n’a pas de releases, il n’y a donc pas de numéro de version à citer. Cette page nomme à la place le commit sur lequel elle s’appuie ; si le thème change, ces chiffres bougent avec lui.