Las imágenes son una parte muy importante para tu tienda Shopify, la diferencia de conseguir una venta y no conseguirla puede estar en las fotografías que tengas en tu tienda online.
La buena calidad y el tamaño adecuado es probable que sea motivo de decisión en el momento de compra. O ¿comprarías por primera vez en una web dónde los productos se vieran mal o con un tamaño inadecuado?
Si te quieres enterar de cuál es la mejor manera de elegir el mejor formato para tus imágenes para Shopify no dejes de leer este post.
Cómo tener las imágenes ajustadas de los productos y colecciones con Object-fit en Shopify
Para la buena visualización de las imágenes de los productos de tu tienda de Shopify es importante tener en cuenta que cada fotografía del producto se vean correctamente alineadas, aunque hay que tener el peso lo más optimizado posible.
Todo esto lo podemos resolver con object-fit a través del código CSS.
Para ello deberemos seguir los siguientes pasos:
Paso 1: sección Online Store > Actions > Edit code.
Lo primero que tenemos que hacer una vez dentro de tu administrador de Shopify dirígete a la sección Online Store > Actions > Edit code.
Una vez dentro nos mostrarse las carpetas y archivos que conforman tu tienda online Shopify. Busca el archivo theme-style.scss.liquid (en algunos themes puede nombrarse diferente pero por lo general llevan un style.scss.liquid)
Paso 2: .product-image-container que incluya la propiedad img.
A continuación y ya tengamos localizado el archivo y estemos dentro del archivo theme-style.scss.liquid debes buscar la línea siguiente: .product-image-container y que incluya la propiedad img.
Paso 3: .product-image-container img y buscar la opción object-fit: cover
Para este último paso tendremos que tener algo de conocimientos básicos sobre CSS, si no tienes conocimientos te recomendamos que te pongas en contacto con un experto.
Por último, lo que tenemos es que editar la propiedad .product-image-container img y buscar la opción object-fit: cover;.
Y lo vamos a sustituir por el valor object-fit: container;. Debería de quedar algo como así.
Ahora guardamos los cambios y actualiza la página. Tus imágenes ahora se tienen que ver del mismo tamaño.
Si todo está correcto y podrás ver las imágenes de tus productos con las mismas medidas.
Ejemplos de imágenes en Shopify
Para las imágenes de tu web tienes que tener claro que hay que mantener una proporcionalidad igual en todas las partes de la web. Si se puede cambiar el tamaño entre diferentes secciones, no es lo mismo cuando ya estás dentro del producto, donde la imagen suele ser más grande a cuando estás en una categoría buscando productos.
Si bien es cierto que el tamaño máximo que te permite Shopify es de 2048px x 2048px o 4,2 megapixels, no te pide un mínimo en ningún momento, algo por lo que te tienes que preocupar para que el diseño de tus productos y de tu web no se vea afectado por la calidad de tus fotografías.
Formato que deben de tener las imágenes en Shopify
Las imágenes de productos se usan para mostrar productos en los canales de ventas de Shopify, incluso en la tienda online y en Shopify POS. El mejor tipo de archivo para la mayoría de las imágenes de productos es PNG, seguido de JPEG.
Otros tipos de archivo aceptados son PSD, TIFF, BMP, GIF, SVG, HEIC, y WebP.
El servicio Imagery de Shopify determina qué formatos de imagen son compatibles con el navegador web del cliente y luego muestra automáticamente la imagen en el mejor formato disponible. La forma exacta en que aparecen las imágenes en tu tienda depende del tema de tu tienda online, pero todos los temas admiten el agregado de imágenes.
El tamaño ideal de las imágenes de productos en Shopify puede variar, pero se recomienda seguir ciertas dimensiones para garantizar una buena presentación y rendimiento de la página. Aunque Shopify ajustará automáticamente algunas imágenes, es útil seguir estas pautas:
- Calidad y resolución: Utiliza imágenes de alta calidad y resolución para mostrar tus productos de manera nítida y atractiva. La calidad visual influye en la percepción del cliente sobre el producto.
- Tamaño de archivo optimizado: Asegúrate de que tus imágenes estén optimizadas para la web. Reducir el tamaño del archivo sin comprometer demasiado la calidad puede mejorar significativamente los tiempos de carga de la página.
- SEO: Usa nombres de archivo descriptivos y texto alternativo (alt text) relevante para mejorar la indexación en los motores de búsqueda y la accesibilidad para personas con discapacidad visual. Esto puede ayudar en el posicionamiento de tus productos en los resultados de búsqueda.
- Consistencia visual: Mantén una coherencia en el estilo y la calidad de las imágenes en toda tu tienda. Esto ayuda a fortalecer la identidad de marca y facilita una experiencia de compra más fluida para los clientes.
- Imágenes de múltiples ángulos o usos: Proporciona imágenes que muestren el producto desde diferentes ángulos o en diferentes contextos para que los clientes puedan tener una mejor comprensión del producto.
- Tiempo de carga: Las imágenes de alta resolución pueden ralentizar el tiempo de carga de la página. Utiliza herramientas para comprimir imágenes sin perder calidad para mantener un equilibrio entre la calidad visual y la velocidad de carga.
- Optimización para dispositivos móviles: Asegúrate de que las imágenes se vean bien y sean funcionales en dispositivos móviles. Esto incluye tener un diseño responsivo que se adapte a diferentes tamaños de pantalla.
- Galerías de imágenes y zoom: Considera la posibilidad de agregar funciones de galería de imágenes o zoom para permitir a los clientes ver los detalles del producto con mayor claridad.
- Directrices de plataforma: Verifica las directrices y recomendaciones específicas de Shopify para las imágenes, ya que la plataforma puede tener requisitos específicos o funcionalidades que puedes aprovechar para mejorar la presentación de tus productos.
El tamaño de las imágenes de producto en Shopify
Para las imágenes de tu web tienes que tener claro que hay que mantener una proporcionalidad igual en todas las partes de la web. Si se puede cambiar el tamaño entre diferentes secciones, no es lo mismo cuando ya estás dentro del producto, donde la imagen suele ser más grande a cuando estás en una categoría buscando productos.
Si bien es cierto que el tamaño máximo que te permite Shopify es de 2048px x 2048px o 4,2 megapixels, no te pide un mínimo en ningún momento, algo por lo que te tienes que preocupar para que el diseño de tus productos y de tu web no se vea afectado por la calidad de tus fotografías.
Nuestra recomendación para el tamaño de las imágenes de producto en Shopify es de 1024px x 1024px, para mantener el tamaño cuadrado y no perder calidad en ellas y así poder llevar un control y un orden en el que unos productos se vean más que otros y en el que se corten por algún motivo.
Quizá para algunos productos es mejor optar por fotos más horizontales o verticales. Por ejemplo, para una tienda de coches o de vestidos, puedes hacerlo, pero debes mantener la proporción en todas las fotos que estés usando para no crear un error en tu web a nivel visual.
Peso que deben tener las imágenes en Shopify
Para la buena usabilidad web y no sobrecargar en exceso tu tienda de Shopify es importante tener en cuenta que cada fotografía que subas debe tener el peso lo más optimizado posible.
Subir una imagen de 1MB, significa que cada usuario al entrar tiene que descargar ese MB para poder visualizar tu web y eso significa tiempo de carga, si tu web está llena de este tipo de fotos significa que podemos perder un cliente potencial simplemente por la lentitud en la carga.
El peso que deben tener las imágenes en Shopify es de no más de 100 Kbs y no menos de 50 Kbs, si tenéis una imagen de buena calidad con menos, mejor que mejor.
Tenemos escrito un post con las herramientas y la manera para optimizar las imágenes para Shopify o para cualquier web, por lo que tenéis todo lo necesario para realizar la correcta subida de imágenes.
Como conclusión, decir que es muy importante cuidar cada parte de tu web, pero sobre todo la visual, ya que por ella muchos compradores se deciden por una o por otra web. Por lo que tener en cuenta estos consejos de optimización y proporcionalidad en ellas es vital para marcar la diferencia.
El tamaño de las imágenes de producto en Shopify es tu primer contacto con el cliente, lo que primero ve, por lo que es crucial tener una homogeneidad durante toda la web para así poder conseguir una venta.
Para realizar estos cambios es importante tener algo de conocimientos básicos sobre edición de estilos (CSS), si no tienes conocimientos te recomendamos que te pongas en contacto con un experto, como NeoAttack.
