Cómo corregir el tamaño de las imágenes en un menú de Shopify (Mega menú y menú lateral móvil)

Quick answer

Para corregir el tamaño de las imágenes en un menú, asigna a cada imagen la misma forma mediante CSS aspect-ratio, y luego elige object-fit: cover para llenar el contenedor (los bordes pueden recortarse) o contain para mostrar la imagen completa. Sube imágenes con un tamaño igual o mayor a su visualización y prueba el menú lateral móvil por separado.

1. Estandariza las imágenes de origen: Elige una proporción idéntica para toda la fila del menú.
2. Fuerza una forma con CSS: Aplica aspect-ratio y object-fit al selector de tu tema.
3. Detén los recortes en Dawn: Cambia las imágenes de fondo del mega menú a modo contain en escritorio.
4. Corrige imágenes borrosas: Sube archivos preparados para pantallas de alta densidad y valida las rutas.
5. Revisa el menú lateral móvil: Audita los selectores del cajón móvil y sus niveles anidados en teléfonos.

Why menu images end up uneven, cropped or blurry

Antes de modificar estilos, verifica si tu menú de navegación lo genera directamente tu tema de Shopify o una aplicación de menús instalada. Los temas y las aplicaciones estructuran el código HTML de manera distinta; aplicar CSS sobre una clase incorrecta no producirá ningún cambio visible.

Los problemas de visualización en imágenes de menú suelen deberse a tres causas concretas:

Cuando un contenedor no tiene una proporción explícita, los navegadores muestran cada imagen a su altura natural. Una fotografía vertical junto a una miniatura cuadrada hace que la fila del menú quede desalineada. En cambio, los temas con marcos rectangulares fijos recortan los extremos de las fotos cuadradas. Diagnosticar con precisión el síntoma te ayuda a aplicar la regla correcta.

Este vídeo muestra cómo se añaden imágenes a un mega menú desplegable; úsalo como contexto de dónde empieza el problema de tamaño.

Step 1: Standardize your source images

La solución más duradera consiste en estandarizar las proporciones de tus archivos antes de subirlos a Shopify. Como indica la documentación de Shopify sobre imágenes de temas, «debes usar la relación de aspecto de imagen correcta» para que los elementos se muestren uniformes en el diseño.

Elige una proporción única para todas las imágenes que compartan fila en tu mega menú:

• Cuadrada (1:1): Ideal para tarjetas de colecciones, miniaturas de producto y cuadrículas simétricas.
• Horizontal (como 3:2 o 16:9): Muy adecuada para banners promocionales o tarjetas de estilo editorial.

Exporta todas las imágenes de esa fila exactamente en la misma proporción. Sube archivos cuyas dimensiones físicas en píxeles igualen o superen el espacio en el que se verán en pantallas de escritorio. Para pantallas de alta densidad (como Retina), genera archivos que dupliquen las dimensiones del marco.

Evita dimensiones fijas universales recomendadas en foros sin contexto. El ancho de las columnas varía entre temas, por lo que no existe una medida exacta para todas las tiendas. Además, según la documentación de filtros Liquid de Shopify, «una imagen nunca se puede redimensionar para que sea mayor que sus dimensiones originales.» Subir archivos pequeños causará borrosidad al expandirse.

Step 2: Force one shape with aspect-ratio and object-fit

Concept illustration: las mismas imágenes de menú con object-fit cover y contain.

Si tu catálogo ya contiene imágenes con proporciones desiguales y no puedes volver a exportarlas de inmediato, utiliza CSS para forzar dimensiones homogéneas. La propiedad CSS moderna aspect-ratio, documentada por MDN Web Docs, «te permite definir la relación de aspecto deseada para la caja de un elemento.»

Añade esta regla en el campo de CSS personalizado de tu tema o en tu hoja de estilo principal:

/* Sustituye .your-menu-selector img por el selector exacto de tu tema */
.your-menu-selector img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

Nota: Sustituye .your-menu-selector img por la clase que utilice tu tema activo.

En este código, width: 100% cubre todo el ancho de la columna, aspect-ratio: 1 / 1 fija el contenedor como un cuadrado perfecto y object-fit: cover llena el marco. El comportamiento de object-fit determina cómo encaja la foto cuando difiere del marco, según la especificación de MDN Web Docs:

Cómo encontrar el selector adecuado en tu tema

