Lista de colecciones

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre ajustes de diseño
3. Documentación de Company XYZ sobre ajustes de controles de presentación de diapositivas
4. Documentación de Company XYZ sobre ajustes de encabezados
5. Documentación de Company XYZ sobre ajustes de tarjetas
6. Documentación de Company XYZ sobre ajustes de espaciado de sección
7. Documentación de Company XYZ sobre ajustes de fondos de sección
8. Documentación de Shopify sobre la personalización de secciones
9. Documentación de Company XYZ sobre ajustes de separadores
10. Documentación de Company XYZ sobre ajustes de visibilidad
11. Documentación de Company XYZ sobre ajustes de ancho del diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Use esta sección para destacar colecciones seleccionadas como tarjetas visuales que ayudan a los compradores a navegar por categoría. Funciona especialmente bien en páginas de inicio, páginas de destino y páginas de campaña, donde quiere orientar a las personas hacia la parte adecuada de su catálogo.

Ajustes principales

Empiece seleccionando las colecciones que desea mostrar. Esta sección es mejor para el descubrimiento de colecciones y la navegación por categorías, en lugar de destacar productos individuales seleccionados a mano. Para obtener una visión general más amplia de cómo funcionan las secciones en el editor, consulte documentación de Shopify sobre secciones y bloques

Ajustes de diseño

Use los controles de diseño para elegir cuántas tarjetas de colección aparecen en escritorio, tablet y móvil, y si cada dispositivo usa una cuadrícula o una presentación. Consulte ajustes de diseño.

El ajuste de columnas para tablet puede heredar el recuento de columnas de escritorio cuando se deja en 0, lo que resulta útil si desea menos ajustes específicos por dispositivo. Si el diseño de escritorio se ve demasiado denso en pantallas de tamaño medio, establezca un valor para tablet de forma explícita en lugar de depender del diseño heredado.

Un diseño que se ve equilibrado en escritorio puede sentirse recargado en pantallas más pequeñas. A menudo es mejor reducir las columnas o cambiar el móvil a una presentación para facilitar la navegación.

Ajustes de presentación

Cuando un dispositivo usa un diseño de presentación, estos ajustes controlan cómo se mueve la sección y cómo navegan los compradores entre las tarjetas de colección. Consulte controles de presentación.

La animación de fundido crea una presentación más sencilla y centrada, pero también limita el diseño a una sola diapositiva visible a la vez y no muestra la paginación. Úsela cuando quiera una sensación promocional más limpia, no cuando resulte más importante revisar rápidamente varias colecciones.

La reproducción automática puede añadir movimiento, pero debe sentirse de apoyo y no distractora. Pausar al pasar el cursor es especialmente útil en escritorio para que los compradores puedan detener el movimiento mientras deciden dónde hacer clic.

Previsualizar la siguiente diapositiva puede hacer que la sección se sienta más interactiva, especialmente en dispositivos táctiles. Si desea un diseño más ordenado y contenido, desactive esa vista previa.

Ajustes de color de tarjeta

Use estos ajustes para anular los colores de tarjeta usados en otra parte del tema solo para esta sección. Esto resulta útil cuando la lista de colecciones necesita un aspecto promocional más marcado o cuando el fondo de la sección circundante requiere un contraste de tarjeta diferente.

Los controles de superposición del banner se aplican solo cuando usa el estilo de tarjeta Banner. Para otros estilos de tarjeta, céntrese en los colores de fondo, borde, encabezado y texto para mantener las tarjetas legibles y visualmente coherentes.

Ajustes de color

Estos controles anulan los colores del icono, el encabezado y el texto de apoyo de la sección. Son más útiles cuando añade un fondo personalizado de sección y necesita que el contenido del encabezado destaque con más claridad.

Mantenga un contraste fuerte del texto tanto con el fondo de la sección como con el área de tarjeta de abajo. Pequeños ajustes aquí pueden hacer que la sección se vea más pulida sin cambiar el diseño de la tarjeta en sí.

Ajustes estándar de sección

Ajustes de encabezado

Use los Ajustes de encabezado compartidos para añadir una introducción encima de las tarjetas de colección, incluyendo alineación, encabezado, leyenda, texto de apoyo y un botón opcional. Consulte Ajustes de encabezado.

Este es un buen lugar para explicar qué conecta las colecciones destacadas, como la temporada, el tipo de producto o el público previsto. Si añade un botón, úselo para un siguiente paso claro, como ver todas las colecciones o abrir una página de destino relacionada.

