Remover margin-top

[Claudia1212]

Hace unos meses empecé a experimentar una anomalía en mi tienda en la página de colecciones.

Tengo páginas que en automático el margin-top sale sin alteraciones como esta:

https://sicurezza.pe/collections/calzones

Luego empezó a aparecer un problema que aparecía un extra de margin-top en mi página de colección. En su momento un usuario por el foro me recomendó que intenté remover el margin-top de algunas de mis colecciones con este código:

"custom_css": [
".template-collection main {margin-top: 0 !important;}"
],

Por ejemplo, en esta página de colecciones el código está funcionando perfecto:

https://sicurezza.pe/collections/pack-get-ready

Pero, desde el mes pasado he seguido intentando colocar este código  en mis páginas de colecciones sin éxito alguno. Por ejemplo, en esta página estoy empleando el mismo código y de igual manera sigue apareciendo el margen vacío al inicio de la colección:

https://sicurezza.pe/collections/calzones-classic

Agradezco su ayuda de antemano.

[Teo · Accepted solution]

Hola, @Claudia1212:

Gracias por escribirnos. Entiendo que algunas de tus páginas de colecciones se muestran con un margen adicional por encima del título. Algunos de estos márgenes se han eliminado correctamente con un código personalizado de CSS. Sin embargo, en otras colecciones sigue apareciendo, ¿cierto? Será un placer ayudar.

Antes de nada, la configuración de las páginas, secciones, márgenes, etc. puede variar en función del tema que estés usando en tu tienda. En este caso, ¿podrías confirmarme qué plantillas estás utilizando? Puedes revisar esta cuestión a través de la sección Tienda online > Temas > Personalizar. En esta página, haz clic en los Tres puntos que aparecen en la esquina superior izquierda para acceder al nombre del tema.

Si se trata de una plantilla desarrollada por Shopify; me alegra informarte de que contamos con un equipo de especialistas que pueden implementar personalizaciones por ti si cumples con la política de diseño. En este caso, lo ideal sería escribirnos a través del Centro de Ayuda para ajustar los márgenes por ti. Si usas una plantilla desarrollada por un proveedor externo, lo ideal sería contactar con su equipo de soporte para revisar si existe algún tipo de configuración adicional para ajustar los márgenes de las páginas de colecciones. Te dejo un enlace a nuestra documentación con información sobre encontrar ayuda para un tema.

Dicho esto, cabe tener en cuenta que las cuestiones sobre API, código Liquid, JavaScript o CSS complejas quedan fuera de nuestra capacidad de conocimiento. Ahora bien, revisando el código que nos compartes, es probable que este solo se esté aplicando a plantillas específicas y no a todas las de la tienda. Dime, ¿podrías confirmarme si actualmente usas diferentes plantillas para las distintas colecciones de tu página?

En este caso, te recomendaría ingresar el siguiente código CSS para ver si así se soluciona esta cuestión. Puedes añadir este código a través de la sección Tienda online > Temas > Personalizar. En esta página, haz clic en el Icono de engranaje de la izquierda y localiza el apartado CSS personalizado. Te dejo a continuación el código y un enlace a nuestra documentación sobre cómo funciona la herramienta de CSS personalizado:

.main-content {
 margin-top: 0 !important;
}

Dime, ¿podrías confirmarme si este código ayuda a eliminar los márgenes de esta sección? Si no es así, puedes comunicarte con nuestros especialistas o los desarrolladores de la plantilla. Alternativamente, tienes la opción de contratar a un Partner de Shopify. Este es un portal de expertos y desarrolladores que pueden darte presupuesto para cualquier tipo de personalización o revisión de código personalizado en tu tienda. Mientras revisas esto, ¿cómo va el resto de cuestiones con la configuración de tu tienda de Shopify?

[Claudia1212]

Hola Teo,

Tu solución no ha funcionado. Sigue el mismo problema.

Adjunto el link: https://sicurezza.pe/collections/calzones-classic

El margen top sigue siendo un problema.

[Teo]

Hola, @Claudia1212:

Gracias por la respuesta. A pesar de que nos comentas que la solución no ha funcionado; acabo de acceder de nuevo al enlace que nos compartes y he podido comprobar que el margen superior ya no aparece. Dime, ¿podrías confirmarme si finalmente has encontrado una solución alternativa? Te dejo una captura de pantalla de cómo aparece el diseño de margen superior en la página de la colección que nos envías:

 

Como puedes comprobar, el espacio del margen superior es igual que el del resto de colecciones que sí tenían el diseño que deseabas. Si has encontrado una resolución alternativa a las que te proponía en mi respuesta, sería de gran ayuda que la compartieras en un post dentro de este mismo hilo para ayudar a futuros comerciantes que puedan tener un problema/incidencia similar con sus tiendas de Shopify.

Si todavía te sigue apareciendo el margen superior, puesto que este ya no se muestra, es probable que tu navegador haya guardado la configuración de diseño anterior. En este caso, lo más recomendable sería eliminar el caché y cookies del navegador (Chrome - Safari) o intentar acceder a la tienda desde la navegación privada (Chrome - Safari). Dime, ¿podrías confirmarme si el margen desaparece siguiendo estos pasos?

Mientras revisas esto, ¿cómo está siendo tu experiencia con Shopify hasta el momento? ¿Has desarrollado algún tipo de estrategia de marketing con tu negocio? Si es así, ¿estás usando alguna herramienta nativa de Shopify para esta finalidad? ¿Qué objetivos a corto y largo plazo te gustaría conseguir con tu tienda?