Somos la agencia Shopify partner: Creamos, mejoramos y encontramos soluciones para tiendas en línea con Shopify -
- Somos los Shopify partners que te ayudarán a migrar de tu plataforma anterior a Shopify -
- Somos lo desarrolladores Shopify con toda la experiencia en soluciones en código -
- Somos los Shopify partners de soporte continuo y asesoramiento experto para asegurar que tu tienda Shopify funcione y se mantenga actualizada -
- Somos los Shopify Partners con soluciones innovadoras -
¿Tus imágenes de producto se ven deformes o de diferentes tamaños? ¿Quieres que esas imágenes se vean de un solo tamaño? ¿Quieres alinear las imágenes de tus productos a una sola medida? Entonces este blog post es para ti.
En ocasiones el theme que elegimos para crear una tienda online en Shopify no tiene la capacidad de ajustar las imágenes automáticamente y tenemos que editar el código CSS para que quede así:
Lo que vamos a hacer es ajustar las imágenes de los productos para que ocupen todo el espacio del contenedor y no se distorsionen, además queremos que la imagen se adapte según la resolución de la pantalla. Todo esto lo podemos resolver con object-fit a través del código CSS.
Importante: Para realizar las siguientes tareas debes tener conocimientos básicos en CSS, de otra forma te recomendamos
contactar a un experto en Shopify para que te ayude con los ajustes necesarios.
Las imágenes utilizadas en CSS pueden provenir de diversas fuentes: de los formatos de imágenes como GIF, JPEG, etc, formatos de marcado dedicados como SVG y formatos específicos de CSS. Estas imágenes y los objetos pueden ofrecer mucha información sobre su tamaño a CSS, o ninguna en absoluto.
En otras palabras la propiedad CSS
object-fit indica cómo el contenido de un elemento reemplazado, por ejemplo un <img> o <video>, debería redimensionarse para ajustarse a su contenedor.
Aquí te dejamos una explicación interactiva para que salgas de dudas.
Nivel de dificultad:
✭✭✭ Fácil
Tu primer tarea a realizar es entrar al editor de código de tu theme.
Deben 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)
Nivel de dificultad:
✭✭✭ Difícil
Importante: Para realizar las siguientes tareas debes tener conocimientos básicos en CSS, de otra forma te recomendamos
contactar a un experto en Shopify para que te ayude con los ajustes necesarios.
Una vez dentro del archivo theme-style.scss.liquid debes buscar la linea siguiente: .product-image-container y que incluya la propiedad img.
Te paso un ejemplo:
Si has logrado verificar ambos dominios continua al siguiente paso.
Nivel de dificultad:
✭✭✭ Difícil
Importante: Para realizar las siguientes tareas debes tener conocimientos básicos en CSS, de otra forma te recomendamos
contactar a un experto en Shopify para que te ayude con los ajustes necesarios.
Una vez que encontraste esa linea de código es momento para hacer magia.
Sigue los siguientes pasos.
Encuentra la siguiente propiedad:
.product-image-container img {
display: block;
width: 100%;
height: 200px;
object-fit: cover;
}
Sustituye
object-fit: cover; por
object-fit: container;
Te quedará algo asi:
.product-image-container img {
display: block;
width: 100%;
height: 200px;
object-fit: container;
}
Guardar los cambios y actualiza la página. Tus imágenes ahora se tienen que ver del mismo tamaño.
¡Listo! Si has llegado hasta aquí siguiendo todos los pasos entonces todo saldrá bien y podrás ver las imágenes de tus productos con las mismas medidas.
Hasta aquí mi reporte Joaquín. Volvemos contigo al estudio.