Configuración de diseño

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Shopify sobre la personalización de secciones

Videos útiles

Vídeo de Shopify Academy: personalización de su tienda

Vídeo de Shopify Academy: personalización de su tienda

Use estos ajustes para controlar cómo se muestra el contenido repetido en escritorio, tableta y móvil. Puede elegir una cuadrícula o una presentación para cada tamaño de dispositivo y luego ajustar cuántos elementos aparecen a la vez para adaptarlo a su contenido y al espacio de la pantalla. Para obtener una visión general más amplia de cómo se organizan los componentes del tema, consulte documentación de Shopify sobre secciones y bloques

Estilo de diseño

El estilo de diseño controla si los elementos aparecen en una cuadrícula fija o en una presentación deslizable. Esto le da flexibilidad para mostrar más elementos a la vez en pantallas grandes, al tiempo que mantiene las pantallas pequeñas más fáciles de explorar.

1. Elija Grid cuando los clientes deban comparar varios elementos uno al lado del otro.
2. Elija Slideshow cuando cada elemento necesite más atención o cuando el espacio sea limitado.
3. Combine estilos por dispositivo si es necesario. Una cuadrícula en escritorio y una presentación en móvil suele ser una combinación práctica.

Elija el estilo de diseño y el número de columnas juntos. Las cuadrículas densas funcionan mejor con contenido simple, mientras que las presentaciones suelen necesitar menos elementos visibles y más espacio por tarjeta.

Cantidad de columnas

La cantidad de columnas controla cuántos elementos aparecen en cada fila para cada tamaño de dispositivo. Los valores más altos aumentan la densidad de navegación, pero también reducen el espacio disponible para imágenes, títulos, precios y detalles de apoyo.

1. En desktop, las cantidades de columnas más altas pueden funcionar bien para tarjetas compactas y una navegación amplia por los elementos.
2. En tablet, una cantidad independiente le ayuda a evitar diseños que se sientan demasiado ajustados en pantallas de tamaño intermedio.
3. En mobile, las cantidades más bajas suelen ser más fáciles de leer y tocar.

Si la cantidad de columnas de tablet está configurada en 0, las pantallas de tablet usan en su lugar el ajuste de columnas de escritorio. Esto es útil cuando desea un diseño coherente para pantallas grandes, pero conviene comprobar que las tarjetas de tablet sigan teniendo suficiente espacio.

Consejo

Si las tarjetas de los elementos se ven recargadas, reduzca la cantidad de columnas antes de cambiar el tamaño del texto u ocultar detalles. El espacio horizontal adicional suele mejorar la claridad con mayor rapidez.

Cómo elegir la densidad adecuada

El mejor diseño depende de cuánta información necesite mostrar cada elemento. Las tarjetas simples, centradas en la imagen, pueden admitir diseños más densos, mientras que las tarjetas con mucho texto o muchos detalles suelen necesitar más espacio.

1. Use menos columnas para títulos más largos, varias etiquetas, precios o metadatos adicionales.
2. Use más columnas para diseños de lectura rápida con poco texto.
3. Use diseños de presentación cuando quiera que los clientes se concentren en un elemento a la vez en lugar de recorrer una fila completa.

Notas de uso

1. Empiece por el tamaño del contenido. Elija la cantidad de columnas en función de cuánto texto e imágenes necesite mostrar cada elemento con comodidad.
2. Compruebe la tableta por separado. Heredar la cantidad de columnas de escritorio puede ahorrar tiempo, pero los diseños para tablet a menudo necesitan su propio ajuste.
3. Mantenga el móvil táctil. Evite diseños móviles que hagan que las tarjetas sean demasiado estrechas o que los objetivos táctiles sean demasiado pequeños.
4. Use la presentación de forma intencionada. Elija la presentación cuando la atención importe más que mostrar el máximo número de elementos a la vez.
5. Conserve el aspecto predeterminado cuando quiera un estilo de respaldo. Los valores en blanco, transparentes o con estilo predeterminado suelen mantener la apariencia heredada, mientras que los colores explícitos, los degradados o las anulaciones de medios hacen que esa área se sienta más independiente. Para ver detalles de configuración en el editor de temas, consulte documentación de Shopify sobre la personalización de secciones