Un usuario de Shopify busca solucionar problemas de márgenes en su tienda (langosmoda.es), donde el contenido aparece pegado a los bordes de la pantalla sin espacios laterales.
Problema inicial:
Soluciones intentadas:
Resolución final:
El usuario solucionó el problema editando el código del archivo section-main-page.liquid, agregando margin: auto auto; en la sección de media query para pantallas mayores a 750px. Aunque le tomó 6 días, logró centrar el contenido y distribuir el espacio sobrante entre ambos márgenes.
Tema utilizado: Crave 5.0.1
Consulta adicional: Otro usuario pregunta cómo hacer que la descripción del producto use todo el ancho de página al trabajar solo con imágenes.
Tengo una web con shopify y es langosmoda.es y por mucho que me esfuerzo no logro que en la seccion donde se muestran los contenidos (preds, paginas…) de la pagina se deje un espacio a derecha y a izquierda para evitar que el contenido este pegado a los margenes y consecuencia al margen de la pantalla.
¿podria alguien decirme como lo hago?
lo he probado todo
Hola, @iLOTNA-aCOR :
Muchas gracias por escribirnos. Entiendo por tu mensaje que te gustaría implementar márgenes a la izquierda y derecha de la sección donde se muestran los contenido de la página, ¿cierto? Estaré encantado de poder ayudar y arrojar algo de luz sobre esta cuestión que nos propones.
Por una parte, cuando haces referencia a la sección de contenidos de la página, ¿te refieres al encabezado de la tienda con las listas de productos o las secciones dentro de la páginas de tu tienda? Por otra parte, ¿podrías confirmarme el tema que estás usando? Puedes revisar esta información a través de Tienda online > Temas > Personalizar. Si haces clic en los tres puntos en la esquina superior izquierda, podrás revisar el propio nombre del tema y del desarrollador.
Si se trata de un tema desarrollado por Shopify, cabe mencionar que estos son adaptativos. Esto es, nuestras plantillas están construidas para adaptarse a los márgenes de las pantallas. Aun así, es posible modificar y ajustar el aspecto del tamaño de elementos como el logo, el espaciado inferior, el ancho, etc. a través del editor de temas. Para ello, puedes dirigirte dentro de la sección anterior al apartado Configuración del tema > Diseño > Ancho de página. Dime, ¿podrías confirmarme si has intentado ajustar el tamaño de las páginas a tu gusto desde esta sección?
Si esta modificación no se ajusta a lo que buscas, siempre puedes optar por editar el código de la plantilla. Para proceder, te recomendaría contactar con nuestros especialistas de soporte a través de este enlace con tu consulta. Esto se debe a que es posible que nuestros especialistas del equipo de temas puedan llevar a cabo esta personalización del código de tu tienda por ti. Si tu cuenta de Shopify cumple con los requisitos de la política de diseño de Shopify, puedes usar hasta 60 minutos del servicio sobre diseño gratuito, usado en incrementos de 15 minutos.
Dicho esto, si es un tema desarrollado por un proveedor externo a Shopify, te recomendaría revisar la documentación del desarrollador o contactar con ellos; ya que podrán darte un mayor contexto sobre cómo hacer el cambio. El hecho de contactar con ellos se debe a que el código de dicho tema no desarrollado por Shopify está fuera de nuestro conocimiento. Te dejo un enlace con más información sobre dónde encontrar ayudar para tu tema que estás usando en tu tienda.
Como alternativa, ya sea que el tema de tu tienda haya sido desarrollado por Shopify o por un proveedor externo; me alegra informarte de que siempre puedes optar por contratar a un experto de Shopify para llevar a cabo esta acción. Este es un portal de especialistas y desarrolladores que pueden darte un presupuesto para cualquier tipo de modificación o personalización que necesites.
Mientras tanto, me pregunto cómo está siendo tu experiencia con Shopify hasta el momento. Dime, ¿has podido configurar los productos de tu tienda de la manera que deseabas? ¿Qué objetivos a corto y largo plazo te gustaría conseguir con tu negocio y con Shopify? ¿Tienes en mente desarrollar algún tipo de campaña o estrategia de marketing para potenciar tus ventas?
gracias por contestar… lo que me gustaria poder dejar no ajustado al margen de la pantalla es todo lo que sale en el centro de la web es decir el contenido de la propia web, lo que sale al pinchar en las opciones del pie de pagina y de otros, pues no lo logro.
lo del pie de pagina son paginas estaticas y no logro darle margen a derecha y a izquierda. Es decir ahora las paginas se me quedan a pantalla completa y es eso lo que no quiero
¿puedes ayudarme?
lo de pagar a un experto seria la opcion correcta pero creo que para este retoque aqui lo puedo hallar y no necesito molestar a un experto que tendra cosas mas complicadas que solventar
tu me dices que has deducido que quierp poner imagenes a derecha e izquierda de mi contenido pero no es asi yo lo unico que deseo es que ese contenido no se quede pegado al margen de la pagina por ende de la pantalla.
Hola, @iLOTNA-aCOR :
Gracias por la respuesta y aclaración. Revisando con más detenimiento tu consulta, es posible que lo que esté causando que los márgenes de las páginas estén al borde de la pantalla sea la propia configuración de la escala de la tipografía de tu tienda. Para ello, ¿podrías confirmarme los valores que actualmente tienes configurados? Si bajas estos valores, ¿el margen del contenido de las páginas se aleja de la esquina de la pantalla? Puedes revisar esto con los siguientes pasos:
Para facilitar las cosas, te dejo una captura de pantalla de mi tienda de prueba con la imagen de cómo se muestra esta sección de configuración dentro del editor de temas de Shopify:
Si ajustando la escala de tamaño de fuente del título y el cuerpo sigue sin solucionarse esta cuestión, sería de gran ayuda que me confirmases el nombre del tema que tienes instalado en tu tienda. Como te comentaba en mi respuesta anterior, puedes revisar esta información a través de la sección de Tienda online > Temas > Personalizar. Si haces clic en los tres puntos en la esquina superior izquierda, podrás revisar el propio nombre del tema y del desarrollador.
Si se trata de un tema desarrollado por Shopify, puedes instalar un nuevo tema gratuito y publicarlo de manera temporal para ver si los márgenes se muestran correctamente. Para publicar el tema, una vez instalado, haz clic en Acciones > Publicar. No hay de qué preocuparse, una vez hecha esta comprobación, podrás volver a publicar tu tema actual siguiendo los mismos pasos.
¿Podrías confirmarme si esta cuestión se soluciona con alguna de las alternativas que te comento? Si no es así, ¿desde cuándo ha ocurrido esta cuestión con los márgenes? ¿Has instalado alguna aplicación o has hecho cambios en el código del tema desde que ocurre esto? Por otra parte, ¿cómo va el resto de cuestiones con tu tienda? ¿Has podido hacer uso de la herramienta de informes de Shopify? Si es así, ¿cómo van las estadísticas de sesiones, conversiones y ventas?
Buenas:
con tu respuesta se ha solucionado lo del margen derecho pero no lo del margen izquierdo… ahora solo faltaria que ese espacio que ha salido a la derecha se pudiese repartir entre margen derecho y izquierdo…
… en cuanto al tema que uso te dire que creo que es el Crave 5.0.1 perodado que shopify permite cambiar el nombre al tema mi tema se cambio de nombre para que se llame igual que la pagina.
En fin, eso es todo espero tu respuesta… como frase aclaratoia y que resuma lo que quiero es que el contenido de la web y el contenido de la cabecera tengan mismo ancho (aunque solo sea visualmente e internamente sea diferente pero visualmente que sea igual)
Apreciado Teo:
Eres el mejor y me has ido dando ayudas que he ido implementando… he conseguido solucionar el problema en toda la web excepto en pagina estaticas que ahora por ahora se ven todoas pegadas al margen izquierdo de la pantalla o tamaña de la web.
espero que tu o otra persona pueda ayudarme.
ahora solo se trataria de centrar esas paginas para que se despegen del marghen izquierdo y el espacio sobrannte quede repartido a izquierda y derecha.
gracias
Hola, @iLOTNA-aCOR :
Muchas gracias por la respuesta. Me alegra escuchar que, con los consejos que te compartía en mis respuestas anteriores, has podido solucionar la cuestión de los márgenes de la tienda en diferentes secciones de la página web. En relación con la cuestión de las páginas estáticas, ¿podrías darme un mayor contexto sobre el tipo de páginas de tu tienda a las que te refieres?
Te comento esto porque he tenido la oportunidad de navegar por tu página web y visitar diferentes secciones y páginas de la tienda. Con todo, también he podido comprobar que en todas aparecen los márgenes correctamente establecidos. Te dejo el ejemplo de la página “quiénes somos” de tu tienda y cómo se muestran los márgenes en estos momentos desde mi navegador web:
Si desde tu navegador siguen sin visualizarse los márgenes correctamente, te recomendaría crear una nueva plantilla y asignarla a estas páginas. Así, es posible que se solucione esta cuestión con los márgenes. Para crear una nueva plantilla, puedes seguir los siguientes pasos que te facilito:
Una vez hecho esto, habrás creado una nueva plantilla para tu tienda con éxito. Seguidamente, podrás asignar las plantillas a tus páginas. Para ello, puedes seguir estos pasos:
Mientras tanto, ¿has podido comenzar a trabajar para mejorar la optimización para motores de búsqueda (SEO)? Por otra parte, ¿actualmente utilizas alguno de nuestros canales de venta para promocionar y vender tus productos en plataformas alternativas, aparte de tu web?
A toda la comunidad y en especial a TEO : Gracias por el tiempo que habeis dedicado a mi problema…
Ya lo he solucionado y dire como: revisando el codigo de punta a punta, leyendo muchas lineas y tras eso llegando a la conclusion que un simple margin: auto auto; colacado en el codigo de la pagina section-main-page.liquid lo solucionaba
Donde Ponia
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
lo he dejado asi
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
margin: auto auto;
y se ha solucionado… se que a gente mas profesional comoes el caso de Teo le hubiera costado unas horas y acmi me ha llevado de calle 6 dias pero por algo se empiza para aprender.
GRACIAS A TODOS Y MUCHISIMO MAS A TEO
Teo buenas tardes, disculpa tengo el problema de que quiero qeu la descripcion de el producto use todo el ancho de la pagina ya que estoy usando solo imagenes podrias ayudarme? por mas que intento no quiere usarla he usado varios codigos pero creo que ha yalgo que no deja Gracias.!
