Dimensiones banner de imagen Dawn

[Yorotaku]

Muy buenas Shopifyeros.

Estoy intentando poner un "Banner de imagen" en mi tienda y me estoy encontrando con ciertas dificultades.

Básicamente cada vez que subo una foto, en el banner aparece cortada y si le doy a la casilla de "Adaptar a la altura" la imagen se redimensiona y se hace mucho más estrecha.

Alguien sabría decirme las 3 dimensiones que permite la sección sin que se me llegue a cortar la imagen?

Utilizo el tema DAWN

Gracias de antemano.

[Teo · Accepted solution]

Hola, @Yorotaku:

Gracias por la respuesta. Lamento escuchar que las proporciones de banner de imagen que recomiendan desde el equipo de especialistas de TinyIMG no haya resultado. A continuación, daré respuesta a la cuestión que nos propones y compartiré contigo algunos consejos.

En relación con tu consulta sobre el apartado de las tres alturas diferentes de banner disponibles a través del editor del tema de tu tienda de Shopify, me alegra informarte de que tenemos un artículo en nuestra documentación en el que se especifican los tamaños de proporciones de las imágenes. Puedes echarle un vistazo en este enlace y te las comparto también a continuación:

• Pequeño: Computadora: 420 px, móvil: 280 px
• Mediano: Computadora: 560 px, móvil: 340 px
• Grande: Computadora: 720 px, móvil: 390 px

Dicho esto, para ofrecerte un poco más de contexto sobre la sección del banner de imagen de los temas de Shopify; es importante tener en cuenta que esta se ha construido de manera adaptativa para mostrar la mejor imagen posible. Por esto, es frecuente que se produzcan diferencias entre la visualización en ordenadores y móviles. No hay una forma de evitar el recorte de imágenes, por lo que es mejor trabajar con la configuración del tema para encontrar el aspecto que se desea.

Por otra parte, revisando este otro hilo de la Comunidad de Shopify en inglés, he visto varios usuarios colaborando para resolver esta cuestión. A algunos de los usuarios que han participado en el hilo les ha funcionado la configuración de una imagen cuadrada de 2048 x 2048 px. Dime, ¿has intentando probar con una imagen de este tamaño? Si es así y todavía sigue sin visualizarse el banner de la tienda de la manera que deseas, te recomendaría aplicar estos consejos:

• Asegurarte de que la imagen tiene vista de paisaje.
• Escoger una imagen con contenido relevante en el centro.
• No subir imágenes con texto.
• Probar con una base de 1200 px junto con las alturas recomendadas.

Entretanto, ¿cómo va el resto de cuestiones con tu tienda? ¿Has podido configurar el resto de secciones con el diseño que querías? Por otra parte, ¿también has podido comenzar a trabajar para mejorar la optimización para motores de búsqueda (SEO) con tu página web?

[Teo]

Hola, @Yorotaku:

Muchas gracias por escribirnos. Entiendo por tu mensajes que estás intentando configurar una imagen de banner dentro del tema Dawn de Shopify. Sin embargo, cada vez que la subes aparece cortada y cuando la ajusta se estrecha, ¿no es así? Estaré encantado de poder ayudar.

A modo de contexto, para poder establecer imágenes en tu tienda de forma efectiva, estas deben cumplir con los tamaños recomendados propios del tema Dawn. Para facilitar las cosas te dejo una guía de tamaños recomendados de imágenes para el tema Dawn. Este artículo pertenece a la plataforma de TinyIMG que son expertos en el ámbito de optimización de imágenes y SEO para las tiendas que se han creado con Shopify. Con todo, te dejo también estos tamaños a continuación:

• Imágenes de banner: 1600 x 1050 px
• Imágenes de blog: 720 x 1080 px
• Imágenes de productos: 700 x 700 px
• Imágenes de colección: 550 x 550 px

Para que el banner se visualice correctamente sin deformarse o estrecharse, la imagen debe tener el tamaño que recomiendan de 1600 x 1050 px. Además, como habrás podido observar al momento de configurarla, se recomienda utilizar una imagen con una relación de aspecto 3:2. Te dejo un enlace con más información para entender la proporción de aspecto de una imagen.

