Enquêtes et recherches sur Shopify et le e-commerce
Dawn v16.0.0 demande au navigateur 9 largeurs d'image de 375 à 3840px, et une autre échelle qui monte jusqu'à 7680px lorsque vous utilisez deux images. Voici tous les réglages de la section Image banner, toutes les valeurs par défaut et les hauteurs exactes en pixels, lues dans le code du thème lui-même.
La documentation de Shopify sur la section Image banner s’arrête à « ajoutez une image et un peu de texte ». Elle ne vous dit pas quelle taille doit avoir cette image, quelle hauteur fera au final la bannière, ni ce que change réellement chaque menu déroulant. Cette page le fait, parce que tout est écrit dans le code source de Dawn et que nous l’y avons lu.
Comment nous avons obtenu ces chiffres. Le 1er septembre 2026, nous avons lu quatre fichiers du dépôt public Shopify/dawn à la version v16.0.0 (2026-08-10) : la section sections/image-banner.liquid, 507 lignes, pour le schéma des réglages et les échelles de srcset ; assets/section-image-banner.css pour les règles de hauteur ; layout/theme.liquid pour la taille de police racine qui convertit les rem en pixels ; et config/settings_schema.json pour la plage de la taille du texte du corps. Chaque chiffre de cette page a été extrait de ces fichiers par script, et non recopié à la main. Si un nombre apparaît ici, il apparaît dans le thème.
C’est la partie que personne ne publie, et c’est celle qui décide si votre bannière sera nette sur un portable retina.
Dawn ne sert pas une seule image. Il construit un srcset et laisse le navigateur choisir. L’échelle des largeurs est codée en dur dans la section, et il y en a deux :
| Cas | Plage | Paliers | Largeurs demandées |
|---|---|---|---|
| Une image | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Deux images | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
La seconde échelle s’active lorsque vous remplissez à la fois les emplacements image et image_2. Chaque image occupe alors la moitié de la largeur, si bien que Dawn demande des fichiers sources plus grands pour conserver la même densité à l’écran — l’échelon le plus haut passe de 3840px à 7680px.
Ce qu’il faut importer. Alignez-vous sur l’échelon le plus haut de l’échelle que vous utiliserez réellement : 3840px de large pour une bannière à une seule image, 7680px de large pour une bannière à deux images. Tout ce qui est plus grand est jeté par le CDN d’images de Shopify. Tout ce qui est plus petit et la plus grande entrée du srcset retombe silencieusement sur votre fichier d’origine — c’est ainsi que les bannières finissent floues sur les écrans haute densité.
Le menu déroulant Height compte 4 options : adapt, small, medium, large. Trois d’entre elles sont des hauteurs minimales fixes définies en CSS, et elles diffèrent entre mobile et desktop (le point de rupture est à 750px) :
| Réglage | Mobile (<750px) | Desktop (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
La quatrième option, adapt, supprime complètement la hauteur fixe et laisse la bannière adopter le ratio de votre première image. C’est celle qu’il faut choisir quand votre visuel contient un sujet qui ne doit pas être recadré.
Ces valeurs en pixels ne sont pas figées. Dawn définit sa taille de police racine dans layout/theme.liquid comme calc(var(--font-body-scale) * 62.5%), et --font-body-scale vient directement du réglage taille du texte du corps du thème, qui vaut 100% par défaut et peut être poussé jusqu’à 130% par pas de 5%.
À la valeur par défaut de 100%, un rem vaut 10px, ce qui explique le tableau ci-dessus. Portez le texte du corps à 130% et chaque bannière grandit dans la même proportion : une bannière Large passe de 720px à 936px de haut sur desktop. Les marchands modifient le réglage de taille du texte pour la lisibilité, puis se demandent pourquoi le hero dévore soudain tout l’écran. Voilà pourquoi.
12 réglages, exactement tels qu’ils apparaissent dans l’éditeur de thème :
| ID dans le code | Libellé dans l’éditeur | Type | Valeur par défaut | Plage / options |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Opacité de la superposition | range | 0 | 0–100, pas de 10 |
image_height | Hauteur | select | medium | 4 options |
image_behavior | Animation | select | none | 4 options |
desktop_content_position | Position | select | middle-center | 9 options |
desktop_content_alignment | Alignement | select | center | 3 options |
show_text_box | Conteneur | checkbox | true | — |
color_scheme | Palette de couleurs | color_scheme | scheme-1 | — |
stack_images_on_mobile | Empiler les images | checkbox | true | — |
mobile_content_alignment | Alignement | select | center | 3 options |
show_text_below | Conteneur | checkbox | true | — |
Quelques-uns méritent qu’on s’y arrête :
image_overlay_opacity — un curseur de 0 à 100 par pas de 10, valeur par défaut 0. C’est le correctif le plus rapide pour un texte illisible sur une photo chargée, et il est livré désactivé.
image_behavior — 4 options : none, ambient, fixed, zoom-in. Valeur par défaut none. Trois des quatre s’animent au défilement, ce qui consomme du temps de thread principal sur l’élément même que le navigateur est déjà occupé à peindre.
desktop_content_position — 9 positions, une grille 3×3 complète, valeur par défaut middle-center. À distinguer de desktop_content_alignment, qui contrôle la façon dont le texte s’aligne à l’intérieur de ce bloc.
show_text_below et show_text_box valent tous deux true par défaut. Le premier place le texte sous l’image sur mobile plutôt que par-dessus ; le second dessine le conteneur plein derrière le texte sur desktop.
La section accepte 3 types de blocs, avec 1 agencement prédéfini :
| Type | Nom | Réglages |
|---|---|---|
heading | Titre | 2 |
text | Texte | 2 |
buttons | Boutons | 8 |
Le bloc buttons porte 8 réglages parce qu’il contient deux boutons complets : libellé, lien et une case à cocher de style secondaire pour chacun. Les deux cases de style sont désactivées par défaut, ce qui fait que les deux boutons s’affichent en style principal — d’où le nombre de bannières Dawn livrées avec deux appels à l’action d’apparence identique.
Tout est à un clic. Ouvrez sections/image-banner.liquid et descendez jusqu’au bloc {% schema %} en bas : ce JSON est la liste des réglages, valeurs par défaut incluses. Les hauteurs vivent dans assets/section-image-banner.css. Les échelles de largeurs sont des instructions assign widths situées près du haut de la section, aux lignes 34 et 40.
Si Shopify publie une nouvelle version de Dawn, ces chiffres peuvent bouger. Cette page indique la version à partir de laquelle elle a été lue précisément pour cette raison.
3840px de large pour une bannière avec une seule image. Dawn construit un srcset de 9 largeurs allant de 375px à 3840px : tout ce qui est plus large est écarté, et tout ce qui est plus étroit fait retomber la plus grande entrée sur votre fichier d'origine. Si vous utilisez les deux emplacements d'image, importez plutôt du 7680px — l'échelle à deux images s'arrête là.
Sur desktop, les trois options fixes sont 420px, 560px et 720px. En dessous du point de rupture de 750px, elles deviennent 280px, 340px et 390px. La quatrième option, Adapt to first image, n'a pas de hauteur fixe et suit le ratio de votre image.
Les hauteurs de bannière sont définies en rem, et la taille de police racine de Dawn est calc(var(--font-body-scale) * 62.5%). Cette variable correspond au réglage de taille du texte du corps du thème, 100% par défaut, ajustable jusqu'à 130%. Augmenter la taille du texte met à l'échelle toutes les hauteurs exprimées en rem, bannières incluses.
12 réglages sur la section elle-même dans Dawn v16.0.0, plus 3 types de blocs (titre, texte et boutons) qui en portent 12 de plus à eux trois.
Elle assombrit l'image derrière votre texte. C'est un curseur de 0 à 100 par pas de 10, et il est livré à 0, c'est-à-dire désactivé. C'est la correction la plus rapide quand un titre est illisible sur une photo chargée.