Quick answer
Para corrigir o tamanho de imagens em um menu, aplique a mesma proporção a todas com a propriedade CSS aspect-ratio e escolha object-fit: cover para preencher o espaço (as bordas podem ser cortadas) ou contain para exibir a foto completa. Envie arquivos de origem pelo menos do tamanho da área exibida e teste a gaveta móvel separadamente.
- Padronize as imagens de origem: Escolha uma única proporção para toda a linha do menu.
- Imponha um formato via CSS: Aplique
aspect-ratioeobject-fitao seletor do seu tema. - Impeça cortes no tema Dawn: Altere as imagens de fundo do mega menu para contain no desktop.
- Corrija imagens embaçadas: Envie arquivos para telas de alta densidade e confirme os links.
- Verifique a gaveta móvel: Inspecione os seletores do menu lateral e subitens em celulares.
Why menu images end up uneven, cropped or blurry
Antes de alterar folhas de estilo, certifique-se de que seu menu de navegação é gerado diretamente pelo tema da Shopify ou por um aplicativo instalado. Temas e apps criam estruturas HTML diferentes; inserir regras CSS na classe errada não produzirá nenhum efeito visível.
Problemas de exibição em imagens de menu geralmente decorrem de três causas:
| Sintoma | Causa provável | Solução neste guia |
|---|---|---|
| Alturas de imagem desiguais | As imagens têm proporções diferentes e as caixas usam altura automática. | Step 1 & Step 2 |
| Fotos de produtos cortadas | A proporção da caixa difere da imagem, com regras cover ou fundos CSS. |
Step 2 & Step 3 |
| Imagens borradas ou pixeladas | O arquivo original é menor do que a área da tela ou o menu chama um asset antigo. | Step 4 |
Quando uma caixa de imagem não possui uma proporção explícita, os navegadores exibem cada foto com sua altura nativa. Uma foto vertical ao lado de uma miniatura quadrada desalinha a linha de navegação. Já os temas que impõem caixas retangulares fixas cortam o topo e a base de fotos quadradas. Identificar o sintoma exato permite aplicar a regra correta.
Este vídeo mostra como imagens são adicionadas a um mega menu suspenso; use-o como contexto de onde nasce o problema de tamanho.
Step 1: Standardize your source images
A forma mais consistente de evitar desalinhamentos é padronizar a proporção das imagens antes de enviá-las para a Shopify. Como destaca a documentação da Shopify sobre imagens de temas, «você precisa usar a proporção de imagem correta» para que os elementos fiquem alinhados nos layouts.
Adote uma única proporção para todas as imagens de uma mesma linha do menu:
- Quadrada (1:1): Perfeita para coleções, miniaturas de produtos e grades simétricas.
- Paisagem (como 3:2 ou 16:9): Excelente para banners promocionais ou cartões editoriais largos.
Exporte todas as fotos dessa fileira rigorosamente no mesmo formato. Envie arquivos cujas dimensões físicas em pixels igualem ou superem a área ocupada na tela do computador. Para telas de alta densidade (como monitores Retina), gere arquivos com o dobro das dimensões do contêiner.
Evite seguir números fixos aleatórios sugeridos em fóruns. Como as larguras de colunas mudam de tema para tema, não existe um tamanho universal em pixels. Além disso, de acordo com a documentação do filtro Liquid image_url da Shopify, «uma imagem nunca pode ser redimensionada para além de suas dimensões originais.» Enviar arquivos pequenos resultará em fotos borradas ao serem esticadas.
Step 2: Force one shape with aspect-ratio and object-fit
Concept illustration: as mesmas imagens de menu com object-fit cover e contain.
Se a sua loja já possui imagens com proporções heterogêneas e você não pode reexportá-las de imediato, use CSS para forçar dimensões harmônicas. A propriedade moderna aspect-ratio, documentada pelo MDN Web Docs, «permite que você defina a proporção desejada de largura e altura da caixa de um elemento.»
Insira esta regra no painel de CSS personalizado do seu tema ou na folha de estilos principal:
/* Substitua .your-menu-selector img pelo seletor exato do seu tema */
.your-menu-selector img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
Nota: Substitua .your-menu-selector img pela classe utilizada no seu tema ativo.
Nesse trecho, width: 100% preenche a largura da coluna, aspect-ratio: 1 / 1 trava a caixa em um quadrado perfeito e object-fit: cover preenche o quadro. O comportamento do object-fit define como a foto se ajusta em caso de proporções divergentes, de acordo com o MDN Web Docs:
| Valor da propriedade | Comportamento segundo a norma MDN | Resultado visual | Caso de uso ideal |
|---|---|---|---|
object-fit: cover |
«Se a proporção do objeto não corresponder à de sua caixa, ele será cortado para caber.» | Preenche totalmente a caixa; as bordas excedentes são eliminadas. | Ideal para linhas de mega menu alinhadas onde as bordas externas devem ser retas. |
object-fit: contain |
«O objeto exibirá barras laterais caso sua proporção não coincida com a da caixa.» | Mostra a imagem inteira sem cortes; deixa faixas vazias nas laterais ou no topo. | Recomendado quando a silhueta inteira de um produto ou logotipo não pode ser cortada. |
object-fit: fill |
«Este é o valor inicial. O objeto inteiro preencherá completamente a caixa.» | Estica ou esmaga a imagem para forçar o preenchimento do quadro. | Deve ser evitado em menus por distorcer o aspecto físico dos produtos. |
Como encontrar o seletor correto no seu tema
Como cada tema da Shopify usa classes próprias, localize a classe exata do seu cabeçalho:
- Abra sua loja virtual no navegador do computador.
- Posicione o cursor sobre o menu para abrir o painel do mega menu.
- Clique com o botão direito na imagem desalinhada e selecione Inspecionar.
- Nas DevTools, localize o elemento
<img>ou o contêiner pai e leia o nome da classe. O nome muda de tema para tema. - No admin da Shopify, acesse Loja virtual > Temas, clique em Ações > Duplicar como backup e depois em Personalizar.
- Cole o CSS na configuração Custom CSS do seu tema, se ele tiver uma, ou no final da folha de estilo principal do tema (por exemplo
base.cssno Dawn).
Step 3: Stop cropping in the Dawn mega menu
O tema Dawn da Shopify confunde lojistas porque, no tópico da comunidade abaixo, as imagens do mega menu são desenhadas como imagens de fundo CSS em vez de tags <img>. Nesse caso, a regra object-fit do Step 2 não as afeta.
Em uma discussão da comunidade Shopify sobre o tamanho das imagens no mega menu do Dawn, a correção sugerida é trocar o fundo para background-size: contain, para que a imagem inteira apareça em vez de ser cortada. É um exemplo da comunidade, não uma orientação oficial da Shopify, e o tópico não confirma que tenha resolvido o problema.
Para testar a mesma abordagem no mega menu desktop do Dawn, o tópico sugere adicionar este código no final do arquivo base.css:
/* Adapted from a community thread: verify the panel ID and selector in your own theme */
@media screen and (min-width: 767px) {
#MegaMenu-Content-2 li:before {
/* contain shows the whole image; empty bands may appear */
background-size: contain !important;
background-position: center;
}
}
Preste atenção a dois detalhes essenciais:
- Identificador próprio da loja: O seletor
#MegaMenu-Content-2reflete um ID específico de um link. Sua loja pode exibir outro número de acordo com a posição daquele item no menu. Inspecione sua página para confirmar o seletor exato. - Alcance da media query: Esta regra está dentro de
@media screen and (min-width: 767px), então vale apenas para telas mais largas e não corrige o menu lateral mobile, tratado no Step 5.
Este vídeo demonstra como um mega menu com imagens é estruturado no Dawn para oferecer contexto antes do redimensionamento.
Step 4: Fix blurry menu images
Uma imagem que parece nítida no monitor pode ficar visivelmente embaçada ou pixelada em telas de alta resolução ou no celular. Nas orientações de suporte da Shopify sobre imagens desfocadas em mega menus, esse problema é provocado por duas causas:
Causa 1: Dimensões da imagem de origem menores do que o contêiner
Quando a imagem de origem tem menos pixels que o contêiner, os navegadores a esticam para preencher o espaço. Segundo a documentação Liquid da Shopify sobre imagens, “uma imagem nunca pode ser redimensionada para um tamanho maior que suas dimensões originais”. Telas de celular de alta densidade deixam isso mais visível. Como explica o web.dev do Google, “descritores de densidade são usados para servir imagens diferentes conforme a densidade de pixels do dispositivo”. Como regra prática, envie imagens de origem com cerca do dobro do tamanho em que são exibidas.
[!WARNING] Não use
object-fit: nonepara corrigir o desfoque. No tópico da comunidade, ele deixou as imagens do menu no tamanho bruto e elas perderam a forma, em vez de resolver o problema.
Causa 2: O menu continua chamando uma imagem antiga em cache
Ao substituir uma imagem, o menu pode continuar usando a antiga. No mesmo tópico da comunidade, a explicação foi que a imagem nova era um .png, mas um .gif antigo ainda estava em uso. Clique com o botão direito na imagem, escolha Abrir imagem em nova guia e inspecione a URL na barra de endereços. Se aparecer um nome de arquivo antigo, atualize a imagem na origem para que o menu aponte para o arquivo novo.
Step 5: Check mobile and the menu drawer
Concept illustration: uma correção do mega menu desktop ao lado de um menu lateral mobile que precisa de verificação própria.
Um descuido frequente ao corrigir imagens de navegação é testar apenas no desktop. Regras CSS dentro de uma media query exclusiva para desktop não chegam aos painéis deslizantes do mobile. Além disso, os temas costumam usar marcação e classes totalmente diferentes para o menu lateral mobile.
No tema Dawn da Shopify, por exemplo, o menu lateral mobile usa .menu-drawer__menu. Os seletores podem variar entre versões do tema, então inspecione sempre o seu próprio tema. Se você mirar apenas classes de desktop, o menu mobile continuará mostrando linhas irregulares ou miniaturas cortadas.
Para assegurar uma boa visualização no celular:
- Examine submenus aninhados: Abra a gaveta móvel e expanda os níveis secundários para checar se as miniaturas não se expandem de forma desproporcional.
- Teste larguras diferentes: Use o modo de dispositivo das DevTools para testar larguras estreitas de celular, ou verifique diretamente em um celular real.
- Separe a navegação móvel: Se o menu em celulares exigir um design específico, configure menus separados para desktop e mobile para evitar que alterações visuais entrem em conflito.
Common mistakes (fixed widths, wrapped labels)
Ao tentar alinhar fotos em menus, lojistas costumam esbarrar em quatro falhas de formatação:
1. Fixar larguras rígidas em pixels ou porcentagens
Em um tópico da comunidade Shopify sobre redimensionar imagens do menu, uma correção sugerida fixava a largura de 18% em cada item do menu, valor ligado ao tema daquela loja. Larguras fixas podem quebrar a quebra de linha das colunas quando o número de itens muda. Aplique width: 100% à imagem e deixe o contêiner da coluna distribuir a largura.
2. Desconsiderar títulos que quebram em duas linhas
Mesmo com fotos quadradas idênticas, a linha parecerá torta se os títulos dos itens quebrarem linha. Se um item tiver texto em duas linhas e o próximo apenas uma, a base das caixas ficará desalinhada. Para corrigir o alinhamento, recomenda-se mudar o estilo do seu menu de navegação ajustando espaçamentos e tamanhos de fonte.
3. Usar a diretiva !important em excesso
Adicionar !important a regras de imagens pode sobrepor classes responsivas do tema, impedindo a gaveta móvel de se adaptar a telas menores. Se for preciso ajustar a proporção visual, vale mais ajustar o tamanho do menu inteiro por meio de seus contêineres principais do que forçar cada tag de imagem isoladamente.
4. Editar o código do tema sem backup preventivo
Mexer diretamente em base.css no tema publicado oferece riscos. Um pequeno erro de código pode impactar a exibição da loja inteira. Duplique sempre o tema antes de adicionar códigos CSS para poder reverter qualquer instabilidade com agilidade.
Trade-offs: cover vs contain vs re-uploading
Cada solução para harmonizar as fotos em menus envolve compromissos práticos distintos:
| Abordagem | Principal benefício | Limitação fundamental | Melhor aplicação |
|---|---|---|---|
object-fit: cover |
Garante caixas quadradas ou retangulares idênticas sem precisar reexportar arquivos. | Corta as extremidades externas das fotos. Imagens panorâmicas perdem detalhes laterais. | Ideal para fotos ambientadas ou capas de coleções em geral. |
object-fit: contain |
Exibe 100% da foto original sem qualquer tipo de corte. | Cria faixas vazias nas bordas ao redor de imagens com formatos incompatíveis. | Essencial para calçados, bolsas ou peças cujo contorno integral seja indispensável. |
| Reenviar imagens tratadas | Enquadramento limpo desde a origem, sem sobrescritas de CSS. | Exige esforço manual de tratamento e exportação para todo o catálogo. | Excelente para coleções de destaque e consolidação da identidade visual da marca. |
Lembre-se também de que regras inseridas manualmente no tema podem ser removidas durante atualizações de versão. Se for criar um menu amplo com fotos, certifique-se de escolher o tipo de menu ideal para comportar o porte do seu catálogo.
When to stop hand-writing CSS: setting image ratio in a menu app
Se preferir não ficar ajustando seletores CSS a cada atualização de tema, um aplicativo de menu com opções nativas de proporção entrega o mesmo acabamento de forma visual e simples.
No Navi+, o recurso Image ratio (auto-crop) possibilita definir formatos uniformes sem a necessidade de editar código. Você tem quatro modos à disposição:
- Unchanged (Padrão): Conserva a proporção natural do arquivo enviado.
- 1:1 square: Enquadra todas as imagens como quadrados precisos.
- 3:2 landscape: Gera um formato retangular horizontal balanceado.
- 2:3 portrait: Aplica uma proporção vertical com estética editorial.
Essa configuração atua de modo escalonado: você pode fixar uma proporção para o menu completo, atribuir uma regra a submenus de nível 2 ou 3, ou definir Unchanged em um item para retirar o corte herdado.
O aplicativo aplica regras CSS consagradas como aspect-ratio e object-fit: cover diretamente aos elementos designados sem requerer novos uploads. Também há uma ferramenta opcional de recorte manual no upload para que você determine o ponto de foco.
[!NOTE] A proporção automática se aplica apenas a itens do tipo Imagem grande (Big image) e a Banners de imagem (Image banner) nos mega menus de desktop, mega menus móveis e gavetas móveis. Ícones pequenos de menu não sofrem cortes para preservar seus desenhos. Esse recurso não restaura arquivos de baixa qualidade; as fotos originais devem atender às exigências listadas no Step 4.
Se você quer recriar um design de menu a partir de uma imagem de referência, os controles de proporção integrados reduzem o remendo manual de CSS. No Navi+, você escolhe uma vez 1:1 quadrado ou 3:2 paisagem e toda imagem grande do menu o segue — teste primeiro em uma cópia do seu menu.
Action checklist
Acompanhe esta lista de conferência em sete etapas para verificar e consertar fotos de menu na sua loja:
- Identifique a base do menu: Confirme se o menu é gerado pelo tema da Shopify ou por um app instalado.
- Defina a proporção padrão: Estabeleça um formato fixo (como 1:1 quadrado ou 3:2 horizontal) para a fileira.
- Prepare os arquivos originais: Salve as fotos na proporção pretendida, com tamanho igual ou maior que a tela.
- Localize a classe CSS: Use o Inspecionar do navegador para identificar a classe aplicada às fotos.
- Aplique aspect-ratio e object-fit: Adicione as propriedades no CSS personalizado ou no arquivo do tema.
- Valide os links das fotos: Confira se o menu está carregando os arquivos recentes e não versões antigas em cache.
- Teste a gaveta móvel: Verifique se as fotos no menu do celular estão nítidas e com alinhamento uniforme.
FAQ
Por que as imagens do meu mega menu têm tamanhos diferentes?
As imagens do mega menu exibem tamanhos divergentes quando os arquivos enviados têm proporções variadas e o tema utiliza caixas com altura automática. Sem uma regra de proporção ou altura determinada, cada caixa se adapta à medida natural da sua respectiva imagem.
Por que as imagens do meu menu estão cortadas?
Uma imagem de menu fica cortada quando a proporção da caixa é diferente da foto original e está associada a object-fit: cover ou fundos em modo cover. A propriedade cover preenche o contêiner aparando as sobras; selecionar contain exibe a foto integralmente sem corte algum.
Por que as fotos ficam nítidas no computador e embaçadas no celular?
As fotos parecem desfocadas em celulares quando a caixa na tela é maior do que o tamanho do arquivo original ou quando o tema fornece uma miniatura antiga de baixa qualidade. Como a CDN da Shopify nunca amplia imagens além de suas medidas originais, arquivos compactos perdem nitidez em telas de alta densidade.
Qual o tamanho recomendado para envio das fotos?
Envie imagens com dimensões em pixels no mínimo iguais ao tamanho da caixa onde serão exibidas na versão para computador. Para preservar uma nitidez cristalina em telas modernas de alta densidade, exporte os arquivos com o dobro das dimensões do contêiner.
É possível deixar todas as fotos quadradas sem editar o código do tema?
Sim, se o seu menu de navegação for criado com um app que tenha uma configuração de proporção de imagem. Por exemplo, o Navi+ tem uma configuração Image ratio que aplica via CSS uma proporção quadrada 1:1 às imagens grandes e aos banners de imagem de um menu, sem editar o código do tema nem reenviar as imagens.
Sources
- MDN Web Docs: Documentação de CSS object-fit (Padrão técnico para ajuste de caixas de imagem)
- MDN Web Docs: Documentação de CSS aspect-ratio (Especificação técnica para proporções de elementos)
- Documentação para desenvolvedores da Shopify: Filtro Liquid image_url (Limites da plataforma para redimensionamento de imagens)
- Central de Ajuda da Shopify: Imagens de temas e proporções de tela (Diretrizes oficiais para uniformidade visual na loja)
- Google Web Developers: Como disponibilizar imagens responsivas (Densidade de pixels e descritores de resolução)
- Comunidade Shopify: Como corrigir imagens embaçadas no mega menu (Thread 363359) (Exemplo real da comunidade; debate não oficial)
- Comunidade Shopify: Personalizar tamanhos de imagem no mega menu Dawn (Thread 255590) (Exemplo real da comunidade; debate não oficial)
- Comunidade Shopify: Redimensionar e posicionar imagens no mega menu (Thread 182414) (Exemplo real da comunidade; debate não oficial)
- Comunidade Shopify: Alinhamento e tamanho de fotos em mega menus (Thread 146397) (Exemplo real da comunidade; debate não oficial)
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.