Como los selectores CSS varían en cada tema de Shopify, identifica la clase específica de tu cabecera:

1. Abre tu tienda online en tu navegador de escritorio.
2. Pasa el cursor sobre el menú para desplegar el mega menú.
3. Haz clic derecho sobre la imagen desalineada y selecciona Inspeccionar.
4. En las DevTools, localiza el elemento <img> o su contenedor padre y lee el nombre de su clase. El nombre cambia de un tema a otro.
5. En el panel de Shopify, ve a Tienda online > Temas, pulsa Acciones > Duplicar como respaldo y luego Personalizar.
6. Pega tu CSS en el ajuste Custom CSS de tu tema si lo tiene, o al final de la hoja de estilos principal del tema (por ejemplo base.css en Dawn).

Step 3: Stop cropping in the Dawn mega menu

El tema Dawn de Shopify confunde a los comerciantes porque, en el hilo de la comunidad que aparece abajo, las imágenes del mega menú se dibujan como imágenes de fondo CSS en lugar de etiquetas <img>. En ese caso la regla object-fit del Step 2 no les afecta.

En una discusión de la comunidad de Shopify sobre el tamaño de las imágenes del mega menú de Dawn, la solución sugerida es cambiar el fondo a background-size: contain para que se vea la imagen completa en lugar de recortarse. Es un ejemplo de la comunidad, no una guía oficial de Shopify, y el hilo no confirma que resolviera el problema.

Para probar el mismo enfoque en el mega menú de escritorio de Dawn, el hilo sugiere añadir este código al final de tu archivo 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;
  }
}

Ten en cuenta dos aspectos técnicos clave:

1. Identificadores propios de cada tienda: El selector #MegaMenu-Content-2 corresponde a un ID generado para un elemento concreto. Tu tienda puede tener otro número según la posición del enlace. Verifica siempre el ID correcto mediante el inspector.
2. Alcance de la media query: Esta regla está dentro de @media screen and (min-width: 767px), así que solo se aplica a pantallas más anchas y no arregla el menú lateral móvil, que se trata en el Step 5.

Este vídeo muestra la estructura de un mega menú con imágenes en Dawn para comprender el contexto antes de redimensionar.

Step 4: Fix blurry menu images

Una imagen nítida en escritorio puede verse borrosa en pantallas de alta resolución o móviles. En los hilos de soporte de Shopify sobre imágenes borrosas en mega menús, este problema suele originarse por dos causas principales:

Causa 1: Las dimensiones del archivo original son menores que el contenedor

Cuando la imagen de origen tiene menos píxeles que su contenedor, los navegadores la estiran para llenar el espacio. Según la documentación de Liquid de Shopify sobre imágenes, «una imagen nunca puede redimensionarse a un tamaño mayor que sus dimensiones originales». Las pantallas de móvil de alta densidad hacen que esto se note más. Como explica web.dev de Google, «los descriptores de densidad se usan para servir imágenes distintas según la densidad de píxeles del dispositivo». Como regla general, sube imágenes de origen de aproximadamente el doble del tamaño con que se muestran.

[!WARNING] No uses object-fit: none para arreglar el desenfoque. En el hilo de la comunidad dejó las imágenes del menú en su tamaño bruto y perdieron su forma en lugar de resolver el problema.

Causa 2: El menú continúa mostrando un archivo antiguo en caché

Cuando reemplazas una imagen, el menú puede seguir usando la anterior. En el mismo hilo de la comunidad, la explicación fue que la imagen nueva era un .png pero seguía usándose un .gif antiguo. Haz clic derecho en la imagen, elige Abrir imagen en una pestaña nueva e inspecciona la URL en la barra de direcciones. Si aparece un nombre de archivo antiguo, actualiza la imagen en su origen para que el menú apunte al archivo nuevo.

Step 5: Check mobile and the menu drawer

Concept illustration: una corrección del mega menú de escritorio junto a un menú lateral móvil que necesita su propia comprobación.

Un descuido frecuente al arreglar las imágenes de navegación es probar solo en pantallas de escritorio. Las reglas CSS dentro de una media query solo para escritorio no llegan a los paneles deslizantes del móvil. Además, los temas suelen usar un marcado y unas clases totalmente distintos para su menú lateral móvil.