Ajustes de tarjeta

Use los Ajustes de tarjeta compartidos para controlar el aspecto de cada tarjeta de colección, incluido el estilo, la proporción de imagen, la visualización del texto, la alineación y el tratamiento del botón. Consulte Ajustes de tarjeta.

Estos ajustes anulan los valores predeterminados más amplios del tema solo para esta sección, lo que resulta útil cuando las colecciones destacadas necesitan una presentación diferente del resto del sitio. Las tarjetas Banner son más llamativas, mientras que los estilos acolchados más sencillos suelen ser más fáciles de revisar en cuadrículas grandes.

Nota

La alineación vertical del texto solo afecta a las tarjetas cuando está en uso el estilo de tarjeta Banner.

Ajustes de espaciado

Use los Ajustes de espaciado compartidos para ajustar el espacio encima y debajo de la sección. Consulte Ajustes de espaciado.

Más espaciado ayuda a que la lista de colecciones se sienta como un área de navegación diferenciada, mientras que un espaciado más reducido funciona mejor cuando complementa el contenido cercano. Compruebe el espaciado tanto en escritorio como en móvil para que la sección se vea equilibrada en contexto.

Ajustes de fondo de sección

Use los Ajustes de fondo de sección compartidos para añadir un color, degradado, imagen o vídeo detrás de la sección. Consulte Ajustes de fondo de sección.

Los fondos pueden hacer que la sección se sienta más editorial o orientada a campañas, pero también afectan a la legibilidad y al espaciado percibido. Si usa un fondo de imagen o vídeo, asegúrese de que el texto del encabezado siga teniendo suficiente contraste y use superposiciones cuando sea necesario. Para obtener detalles de configuración a nivel del editor, consulte documentación de Shopify sobre la personalización de secciones

Ajustes de separador

Use los Ajustes de separador compartidos para añadir una línea en la parte superior o inferior de la sección. Consulte Ajustes de separador.

Los separadores ayudan cuando esta sección se sitúa entre áreas de contenido visualmente similares y necesita un límite más claro. Mantenlos sutiles, salvo que desee una separación estructural más marcada.

Ajustes de visibilidad

Use los Ajustes de visibilidad compartidos para controlar si la sección aparece en escritorio, móvil o ambos. Consulte Ajustes de visibilidad.

Esto resulta útil cuando desea versiones separadas de la sección para distintos dispositivos, como una gran cuadrícula de escritorio y un deslizador móvil más sencillo. Si crea versiones específicas por dispositivo, mantenga alineadas las colecciones destacadas y el mensaje.

Ajustes de ancho

Use los Ajustes de ancho compartidos para controlar el ancho del contenido de la sección y el ancho externo de la sección. Consulte Ajustes de ancho.

Los anchos mayores admiten cuadrículas más grandes y más columnas, mientras que los anchos más estrechos pueden hacer que un conjunto más reducido de colecciones parezca más seleccionado. Si usa un fondo, previsualice los cambios de ancho en la tienda online en vivo, porque el encuadre del editor puede hacer que el espaciado se perciba de forma distinta a como se ve en la página.

Consejos de uso

1. Agrupe las colecciones con intención. Elija colecciones que compartan un tema claro para que la sección se sienta seleccionada y no como un directorio.
2. Adapte el diseño al objetivo. Use una cuadrícula para comparar rápidamente varias colecciones, y use una presentación cuando el espacio sea limitado o importe más la navegación táctil.
3. Mantenga las tarjetas fáciles de leer. Las superposiciones intensas, los colores personalizados y los estilos Banner funcionan mejor cuando el texto sigue siendo claro sobre las imágenes de la colección.
4. Añada contexto útil en el encabezado. Un encabezado breve y un texto de apoyo conciso pueden hacer que las colecciones destacadas sean más fáciles de entender de un vistazo.
5. Compruebe todos los tamaños de pantalla. Las columnas, el comportamiento de la presentación y las opciones de ancho pueden sentirse muy diferentes entre escritorio, tablet y móvil.
6. Revise con cuidado los recursos específicos del dispositivo. Las imágenes separadas para escritorio y móvil pueden cambiar el recorte, la carga, el comportamiento de reserva y la legibilidad.
7. Trate el contenido de navegación como flujo de clientes. Los enlaces reordenados, ocultos o solo para móvil pueden cambiar a qué pueden acceder los compradores desde la sección.