Cambiar medidas fotos collage en tema Dawn

[DarleBCN]

Hola a todos! 

Me gustaría saber cómo puedo hacer para cambiar las medidas de las fotos en la sección collage del tema Dawn, especialmente el tamaño de la foto de la izquierda. Imagino que habría que tocar el código de esta sección pero no consigo saber cuál es. Que las fotos salgan tan grandes entorpece la navegación por la web, incluso reduciendo el tamaño de la pantalla, la imágenes siguen viéndose extremadamente grandes. 

A continuación adjunto una foto para que podáis ver a qué me refiero y el enlace a la web: https://darlebcnshop.es 

Muchas gracias! 

[DarleBCN]

Hola a todos! 

Hace unos días lo pregunté en otro hilo, pero no obtuve respuesta, a ver si podéis ayudar aquí.

Me gustaría saber cómo puedo hacer para cambiar las medidas de las fotos en la sección collage del tema Dawn, especialmente el tamaño de la foto de la izquierda. Imagino que habría que tocar el código de esta sección pero no consigo saber cuál es. Que las fotos salgan tan grandes entorpece la navegación por la web, incluso reduciendo el tamaño de la pantalla, la imágenes siguen viéndose extremadamente grandes. 

A continuación adjunto una foto para que podáis ver a qué me refiero y el enlace a la web: https://darlebcnshop.es

Muchas gracias! 

[Ann]

Hola @DarleBCN, 

Muchas gracias por escribirnos en los foros de la Comunidad. Entiendo que estás usando el tema Dawn y quieres saber cómo puedes reducir el tamaño de las fotos en la sección collage, ¿verdad?

Efectivamente, esta personalización requiere un cambio en el código del tema. Si te sientes cómodo, puedes seguir estos pasos y modificarlo tu mismo:

1. Desde el administrador de tu cuenta ve a Canales de venta > Tienda online > Temas > Tema actual.
2. Haz clic en los tres puntos y luego en Editar código.
3. Haz clic en Assets > collage.css y pega el siguiente código al final del archivo: 

@media (min-width: 310px) {
    .collage__item--left:nth-child(3n - 2) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    .collage__item--left:nth-child(3n - 1), 
    .collage__item--left:nth-child(3n) {
        grid-column-start: unset !important;
    }
}

Te muestro un ejemplo de cómo se ve la sección collage antes y después de la modificación, desde una tienda de prueba: 

ANTES:  

DESPUÉS:  

Es importante que antes de realizar cualquier modificación en los códigos del tema, hagas una copia de seguridad del tema. De esta forma, si los cambios no resultan como esperabas, tienes la opción de volver a la versión original de tu tema. 

En caso de que no te sientas cómodo realizando el cambio, te recomiendo contactar a nuestro equipo de soporte por correo electrónico y solicitarles soporte en esto. Aunque nos encantaría ayudarte, desde acá no tenemos acceso a cuentas específicas, por lo que nuestro equipo encargado podrá confirmar si es posible que te ayuden con esta personalización. 

Para que lo tengas en cuenta, nuestra política de diseño ofrece a nuestros comerciantes que usan un tema de Shopify y se encuentran en el plan Básico o uno superior, 60 minutos gratuitos de soporte técnico de diseño, los cuales son registrados en incrementos de 15 minutos. De ser aprobado tu requerimiento, se usará de tu tiempo de diseño para hacer el cambio.

Aproveché la oportunidad para revisar tu tienda y me encantó. Se ve ordenada, profesional y es fácil de navegar. Cuéntanos, ¿aún presentas problemas con la velocidad de la página? 

Por otro lado, quisiera preguntarte, ¿has tenido la oportunidad de revisar tus reportes de tráfico y conversiones? ¿Has podido cumplir con los objetivos de tu negocio?

[mktpolo]

Muchas gracias, Ann.

Es una solución aceptable en desktop, aunque lo sería más poder incluir más grids de producto (concrétamente 4) tipo esto:

No obstante, al aplicar los estilos que indicas en escritorio, en responsive se desconfigura. Imagino que habría que formatear también para dichas pantallas.

Un saludo.

[Ann]

Hola @mktpolo,

Gracias por escribirnos en los foros de la Comunidad. Entiendo que seguiste las instrucciones proporcionadas en el hilo anterior para reducir el tamaño de las imágenes en la sección Collage. Sin embargo, la solución no es efectiva para la versión móvil y además quisieras poder incluir al menos 4 productos en esta sección, ¿verdad?

Antes que nada quisiera confirmar, ¿también estás usando el tema Dawn o estás usando un tema distinto? 

A modo de contexto, debes saber que, por defecto, la sección de Collage permite agregar un máximo de 3 imágenes. Para modificar este número, es necesario editar el código del tema. Dicho esto, ¿cómo has agregado las 4 imágenes en tu tienda? ¿Has contratado a alguien para hacer esta personalización o tienes conocimientos de código y la has hecho tu mismo?

Por otro lado, dado que la mayoría de los temas de Shopify son responsivos, esto significa que tienen la capacidad para ajustar automáticamente el contenido y las imágenes de tu sitio web en función del tamaño de la pantalla y el dispositivo, con el fin de crear una mejor experiencia de usuario para tu página web. Dicho esto, si quieres modificar la forma como se muestran las imágenes en los dispositivos móviles, en efecto deberás hacer cambios en el código del tema. 

Con todo, si estás usando el tema Dawn u otro tema de Shopify, es posible que nuestro equipo técnico pueda prestarte soporte con esto. Dado que desde acá no tenemos acceso a cuentas específicas, te recomiendo contactar al equipo de soporte a través de nuestro Centro de Ayuda. Si te encuentras en el plan Básico o uno superior, eres elegible a 60 minutos de diseño. En caso de ser aprobados tus cambios, nuestro equipo encargado usará de tu tiempo de diseño para esto. 

En caso de que estés usando un tema externo, te recomiendo contactar a los desarrolladores del tema para solicitarles soporte. Como alternativa, puedes contratar a uno de los expertos de Shopify, los cuales son desarrolladores independientes que pueden ayudarte a personalizar tu tienda y adaptar distintas funcionalidades.

Por el momento, ¿cómo ha sido tu experiencia hasta el momento en Shopify? ¿Has tenido la oportunidad de revisar tus reportes de tráfico y conversiones?