Reportajes e investigación sobre Shopify y el comercio electrónico
El hero de Horizon tiene 36 ajustes de sección y 8 tipos de bloque que aportan 104 más, y su menú Height cambia de rem a svh a medida que crece la pantalla. Leído del código fuente del tema en el commit 8b42ace.
Horizon es el tema que Shopify instala en las tiendas nuevas, y su sección Hero es lo primero que toca la mayoría de los merchants. El editor de temas te muestra un menú Height con seis opciones y un espacio para imagen. No te dice que tres de esas opciones cambian su unidad de medida según el ancho de pantalla, ni que «Large» aquí significa algo completamente distinto de «Large» en Dawn.
Cómo obtuvimos estos números. El 1 de septiembre de 2026 leímos el repositorio público Shopify/horizon en el commit 8b42ace (2026-08-31): Horizon no publica releases ni tags, así que el commit es la versión. Tomamos el schema de ajustes y las escalas de srcset de sections/hero.liquid, 1496 líneas; las variables de altura de snippets/theme-styles-variables.liquid; y las reglas de la sección de assets/base.css. Las descripciones de los bloques se resolvieron a partir de la librería compartida blocks/ del tema, porque el schema del hero solo los nombra. Todas las cifras se extrajeron de esos archivos mediante un script.
Esta es la parte que sorprende. Horizon no tiene una altura por opción: tiene tres, repartidas en dos breakpoints, y la unidad cambia:
| Ajuste | Móvil | ≥40em | ≥60em |
|---|---|---|---|
| Small | 15rem = 240px | 40svh | 50svh |
| Medium | 25rem = 400px | 55svh | 65svh |
| Large | 35rem = 560px | 70svh | 80svh |
Por debajo de 40em las alturas son fijas en rem. Por encima pasan a svh, la unidad de small viewport height: un porcentaje de la pantalla visible. Así, en un móvil un hero Large mide 560px fijos de alto, y en un escritorio ancho es el 80% de lo que mida la ventana del visitante.
Otras dos alturas se saltan la tabla por completo. full-screen fija 100svh. custom expone un slider, section_height_custom, que va de 0 a 100% con un valor por defecto de 50, y ese valor también se escribe directamente como svh, no en píxeles.
Ambos temas ofrecen un hero Large. No son comparables, por dos razones distintas.
La base de rem es distinta. Revisamos todos los archivos del tema: Horizon nunca sobrescribe el tamaño de fuente raíz, así que 1rem es el valor por defecto del navegador, 16px. Dawn fija font-size: calc(var(--font-body-scale) * 62.5%), lo que hace que 1rem sea 10px. Los mismos 35rem significarían 560px en Horizon y 350px en Dawn.
La unidad es distinta por encima del breakpoint. El Large de Dawn son 720px fijos en escritorio, iguales en todas las pantallas. El Large de Horizon es 80svh, así que crece con la pantalla: unos 720px en una ventana de 900px de alto y unos 1152px en una de 1440px.
Si estás migrando un diseño entre los dos temas, este es el ajuste que más probablemente lo rompa.
Horizon construye un srcset a partir de dos escalas fijas en el código, en las líneas 103 y 105 de la sección:
| Escala | Rango | Pasos | Anchos solicitados |
|---|---|---|---|
| Media a todo el ancho | 832–3840px | 6 | 832, 1200, 1600, 1920, 2560, 3840 |
| Media dividida | 416–1600px | 5 | 416, 600, 800, 1200, 1600 |
Sube 3840px de ancho para un hero que abarque toda la página. La escala más estrecha llega solo hasta 1600px porque ahí cada imagen ocupa únicamente una parte del ancho.
Fíjate en el escalón más bajo: Horizon empieza en 832px donde Dawn empieza en 375px. Horizon simplemente no sirve una versión del tamaño de un móvil para una imagen de hero a todo el ancho, algo que conviene saber si tu tráfico es mayoritariamente móvil y con conexiones lentas.
Dawn describe sus bloques dentro del schema de la sección. Horizon los nombra y guarda las descripciones en una librería compartida, así que leer solo sections/hero.liquid no te dice nada sobre lo que puede hacer un bloque. Una vez resueltos, los 8 tipos suman 104 ajustes entre todos:
| Tipo | Nombre | Ajustes | Definido en |
|---|---|---|---|
@theme | — | 0 | wildcard |
text | Text | 19 | blocks/text.liquid |
button | Button | 12 | blocks/button.liquid |
logo | Logo | 15 | blocks/logo.liquid |
jumbo-text | Jumbo text | 9 | blocks/jumbo-text.liquid |
spacer | Spacer | 7 | blocks/spacer.liquid |
group | Group | 36 | blocks/group.liquid |
_marquee | Marquee | 6 | blocks/_marquee.liquid |
@theme es un comodín: acepta cualquier bloque del tema, por eso no tiene ajustes propios. group es el pesado, con 36 ajustes, porque es un contenedor de maquetación que repite un nivel más abajo casi todos los controles de alineación y espaciado de la propia sección.
Para dar una idea de escala: el banner de imagen de Dawn ofrece 3 tipos de bloque con 12 ajustes en total. El hero de Horizon ofrece 8 con 104. Esa es la diferencia real entre los dos temas, y no se ve en ninguna parte del editor de temas.
36 ajustes, tal como aparecen en el editor:
| ID en el código | Etiqueta en el editor | Tipo | Valor por defecto | Rango / opciones |
|---|---|---|---|---|
media_type_1 | Type | select | image | 2 opciones |
image_1 | Image | image_picker | — | — |
video_1 | Video | video | — | — |
media_type_2 | Type | select | image | 2 opciones |
image_2 | Image | image_picker | — | — |
video_2 | Video | video | — | — |
stack_media_on_mobile | Stack media | checkbox | false | — |
custom_mobile_media | Show different media on mobile | checkbox | false | — |
media_type_1_mobile | Type | select | image | 2 opciones |
image_1_mobile | Image | image_picker | — | — |
video_1_mobile | Video | video | — | — |
media_type_2_mobile | Type | select | image | 2 opciones |
image_2_mobile | Image | image_picker | — | — |
video_2_mobile | Video | video | — | — |
link | Link | url | — | — |
open_in_new_tab | Open link in new tab | checkbox | false | — |
content_direction | Direction | select | column | 2 opciones |
vertical_on_mobile | Vertical on mobile | checkbox | true | — |
horizontal_alignment | Alignment | select | flex-start | 4 opciones |
vertical_alignment | Position | select | center | 3 opciones |
align_baseline | Align text baseline | checkbox | false | — |
horizontal_alignment_flex_direction_column | Alignment | select | flex-start | 3 opciones |
vertical_alignment_flex_direction_column | Position | select | center | 4 opciones |
gap | Gap | range | 12 | 0–100px, paso 1 |
section_width | Width | select | page-width | 2 opciones |
section_height | Height | select | medium | 6 opciones |
section_height_custom | Custom height | range | 50 | 0–100%, paso 1 |
background_color | Background color | color | — | — |
toggle_overlay | Media overlay | checkbox | — | — |
overlay_color | Overlay color | color | #00000026 | — |
overlay_style | Overlay style | select | solid | 2 opciones |
gradient_direction | Gradient direction | select | to top | 2 opciones |
blurred_reflection | Blurred reflection | checkbox | false | — |
reflection_opacity | Reflection opacity | range | 75 | 0–100%, paso 1 |
padding-block-start | Top | range | 0 | 0–100px, paso 1 |
padding-block-end | Bottom | range | 0 | 0–100px, paso 1 |
Vale la pena señalar:
Cuatro ajustes de alineación distintos. horizontal_alignment y vertical_alignment se aplican cuando el contenido fluye en fila; horizontal_alignment_flex_direction_column y vertical_alignment_flex_direction_column se aplican cuando se apila. Cambias uno y el otro conserva su valor antiguo, que es la razón habitual de que un hero se vea bien en escritorio y mal en móvil.
reflection_opacity: un slider de 0 a 100%, por defecto 75, emparejado con blurred_reflection. Dawn no tiene equivalente.
Cuatro espacios de imagen y cuatro de video. El hero recibe media dos veces: escritorio y un conjunto móvil aparte detrás de custom_mobile_media, cuyo valor por defecto es false.
Abre sections/hero.liquid y lee el bloque {% schema %} del final para ver los ajustes. Las alturas están en las líneas 143 a 157 de snippets/theme-styles-variables.liquid. Las descripciones de los bloques están en blocks/: un archivo por tipo, con el nombre exacto de la columna type de arriba.
Horizon no tiene releases, así que no hay número de versión que citar. En su lugar, esta página indica el commit del que se leyó; si el tema cambia, estas cifras cambian con él.
3840px de ancho para un hero a todo el ancho. Horizon solicita 6 anchos, de 832px a 3840px. Para media dividida usa una segunda escala de 5 anchos que llega hasta 1600px, así que ahí 1600px es suficiente.
En móvil las opciones fijas son 240px, 400px y 560px. Por encima de 40em pasan a 40svh, 55svh y 70svh, y por encima de 60em a 50svh, 65svh y 80svh. Full-screen es 100svh y Custom es un slider que se lee directamente como svh.
Por dos razones. Horizon nunca sobrescribe el tamaño de fuente raíz, así que 1rem es el valor por defecto del navegador, 16px, mientras que Dawn fija 62.5% y obtiene 10px. Y por encima del breakpoint Horizon mide en svh, un porcentaje de la ventana, mientras que Dawn se mantiene en un valor fijo.
36 en la propia sección, más 8 tipos de bloque que suman 104 ajustes entre todos. Los ajustes de los bloques no están en el archivo de la sección: Horizon los guarda en una librería compartida blocks/.
En un archivo por tipo de bloque dentro de blocks/ en el tema. El schema del hero solo lista los nombres de los tipos, así que leyendo únicamente la sección se ven bloques sin ningún ajuste. La entrada @theme es un comodín que acepta cualquier bloque del tema.