En el tema Dawn de Shopify, por ejemplo, el menú lateral móvil usa .menu-drawer__menu. Los selectores pueden variar según la versión del tema, así que inspecciona siempre tu propio tema. Si solo apuntas a clases de escritorio, tu menú móvil seguirá mostrando filas desiguales o miniaturas recortadas.

Para asegurar una correcta experiencia en teléfonos:

• Revisa submenús anidados: Abre el menú móvil y despliega niveles secundarios para confirmar que las miniaturas no ocupan todo el ancho indebidamente.
• Prueba distintos anchos: Usa el modo dispositivo de las DevTools para probar anchos estrechos de teléfono, o comprueba directamente en un teléfono real.
• Configura menús independientes: Si tu menú móvil requiere una estructura distinta a la cabecera, define menús separados para escritorio y móvil para que los cambios no interfieran entre sí.

Common mistakes (fixed widths, wrapped labels)

Al forzar el tamaño de las imágenes del menú, es fácil cometer cuatro errores habituales de maquetación:

1. Establecer anchos rígidos en píxeles o porcentajes

En un hilo de la comunidad de Shopify sobre el redimensionado de imágenes del menú, una solución sugerida fijaba un ancho de 18% en cada elemento del menú, un valor ligado al tema de esa tienda. Los anchos fijos pueden romper el salto de columnas cuando cambia el número de elementos. Aplica width: 100% a la imagen y deja que el contenedor de la columna reparta el ancho.

2. No considerar los textos que saltan a dos líneas

Aunque todas las imágenes sean cuadrados idénticos, una fila parecerá torcida si los nombres de las categorías ocupan varias líneas. Si un elemento tiene dos líneas de texto y el contiguo solo una, la base de las tarjetas quedará a distinta altura. Para alinear el contenido, conviene cambiar el estilo de tu menú de navegación igualando márgenes y tamaños tipográficos.

3. Abusar de la instrucción !important

Añadir !important a las reglas de imagen puede anular las clases adaptables del tema, impidiendo que el menú lateral funcione bien en pantallas pequeñas. Si deseas reajustar proporciones, es mejor modificar el tamaño de todo el menú mediante los ajustes de contenedor en vez de forzar cada imagen con declaraciones agresivas.

4. Modificar código del tema sin copia de seguridad

Editar base.css directamente en un tema publicado entraña riesgos. Un pequeño fallo de sintaxis puede desconfigurar toda la tienda. Duplica siempre el tema antes de hacer modificaciones CSS para poder restaurarlo al instante si surge algún problema.

Trade-offs: cover vs contain vs re-uploading

Cada solución para corregir las dimensiones de las imágenes de menú implica ciertas ventajas e inconvenientes prácticos:

Asimismo, las reglas CSS añadidas a mano pueden perderse al actualizar el tema a una versión principal. Si vas a estructurar un menú extenso con imágenes, asegúrate de elegir el tipo de menú adecuado según la complejidad de tu tienda.

When to stop hand-writing CSS: setting image ratio in a menu app

Si prefieres no mantener reglas CSS manuales en cada actualización de tema, una aplicación de menús con opciones integradas de proporción permite lograr el mismo resultado desde un panel visual.

En Navi+, el ajuste Image ratio (auto-crop) permite fijar proporciones homogéneas sin editar código. Puedes elegir entre cuatro modos de visualización:

• Unchanged (Por defecto): Mantiene la proporción original con la que se subió cada imagen.
• 1:1 square: Ajusta todas las imágenes en cajas perfectamente cuadradas.
• 3:2 landscape: Crea un marco rectangular horizontal armonioso.
• 2:3 portrait: Genera una presentación vertical con estética de tarjeta editorial.

Este ajuste es muy flexible: puedes definir una proporción global para todo el menú, asignar un formato específico a los submenús de nivel 2 o 3, o activar Unchanged en un elemento individual para no aplicarle el recorte heredado.

La app aplica de forma automática las propiedades estándar aspect-ratio y object-fit: cover a los elementos indicados sin necesidad de volver a cargar los archivos. También dispone de una herramienta de recorte manual al subir imágenes para encuadrar la zona focal deseada.

[!NOTE] El ajuste automático de proporción solo afecta a los elementos de Imagen grande (Big image) y Banners de imagen (Image banner) en mega menús de escritorio, mega menús móviles y cajones móviles. Los iconos pequeños no se recortan para preservar su forma. Este ajuste no mejora archivos de baja calidad; las imágenes de origen deben cumplir los requisitos descritos en el Step 4.

