Correcto
Ajustes de imagen
Controle en un solo lugar el estilo, el tamaño, el recorte, el diseño en móvil y los enlaces de la imagen.
Use estos ajustes para controlar cómo se ve, encaja y se comporta una imagen dondequiera que este grupo de imágenes esté disponible. Puede elegir la imagen, ajustar su forma y ancho, definir cómo se recorta en escritorio y en móvil, y, opcionalmente, hacerla clicable. Para una vista general más amplia de cómo se editan los ajustes del tema, consulte la documentación de Shopify sobre el editor de temas
Para un resumen visual de estos controles, consulte la referencia de ajustes de imagen.
Selección de imagen
Sección titulada «Selección de imagen»Empiece eligiendo una imagen que ya se adapte al espacio que ocupará. Un archivo ancho funciona mejor para banners y diseños horizontales, mientras que las imágenes cuadradas o en formato retrato suelen resultar más naturales en áreas de contenido más estrechas.
Si su imagen incluye texto, logotipos o un sujeto encuadrado de forma ajustada, revísela de nuevo después de cambiar los ajustes de relación de aspecto. El recorte puede eliminar detalles importantes cerca de los bordes.
Forma y ancho
Sección titulada «Forma y ancho»El estilo de imagen cambia la presentación general de la imagen. Use el estilo predeterminado para un aspecto neutro, esquinas redondeadas para un tratamiento visual más suave o un círculo cuando la imagen esté centrada y sea lo bastante simple como para funcionar dentro de un marco circular.
El ancho máximo de imagen controla cuán grande puede aparecer la imagen dentro del espacio disponible. Establecerlo en 0 permite que la imagen se expanda hasta todo el ancho disponible, lo que resulta útil para áreas visuales grandes. Los valores más bajos ayudan a que las imágenes sean más compactas y equilibradas junto al texto u otro contenido.
Relación de aspecto
Sección titulada «Relación de aspecto»La relación de aspecto controla la forma del marco de la imagen. Mantenerla en Default preserva las proporciones naturales de la imagen, mientras que las relaciones fijas crean un diseño más coherente entre distintas imágenes.
Use relaciones fijas cuando quiera que varias imágenes se alineen de forma ordenada o cuando quiera un ritmo visual más deliberado. Las relaciones apaisadas y panorámicas son adecuadas para imágenes amplias, mientras que las relaciones cuadradas y en formato retrato pueden dar un aspecto más estructurado a áreas de contenido más pequeñas.
Las relaciones de aspecto fijas pueden recortar la imagen por cualquier lado. Si el punto focal está cerca de un borde, previsualice el resultado antes de publicarlo.
Relación en móvil
Sección titulada «Relación en móvil»La relación de aspecto para móvil le permite ajustar la forma de la imagen para pantallas más pequeñas sin cambiar la presentación en escritorio. Esto es útil cuando un recorte amplio en escritorio queda demasiado plano o incómodo en teléfonos.
Si deja la opción móvil en Default, se usa la relación de aspecto principal. Elija una relación móvil independiente cuando la imagen necesite más espacio vertical o un recorte más simple en pantallas pequeñas.
Enlaces de imagen
Sección titulada «Enlaces de imagen»Puede añadir un enlace para que la imagen sea clicable, lo que resulta útil para gráficos promocionales, contenido destacado o elementos visuales de marca que deban llevar a un lugar específico. Las imágenes enlazadas funcionan mejor cuando el destino resulta obvio por el contenido cercano.
Use la opción de abrir en una nueva pestaña solo cuando mejore la experiencia de navegación, como en destinos externos. Para la mayoría de la navegación interna, abrir en la misma pestaña resulta más natural.
Notas de uso
Sección titulada «Notas de uso»- Elija la imagen de origen adecuada. Empiece con una imagen que ya coincida con el diseño previsto para que necesite un recorte menos agresivo.
- Equilibre el tamaño con los controles de ancho. Ajuste el ancho máximo cuando una imagen parezca demasiado grande en lugar de depender solo de los cambios de relación de aspecto.
- Revise los recortes en móvil. Compruebe por separado las pantallas más pequeñas, especialmente cuando la imagen de escritorio sea ancha o contenga detalles focales importantes.
- Compare los ajustes de escritorio y móvil. Revise ambos tamaños de viewport cuando cambie las opciones de recorte, alineación, visibilidad o medios, ya que pueden producir resultados distintos en pantalla.
- Conserve el estilo de reserva cuando sea necesario. Deje valores en blanco, transparentes o de estilo predeterminado cuando quiera que el área de la imagen mantenga el aspecto y el comportamiento integrados del tema.
- Use las anulaciones de forma intencional. Elija colores, degradados o medios alternativos explícitos solo cuando quiera que el área local de la imagen destaque frente al contenido circundante.
- Proteja el contenido clave. Evite las relaciones fijas para imágenes con texto de borde a borde, logotipos o un encuadre ajustado, a menos que haya confirmado que el recorte funciona bien.