Reportajes e investigación sobre Shopify y el comercio electrónico
Dawn v16.0.0 le pide al navegador 9 anchos de imagen, de 375 a 3840px, y una escalera distinta que llega hasta 7680px cuando usas dos imágenes. Estos son todos los ajustes de la sección Image banner, todos los valores por defecto y las alturas exactas en píxeles, leídos del propio código del tema.
La propia documentación de Shopify para la sección Image banner se queda en “añade una imagen y algo de texto”. No te dice qué tamaño debería tener esa imagen, qué altura acabará teniendo el banner ni qué cambia realmente cada desplegable. Esta página sí, porque todo eso está escrito en el código fuente de Dawn y lo leímos ahí.
Cómo obtuvimos estos números. El 1 de septiembre de 2026 leímos cuatro archivos del repositorio público Shopify/dawn en la versión v16.0.0 (2026-08-10): la sección sections/image-banner.liquid, 507 líneas, para el esquema de ajustes y las escaleras de srcset; assets/section-image-banner.css para las reglas de altura; layout/theme.liquid para el font-size raíz que convierte rem en píxeles; y config/settings_schema.json para el rango del tamaño del texto del cuerpo. Todas las cifras de esta página se extrajeron de esos archivos por script, no se transcribieron a mano. Si un número aparece aquí, aparece en el tema.
Esta es la parte que nadie publica, y es la que decide si tu banner se ve nítido en un portátil retina.
Dawn no sirve una sola imagen. Construye un srcset y deja que el navegador elija. La escalera de anchos está escrita a fuego en la sección, y hay dos:
| Cuándo | Rango | Pasos | Anchos solicitados |
|---|---|---|---|
| Una imagen | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Dos imágenes | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
La segunda escalera se activa cuando rellenas los dos espacios, image e image_2. Cada imagen ocupa entonces la mitad del ancho, así que Dawn pide archivos de origen más grandes para mantener la misma densidad en pantalla: el peldaño más alto pasa de 3840px a 7680px.
Qué subir. Ajústate al peldaño más alto de la escalera que vayas a usar realmente: 3840px de ancho para un banner de una sola imagen, 7680px de ancho para uno de dos. Todo lo que sea más grande lo descarta la CDN de imágenes de Shopify. Todo lo que sea más pequeño hace que la entrada más grande del srcset recurra en silencio a tu original, y así es como los banners acaban viéndose blandos en pantallas de alta densidad.
El desplegable Height tiene 4 opciones: adapt, small, medium, large. Tres de ellas son alturas mínimas fijas definidas en CSS, y difieren entre móvil y escritorio (el breakpoint es 750px):
| Ajuste | Móvil (<750px) | Escritorio (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
La cuarta opción, adapt, elimina por completo la altura fija y deja que el banner adopte la relación de aspecto de tu primera imagen. Es la que hay que elegir cuando tu material gráfico tiene un motivo que no se puede recortar.
Esos valores en píxeles no son fijos. Dawn define su tamaño de fuente raíz en layout/theme.liquid como calc(var(--font-body-scale) * 62.5%), y --font-body-scale viene directamente del propio ajuste de tamaño del texto del cuerpo del tema, que por defecto es 100% y se puede llevar hasta 130% en pasos de 5%.
Con el valor por defecto de 100%, un rem son 10px, que es de donde sale la tabla de arriba. Sube el texto del cuerpo al 130% y todos los banners crecen en la misma proporción: un banner Large pasa de 720px a 936px de alto en escritorio. Los comerciantes cambian el ajuste de tamaño del texto por legibilidad y luego se preguntan por qué el hero se come de golpe toda la pantalla. Por esto.
12 ajustes, exactamente como aparecen en el editor de temas:
| ID en el código | Etiqueta en el editor | Tipo | Por defecto | Rango / opciones |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100, paso 10 |
image_height | Height | select | medium | 4 opciones |
image_behavior | Animation | select | none | 4 opciones |
desktop_content_position | Position | select | middle-center | 9 opciones |
desktop_content_alignment | Alignment | select | center | 3 opciones |
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 opciones |
show_text_below | Container | checkbox | true | — |
Algunos que merece la pena conocer:
image_overlay_opacity — un control deslizante de 0 a 100 en pasos de 10, por defecto 0. Es el arreglo más rápido para un texto ilegible sobre una foto cargada, y viene desactivado.
image_behavior — 4 opciones: none, ambient, fixed, zoom-in. Por defecto none. Tres de las cuatro animan al hacer scroll, lo que consume trabajo del hilo principal justo en el elemento que el navegador ya está ocupado pintando.
desktop_content_position — 9 posiciones, una cuadrícula completa de 3×3, por defecto middle-center. Es independiente de desktop_content_alignment, que controla cómo se alinea el texto dentro de esa caja.
show_text_below y show_text_box vienen ambos en true. El primero mueve el texto debajo de la imagen en móvil en lugar de encima; el segundo dibuja el contenedor sólido detrás del texto en escritorio.
La sección acepta 3 tipos de bloque, con 1 disposición predefinida:
| Tipo | Nombre | Ajustes |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
El bloque buttons lleva 8 ajustes porque contiene dos botones completos: etiqueta, enlace y una casilla de estilo secundario para cada uno. Las dos casillas de estilo vienen desactivadas por defecto, lo que significa que ambos botones se renderizan como primarios, y por eso tantos banners de Dawn salen con dos llamadas a la acción de aspecto idéntico.
Todo esto está a un clic. Abre sections/image-banner.liquid y baja hasta el bloque {% schema %} del final: ese JSON es la lista de ajustes, con valores por defecto y todo. Las alturas viven en assets/section-image-banner.css. Las escaleras de anchos son sentencias assign widths cerca del principio de la sección, en las líneas 34 y 40.
Si Shopify publica una nueva versión de Dawn, esos números pueden cambiar. Esta página indica la versión de la que se leyeron precisamente por eso.
3840px de ancho para un banner con una sola imagen. Dawn construye un srcset de 9 anchos, de 375px a 3840px, así que todo lo que sea más ancho se descarta y todo lo que sea más estrecho hace que la entrada más grande recurra a tu archivo original. Si usas los dos espacios de imagen, sube 7680px en su lugar: ahí termina la escalera de dos imágenes.
En escritorio las tres opciones fijas son 420px, 560px y 720px. Por debajo del breakpoint de 750px pasan a ser 280px, 340px y 390px. La cuarta opción, Adapt to first image, no tiene altura fija y sigue la relación de aspecto de tu imagen.
Las alturas del banner están definidas en rem, y el tamaño de fuente raíz de Dawn es calc(var(--font-body-scale) * 62.5%). Esa variable es el ajuste de tamaño del texto del cuerpo del tema, con valor por defecto 100% y ajustable hasta 130%. Subir el tamaño del texto escala con él todas las alturas basadas en rem, banners incluidos.
12 ajustes en la propia sección en Dawn v16.0.0, más 3 tipos de bloque (heading, text y buttons) que suman entre ellos 12 ajustes más.
Oscurece la imagen que está detrás de tu texto. Es un control deslizante de 0 a 100 en pasos de 10, y viene en 0, es decir, desactivado. Es el arreglo más rápido cuando un titular no se puede leer sobre una foto cargada.