Si quieres recrear un diseño de menú a partir de una imagen de referencia, los controles de proporción integrados reducen el parcheo manual de CSS. En Navi+ eliges una vez 1:1 cuadrado o 3:2 horizontal y todas las imágenes grandes del menú lo siguen — pruébalo primero en una copia de tu menú.

Action checklist

Usa esta lista de comprobación de siete puntos para revisar y corregir las imágenes de tu menú:

• Identifica el origen del menú: Comprueba si el menú proviene del tema de Shopify o de una app instalada.
• Elige una proporción unificada: Selecciona un formato (como 1:1 cuadrado o 3:2 horizontal) para toda la fila.
• Prepara las imágenes de origen: Exporta los archivos a la proporción elegida, con tamaño igual o superior al contenedor.
• Localiza el selector CSS: Usa la opción Inspeccionar del navegador para dar con la clase asignada a las imágenes.
• Aplica aspect-ratio y object-fit: Añade las reglas en el panel de CSS personalizado o en tu hoja de estilos.
• Verifica las URL de imagen: Asegúrate de que el menú carga archivos actuales y no versiones antiguas en caché.
• Comprueba el menú móvil: Confirma que las imágenes del cajón móvil se muestran nítidas y bien encuadradas.

FAQ

¿Por qué las imágenes de mi mega menú tienen tamaños distintos?

Las imágenes de un mega menú se ven con tamaños diferentes cuando los archivos originales tienen proporciones variadas y el tema maneja la altura de forma automática. Al no haber una regla fija de proporción o altura, cada marco se adapta al tamaño del archivo cargado.

¿Por qué se recortan las imágenes de mi menú?

Una imagen de menú se corta cuando su contenedor tiene una proporción diferente a la de la foto y utiliza object-fit: cover o un fondo en modo cover. Esta regla llena el espacio recortando los bordes que sobresalen; cambiar a contain permite ver toda la imagen sin cortes.

¿Por qué las imágenes se ven nítidas en ordenador pero borrosas en móvil?

Las imágenes se aprecian borrosas en móvil cuando el marco de visualización supera el tamaño en píxeles del archivo original o cuando el tema carga una miniatura antigua en baja resolución. El CDN de Shopify no amplía fotos por encima de su tamaño original, por lo que las imágenes pequeñas se pixelan en pantallas de alta densidad.

¿Qué tamaño de imagen debo subir?

Sube imágenes que alcancen al menos las dimensiones en píxeles con las que se visualizan en pantallas de escritorio. Para lograr la máxima nitidez en pantallas modernas de alta densidad, exporta los archivos con el doble de tamaño que su contenedor.

¿Puedo hacer que todas las imágenes del menú sean cuadradas sin tocar el código del tema?

Sí, si tu menú de navegación se crea con una app que incluya un ajuste de proporción de imagen. Por ejemplo, Navi+ tiene un ajuste Image ratio que aplica una proporción cuadrada 1:1 a las imágenes grandes y los banners de imagen de un menú mediante CSS, sin editar el código del tema ni volver a subir imágenes.

Sources

• MDN Web Docs: Documentación de CSS object-fit (Estándar técnico sobre ajuste de cajas de imagen)
• MDN Web Docs: Documentación de CSS aspect-ratio (Estándar técnico para la relación de aspecto)
• Documentación para desarrolladores de Shopify: Filtro Liquid image_url (Límites de la plataforma en el redimensionado de imágenes)
• Centro de ayuda de Shopify: Imágenes del tema y proporciones de aspecto (Guía oficial para la homogeneidad visual en tiendas)
• Google Web Developers: Publicación de imágenes adaptables (Densidad de píxeles y descriptores de resolución)
• Comunidad de Shopify: Solución a imágenes borrosas en mega menús (Thread 363359) (Ejemplo práctico de la comunidad; debate no oficial)
• Comunidad de Shopify: Personalizar tamaño de imágenes en mega menú Dawn (Thread 255590) (Ejemplo práctico de la comunidad; debate no oficial)
• Comunidad de Shopify: Cambiar tamaño y posición de imágenes en mega menú (Thread 182414) (Ejemplo práctico de la comunidad; debate no oficial)
• Comunidad de Shopify: Alineación y tamaño de imagen en mega menú (Thread 146397) (Ejemplo práctico de la comunidad; debate no oficial)