Correcto
Ajustes de diseño
Controla los anchos globales de tu tienda y el estilo de las esquinas para lograr un diseño más limpio y coherente.
Estos ajustes controlan la estructura general de tu tienda online, incluido hasta qué punto pueden crecer las áreas de contenido, hasta dónde se extienden los fondos de sección y lo redondeados que aparecen muchos elementos de la interfaz. Como afectan al tema globalmente, conviene usarlos para definir una dirección de diseño clara antes de ajustar en detalle las secciones individuales en el editor de temas
Todas las secciones todavía pueden ofrecer sus propios ajustes de ancho, así que piensa en este grupo como la base de diseño predeterminada. También puedes consultar la referencia relacionada de Diseño para obtener más orientación.
Controles principales del diseño
Sección titulada «Controles principales del diseño»Radio de borde
Sección titulada «Radio de borde»El radio de borde añade esquinas redondeadas a la mayoría de los elementos del frontend. Los valores más bajos crean un aspecto más definido y limpio, mientras que los valores más altos hacen que la tienda online se sienta más suave y expresiva.
Usa este ajuste como parte de tu estilo general de marca, no solo como un cambio decorativo. El mejor resultado suele venir de elegir un radio que se sienta natural en botones, tarjetas, campos de entrada y marcos de medios.
Ancho del contenido
Sección titulada «Ancho del contenido»El ancho del contenido define el ancho máximo principal del contenido del tema en pantallas grandes. Este es el ajuste principal de diseño y tiene el mayor impacto en cuán espaciosas o enfocadas se sienten tus páginas.
Un ancho más estrecho puede mejorar la legibilidad y crear un aspecto más editorial. Un ancho más amplio da más espacio a las cuadrículas de productos, las secciones de imágenes y el contenido promocional, pero los diseños muy amplios pueden hacer que las áreas con mucho texto sean más difíciles de revisar.
El editor puede hacer que los cambios de ancho parezcan más limitados de lo que son en la tienda online real. Comprueba la vista previa en vivo después de hacer cambios de diseño, especialmente en escritorio.
Ancho de sección
Sección titulada «Ancho de sección»El ancho de sección afecta principalmente a las secciones que usan un fondo. Controla si esos fondos se mantienen alineados con el ancho principal del contenido o si se extienden más para ofrecer una presentación más inmersiva.
Mantener los fondos de sección alineados con el contenido crea un marco ordenado y coherente. Los tratamientos de fondo más amplios pueden ayudar a que las promociones destacadas o las secciones centradas en imágenes destaquen, pero usarlos con demasiada frecuencia puede hacer que la página se sienta menos estructurada. Cuando dejas un fondo con su estilo predeterminado o transparente, normalmente conserva el estilo de respaldo circundante; añadir un color sólido, un degradado o un fondo basado en medios hace que esa área se sienta más independiente del resto de la página.
Cómo funcionan juntos estos ajustes
Sección titulada «Cómo funcionan juntos estos ajustes»Estos controles funcionan mejor como un solo sistema. El ancho del contenido define el marco principal para leer y navegar, el ancho de sección da forma a cómo las áreas de fondo se relacionan con ese marco y el radio de borde establece el tono de la interfaz. Para obtener una visión general más amplia de cómo se organizan las áreas del tema, consulta la documentación de Shopify sobre secciones y bloques
Un ancho de contenido contenido combinado con fondos ocasionalmente más amplios suele crear un diseño equilibrado que sigue sintiéndose dinámico. Si prefieres un aspecto más amplio, asegúrate de que tus imágenes, el espaciado y la longitud del texto puedan soportar esa escala adicional.
Notas de uso
Sección titulada «Notas de uso»- Define primero el marco global. Elige la dirección general del ancho antes de ajustar secciones individuales para que el tema se mantenga visualmente coherente.
- Previsualiza en la tienda online. Revisa los cambios de diseño fuera del editor para juzgar el espaciado y el ancho con mayor precisión.
- Protege la legibilidad. Evita diseños de contenido muy amplios si tus páginas dependen en gran medida de títulos largos, texto enriquecido o información detallada del producto.
- Usa los fondos amplios con intención. Reserva los tratamientos de sección más amplios para las áreas que se benefician de un mayor énfasis visual. Mantén los fondos predeterminados o transparentes cuando quieras que la sección se integre con el diseño circundante.
- Mantén una coherencia visual. Elige un radio de borde que coincida con tu marca para que los elementos comunes de la interfaz se perciban unificados.