Banner Hero do Horizon: Tamanhos e Configurações Direto do Código

O Horizon é o tema que a Shopify entrega às lojas novas, e a sua secção Hero é a primeira coisa em que a maioria dos comerciantes mexe. O editor de temas mostra um menu de Altura com seis opções e um espaço para imagem. Não diz que três dessas opções mudam de unidade de medida consoante a largura do ecrã, nem que “Large” aqui significa algo completamente diferente de “Large” no Dawn.

Como chegámos a estes números. A 1 de setembro de 2026 lemos o repositório público Shopify/horizon no commit 8b42ace (2026-08-31) — o Horizon não publica releases nem tags, por isso o commit é a versão. Retirámos o schema de configurações e as escalas de srcset de sections/hero.liquid, 1496 linhas; as variáveis de altura de snippets/theme-styles-variables.liquid; e as regras da secção de assets/base.css. As descrições dos blocos foram resolvidas a partir da biblioteca partilhada blocks/ do tema, porque o schema do hero apenas os nomeia. Todos os valores foram extraídos desses ficheiros por script.

As alturas mudam de unidade à medida que o ecrã cresce

Esta é a parte que surpreende as pessoas. O Horizon não tem uma altura por opção — tem três, ao longo de dois breakpoints, e a unidade muda:

Abaixo de 40em as alturas são fixas em rem. Acima disso passam a svh, a unidade de small viewport height — uma percentagem do ecrã visível. Ou seja, num telemóvel um hero Large tem uns fixos 560px de altura, e num desktop largo tem 80% do que quer que seja a janela do visitante.

Mais duas alturas ignoram a tabela por completo. full-screen define 100svh. custom expõe um slider, section_height_custom, que vai de 0 a 100% com predefinição de 50 — e esse valor também é escrito diretamente como svh, não em píxeis.

Porque “Large” não é o mesmo que o “Large” do Dawn

Ambos os temas oferecem um hero Large. Não são comparáveis, por duas razões distintas.

A base do rem é diferente. Pesquisámos todos os ficheiros do tema: o Horizon nunca substitui o tamanho de letra raiz, por isso 1rem é a predefinição do browser, 16px. O Dawn define font-size: calc(var(--font-body-scale) * 62.5%), o que torna 1rem em 10px. Os mesmos 35rem significariam 560px no Horizon e 350px no Dawn.

A unidade é diferente acima do breakpoint. O Large do Dawn são uns fixos 720px no desktop, iguais em todos os ecrãs. O Large do Horizon são 80svh, por isso cresce com o ecrã: cerca de 720px numa janela de 900px de altura e cerca de 1152px numa de 1440px.

Se está a transportar um design entre os dois temas, esta é a configuração com maior probabilidade de o quebrar.

Os tamanhos de imagem exatos

O Horizon constrói um srcset a partir de duas escalas fixas no código, nas linhas 103 e 105 da secção:

Carregue 3840px de largura para um hero que ocupe toda a página. A escala mais estreita termina nos 1600px porque aí cada imagem ocupa sempre apenas parte da largura.

Repare no degrau mais baixo: o Horizon começa nos 832px onde o Dawn começa nos 375px. O Horizon simplesmente não serve uma versão do tamanho de telemóvel de uma imagem hero de largura total, o que vale a pena saber se o seu tráfego é maioritariamente mobile e em ligações lentas.

Os blocos não estão neste ficheiro

O Dawn descreve os seus blocos dentro do schema da secção. O Horizon nomeia-os e guarda as descrições numa biblioteca partilhada, por isso ler apenas sections/hero.liquid não diz nada sobre o que um bloco pode fazer. Resolvidos, os 8 tipos somam 104 configurações entre si:

@theme é um wildcard: aceita qualquer bloco do tema, e é por isso que não tem configurações próprias. group é o mais pesado, com 36 configurações, porque é um contentor de layout que repete a maior parte dos controlos de alinhamento e espaçamento da própria secção um nível abaixo.

Para ter noção da escala: o banner de imagem do Dawn oferece 3 tipos de bloco com 12 configurações no total. O hero do Horizon oferece 8 com 104. É essa a verdadeira diferença entre os dois temas, e não é visível em lado nenhum no editor de temas.

Todas as configurações da secção

36 configurações, tal como aparecem no editor:

Vale a pena destacar:

Quatro configurações de alinhamento separadas. horizontal_alignment e vertical_alignment aplicam-se quando o conteúdo flui em linha; horizontal_alignment_flex_direction_column e vertical_alignment_flex_direction_column aplicam-se quando empilha. Mude uma e a outra mantém o valor antigo, que é a razão habitual para um hero ficar bem no desktop e mal no mobile.

reflection_opacity — um slider de 0 a 100%, predefinição 75, emparelhado com blurred_reflection. O Dawn não tem equivalente.

Quatro espaços para imagem e quatro para vídeo. O hero recebe media duas vezes — desktop e um conjunto mobile separado por trás de custom_mobile_media, que está predefinido como false.

Verificar isto por si próprio

Abra sections/hero.liquid e leia o bloco {% schema %} no fim para ver as configurações. As alturas estão nas linhas 143 a 157 de snippets/theme-styles-variables.liquid. As descrições dos blocos estão em blocks/ — um ficheiro por tipo, com o nome exato da coluna type acima.

O Horizon não tem releases, por isso não há número de versão para citar. Esta página nomeia antes o commit a partir do qual foi lida; se o tema mudar, estes valores mudam com ele.