Dicho esto, ¿podrías confirmarme si la imagen que estás subiendo cumple con los tamaños y la proporción que te comento? Mientras tanto y como alternativa, si estás teniendo dificultades para configurar las imágenes; siempre puedes optar por contratar a un experto de Shopify. Este es un portal de especialistas y desarrolladores que pueden darte un presupuesto para cualquier tipo de configuración o modificación que necesites realizar o implementar en tu tienda.

Mientras tanto, me pregunto cómo está siendo tu experiencia con Shopify. Dime, ¿está la tienda pública de cara a los clientes? Si es así, ¿qué tipo de productos o servicios ofreces? ¿También has podido hacer uso de la herramienta de informes de Shopify? En caso de que así sea, ¿has analizado como van las estadísticas de sesiones, conversiones, ventas, etc. con tu negocio?

[Yorotaku]

Hola  @Teo 

El tamaño de proporción en ancho si que lo cumplía que son los 1600px, el problema que tenía es que el alto del tamaño optimo no lo sabía y no lo encontraba por ninguna parte, por ende siempre se me recortaba o redimensionaba, habiéndome facilitado las dimensiones proporcionales para cada sección podré trabajar de forma más eficiente respecto a la calidad y formato de las imagenes.

Muchas gracias!

[Yorotaku]

@Teo he probado a usar el tamaño de proporción recomendado y aún así, se recorta la imagen, además en la visualización desde el PC queda un banner demasiado grande y empequeñece los demás elementos de forma visual, de las 3 opciones que da la sección de forma predeterminada para el apartado de Altura del Banner las cuales son "Pequeña", "Mediana" y "Grande", no hay alguna forma en las que se pueda saber las medidas proporcionales a cada opción??

Gracias.

[Teo · Accepted solution]

Hola, @Yorotaku:

Gracias por la respuesta. Lamento escuchar que las proporciones de banner de imagen que recomiendan desde el equipo de especialistas de TinyIMG no haya resultado. A continuación, daré respuesta a la cuestión que nos propones y compartiré contigo algunos consejos.

En relación con tu consulta sobre el apartado de las tres alturas diferentes de banner disponibles a través del editor del tema de tu tienda de Shopify, me alegra informarte de que tenemos un artículo en nuestra documentación en el que se especifican los tamaños de proporciones de las imágenes. Puedes echarle un vistazo en este enlace y te las comparto también a continuación:

• Pequeño: Computadora: 420 px, móvil: 280 px
• Mediano: Computadora: 560 px, móvil: 340 px
• Grande: Computadora: 720 px, móvil: 390 px

Dicho esto, para ofrecerte un poco más de contexto sobre la sección del banner de imagen de los temas de Shopify; es importante tener en cuenta que esta se ha construido de manera adaptativa para mostrar la mejor imagen posible. Por esto, es frecuente que se produzcan diferencias entre la visualización en ordenadores y móviles. No hay una forma de evitar el recorte de imágenes, por lo que es mejor trabajar con la configuración del tema para encontrar el aspecto que se desea.

Por otra parte, revisando este otro hilo de la Comunidad de Shopify en inglés, he visto varios usuarios colaborando para resolver esta cuestión. A algunos de los usuarios que han participado en el hilo les ha funcionado la configuración de una imagen cuadrada de 2048 x 2048 px. Dime, ¿has intentando probar con una imagen de este tamaño? Si es así y todavía sigue sin visualizarse el banner de la tienda de la manera que deseas, te recomendaría aplicar estos consejos:

• Asegurarte de que la imagen tiene vista de paisaje.
• Escoger una imagen con contenido relevante en el centro.
• No subir imágenes con texto.
• Probar con una base de 1200 px junto con las alturas recomendadas.

Entretanto, ¿cómo va el resto de cuestiones con tu tienda? ¿Has podido configurar el resto de secciones con el diseño que querías? Por otra parte, ¿también has podido comenzar a trabajar para mejorar la optimización para motores de búsqueda (SEO) con tu página web?

[yoelmezacosta · Accepted solution]

Resumen de lo que me funciono en mi caso fue:
Agregar una imagen de Banner 1200px x 720px funciono perfecto en computadora y en el celular se cortaba y en la opción de "Altura del banner" coloque "Adaptar a la primera imagen" y funciono perfecto