Reportagens e pesquisa sobre Shopify e e-commerce
O Dawn v16.0.0 pede ao navegador 9 larguras de imagem, de 375 a 3840px, e uma escada diferente até 7680px quando você usa duas imagens. Estas são todas as configurações da seção Image banner, todos os valores padrão e as alturas exatas em pixels, lidas no próprio código do tema.
A própria documentação da Shopify sobre a seção Image banner fica em “adicione uma imagem e algum texto”. Não diz que tamanho essa imagem deve ter, que altura o banner vai acabar tendo, nem o que cada menu realmente muda. Esta página diz, porque tudo isso está escrito no código-fonte do Dawn e nós fomos ler lá.
Como obtivemos estes números. Em 1 de setembro de 2026 lemos quatro arquivos do repositório público Shopify/dawn no release v16.0.0 (2026-08-10): a seção sections/image-banner.liquid, 507 linhas, para o schema de configurações e as escadas de srcset; assets/section-image-banner.css para as regras de altura; layout/theme.liquid para o font-size raiz que converte rem em pixels; e config/settings_schema.json para o intervalo do tamanho do texto do corpo. Todos os valores desta página foram extraídos desses arquivos por script, não transcritos à mão. Se um número aparece aqui, é porque aparece no tema.
Esta é a parte que ninguém publica, e é a parte que decide se o seu banner fica nítido num laptop retina.
O Dawn não serve uma imagem. Ele monta um srcset e deixa o navegador escolher. A escada de larguras está fixada no código da seção, e há duas delas:
| Quando | Intervalo | Passos | Larguras solicitadas |
|---|---|---|---|
| Uma imagem | 375–3840px | 9 | 375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840 |
| Duas imagens | 450–7680px | 9 | 450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680 |
A segunda escada entra em ação quando você preenche os dois espaços, image e image_2. Cada imagem passa a ocupar metade da largura, então o Dawn pede arquivos de origem maiores para manter a mesma densidade em tela — o degrau mais alto vai de 3840px para 7680px.
O que carregar. Corresponda ao degrau mais alto da escada que você vai realmente usar: 3840px de largura para um banner de uma imagem, 7680px de largura para um de duas imagens. Qualquer coisa maior é descartada pelo CDN de imagens da Shopify. Qualquer coisa menor e a maior entrada do srcset recorre silenciosamente ao seu original, que é como os banners acabam sem nitidez em telas de alta densidade.
O menu Height tem 4 opções: adapt, small, medium, large. Três delas são alturas mínimas fixas definidas em CSS, e diferem entre mobile e desktop (o breakpoint é 750px):
| Configuração | Mobile (<750px) | Desktop (≥750px) |
|---|---|---|
| Small | 28rem = 280px | 42rem = 420px |
| Medium | 34rem = 340px | 56rem = 560px |
| Large | 39rem = 390px | 72rem = 720px |
A quarta opção, adapt, abandona totalmente a altura fixa e deixa o banner assumir a proporção da sua primeira imagem. É a que se escolhe quando a sua arte tem um elemento que não pode ser cortado.
Esses valores em pixels não são fixos. O Dawn define o seu tamanho de fonte raiz em layout/theme.liquid como calc(var(--font-body-scale) * 62.5%), e --font-body-scale vem diretamente da própria configuração de tamanho do texto do corpo do tema, que tem padrão 100% e pode ser levada até 130% em passos de 5%.
No padrão de 100%, um rem é 10px, que é de onde vem a tabela acima. Aumente o texto do corpo para 130% e todos os banners crescem na mesma proporção: um banner Large vai de 720px para 936px de altura no desktop. Os comerciantes mudam a configuração de tamanho do texto por legibilidade e depois se perguntam por que o hero de repente ocupa a tela toda. É por isso.
12 configurações, exatamente como aparecem no editor de temas:
| ID no código | Rótulo no editor | Tipo | Padrão | Intervalo / opções |
|---|---|---|---|---|
image | Image 1 | image_picker | — | — |
image_2 | Image 2 | image_picker | — | — |
image_overlay_opacity | Overlay opacity | range | 0 | 0–100, passo 10 |
image_height | Height | select | medium | 4 opções |
image_behavior | Animation | select | none | 4 opções |
desktop_content_position | Position | select | middle-center | 9 opções |
desktop_content_alignment | Alignment | select | center | 3 opções |
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 opções |
show_text_below | Container | checkbox | true | — |
Algumas que vale a pena conhecer:
image_overlay_opacity — um controle deslizante de 0 a 100 em passos de 10, padrão 0. É a correção mais rápida para texto ilegível sobre uma foto carregada, e vem desligada.
image_behavior — 4 opções: none, ambient, fixed, zoom-in. Padrão none. Três das quatro animam ao rolar a página, o que consome trabalho da main thread exatamente no elemento que o navegador já está ocupado pintando.
desktop_content_position — 9 posições, uma grade 3×3 completa, padrão middle-center. Separada de desktop_content_alignment, que controla como o texto se alinha dentro dessa caixa.
show_text_below e show_text_box têm ambas o padrão true. A primeira move o texto para baixo da imagem no mobile em vez de sobre ela; a segunda desenha o contêiner sólido atrás do texto no desktop.
A seção aceita 3 tipos de bloco, com 1 arranjo predefinido:
| Tipo | Nome | Configurações |
|---|---|---|
heading | Heading | 2 |
text | Text | 2 |
buttons | Buttons | 8 |
O bloco buttons carrega 8 configurações porque contém dois botões completos: rótulo, link e uma checkbox de estilo secundário para cada um. Ambas as checkboxes de estilo vêm desligadas por padrão, o que significa que os dois botões são renderizados como primários — e é por isso que tantos banners do Dawn saem com duas chamadas para ação de aparência idêntica.
Tudo aqui está a um clique de distância. Abra sections/image-banner.liquid e desça até o bloco {% schema %} no final: esse JSON é a lista de configurações, com padrões e tudo. As alturas estão em assets/section-image-banner.css. As escadas de largura são declarações assign widths perto do topo da seção, nas linhas 34 e 40.
Se a Shopify lançar um novo release do Dawn, esses números podem mudar. Esta página indica a versão de onde foi lida exatamente por esse motivo.
3840px de largura para um banner com uma imagem. O Dawn monta um srcset de 9 larguras, de 375px a 3840px, portanto qualquer coisa mais larga é descartada e qualquer coisa mais estreita faz a maior entrada recorrer ao seu arquivo original. Se você usar os dois espaços de imagem, carregue 7680px em vez disso — é aí que a escada de duas imagens termina.
No desktop, as três opções fixas são 420px, 560px e 720px. Abaixo do breakpoint de 750px passam a ser 280px, 340px e 390px. A quarta opção, Adapt to first image, não tem altura fixa e segue a proporção da sua imagem.
As alturas do banner são definidas em rem, e o tamanho de fonte raiz do Dawn é calc(var(--font-body-scale) * 62.5%). Essa variável é a configuração de tamanho do texto do corpo do tema, com padrão 100%, ajustável até 130%. Aumentar o tamanho do texto escala com ele todas as alturas baseadas em rem, banners incluídos.
12 configurações na própria seção no Dawn v16.0.0, mais 3 tipos de bloco (heading, text e buttons) que somam outras 12 configurações entre eles.
Escurece a imagem atrás do seu texto. É um controle deslizante de 0 a 100 em passos de 10, e vem em 0, ou seja, desligado. É a correção mais rápida quando um título fica ilegível sobre uma foto carregada.