Lista de colecciones - Principal

Enlaces destacados

1. Documentación de Shopify sobre plantillas
2. Documentación de Shopify sobre secciones y bloques
3. Documentación de Company XYZ sobre ajustes de encabezados
4. Documentación de Company XYZ sobre ajustes de tarjetas
5. Documentación de Company XYZ sobre ajustes del espaciado de sección
6. Documentación de Company XYZ sobre ajustes de fondos de sección
7. Documentación de Company XYZ sobre ajustes de separadores
8. Documentación de Company XYZ sobre ajustes de anchos del diseño

Videos útiles

Vídeo de Shopify Academy: Personalizar tu tienda

Vídeo de Shopify Academy: Personalizar tu tienda

Muestre todas las colecciones disponibles en un único diseño navegable y, después, adapte la página con estilo de tarjeta, anulaciones de color, espaciado y controles de ancho. Esta sección es la mejor opción cuando desea una página de destino de colecciones completa en lugar de un conjunto seleccionado manualmente de colecciones destacadas. Para obtener una visión general más amplia de la estructura de la página, consulte documentación de Shopify sobre plantillas

Cómo funciona esta sección

Esta sección muestra la lista completa de colecciones para la plantilla de página que admite. Aquí no se eligen colecciones individuales, por lo que el resultado final depende en gran medida de la coherencia de los títulos, las imágenes y las descripciones de sus colecciones. Para obtener más información sobre cómo se organizan las secciones del tema, consulte documentación de Shopify sobre secciones y bloques

Debido a que todas las colecciones aparecen automáticamente, las imágenes y descripciones de colección débiles o incoherentes serán mucho más visibles aquí que en secciones de colecciones destacadas más pequeñas.

Ajustes de color de tarjeta

Estos ajustes le permiten anular los colores predeterminados de las tarjetas solo para esta sección. Son útiles cuando desea que la página de colecciones tenga un aspecto distinto sin cambiar las tarjetas de colección en el resto del sitio.

Los controles de superposición del banner solo importan cuando utiliza el estilo de tarjeta Banner. Úselos para mejorar la legibilidad del texto sobre las imágenes, pero mantenga la superposición lo bastante ligera para que los compradores aún puedan reconocer una colección de otra.

En los estilos que no son de banner, los colores de fondo, borde, encabezado y texto le ayudan a ajustar el contraste y el peso visual. Si también muestra extractos de colección, compruebe que el texto siga siendo fácil de leer tanto sobre el fondo de la tarjeta como sobre el fondo de la sección circundante.

Ajustes de color

Estos ajustes controlan los colores usados en el contenido de introducción de la sección, incluido el icono, el texto principal y el subtítulo. Son más útiles cuando la página de colecciones usa un fondo de sección personalizado o necesita un contraste más fuerte que el que ofrece su estilo de texto predeterminado.

Procure que el estilo de la introducción se vea visualmente conectado con el tratamiento de las tarjetas que aparece debajo. Si el área del encabezado resulta mucho más llamativa o decorativa que la cuadrícula de colecciones, la página puede sentirse desequilibrada.

Ajustes estándar de sección

Ajustes de encabezado

Use los Ajustes de encabezado compartidos para presentar la página de colecciones con un icono, subtítulo, encabezado, texto de apoyo y botón opcionales. En esta sección, normalmente funciona mejor una introducción breve y clara, porque los compradores suelen querer empezar a explorar rápidamente.

El botón opcional es más útil como acción secundaria, como enlazar a una campaña estacional o a una guía de compra. Si utiliza un botón solo con icono, asegúrese de que el icono comunique con claridad la acción, especialmente en dispositivos móviles.

Ajustes de tarjeta

Use los Ajustes de tarjeta compartidos para controlar cómo aparece cada colección en la lista. En esta sección, el estilo de tarjeta, la proporción de imagen, la visibilidad del texto, la alineación y el tratamiento del botón de tarjeta hacen la mayor parte del trabajo para determinar con qué rapidez los compradores pueden revisar la página.

Las tarjetas de estilo banner crean un aspecto más centrado en la imagen, mientras que los estilos más sencillos con espaciado o sin imagen suelen ser mejores cuando la imagen de las colecciones es incoherente. Una proporción de imagen fija suele hacer que la cuadrícula se vea más organizada, pero puede recortar imágenes de formas que oculten puntos focales importantes.

Consejo

Si la página parece demasiado recargada, simplifique primero las tarjetas. Reducir el texto de la tarjeta u ocultar los botones de la tarjeta suele mejorar la facilidad de revisión más rápido que cambiar el espaciado o el ancho.

Ajustes de espaciado

Use los Ajustes de espaciado compartidos para controlar el espacio por encima y por debajo de la sección. En una página de colecciones, el espaciado ayuda a separar la introducción del contenido cercano sin hacer que la cuadrícula se sienta aislada.

Ajustes de fondo de sección

Use los Ajustes de fondo de sección compartidos para añadir un color, degradado, imagen o video detrás de la sección. Esto puede crear un marco de marca más fuerte para la página de colecciones, especialmente cuando el diseño circundante es por lo demás minimalista.

Los fondos requieren un cuidado adicional en las cuadrículas de colecciones con mucho contenido visual. Si las tarjetas ya dependen de imágenes potentes, mantenga sutil el fondo de la sección para que la página no se vea recargada.

Ajustes de separador

Use los Ajustes de separador compartidos para añadir una línea encima o debajo de la sección. Funcionan bien cuando desea un límite visual más limpio sin depender solo de espacio adicional.

Ajustes de ancho

Use los Ajustes de ancho compartidos para controlar el ancho del contenido y el ancho externo de la sección. Los ajustes más amplios pueden hacer que las grandes cuadrículas de colecciones resulten más eficientes de explorar, mientras que los ajustes más estrechos pueden hacer que la página se sienta más curada y más fácil de leer cuando usa una introducción más destacada.

Las opciones de ancho se vuelven más visibles cuando también usa un fondo, imagen o video. Conviene previsualizar estos cambios en la vista de la página en vivo, ya que el encuadre del editor puede dificultar valorar con precisión las diferencias de ancho.

Notas de uso

1. Mantenga coherente el contenido de las colecciones. Esta sección se ve mejor cuando los títulos, imágenes y descripciones de las colecciones siguen una calidad y un estilo similares.
2. Elija estilos de tarjeta según la calidad de la imagen. Use diseños de banner o centrados en la imagen solo cuando las imágenes de sus colecciones sean claras, reconocibles y se recorten de forma coherente.
3. Mantenga breve la introducción. Un encabezado conciso y un texto de apoyo corto suelen ayudar más a los compradores que una explicación larga en una página enfocada primero en la exploración.
4. Revise con cuidado el diseño móvil. Compruebe la colocación de los botones, las proporciones de imagen y la longitud del texto en pantallas pequeñas para que la cuadrícula de colecciones siga siendo fácil de revisar.
5. Pruebe el contraste con contenido real. Cuando utilice superposiciones, colores personalizados de tarjeta o fondos de sección, confirme que el texto siga siendo legible en distintas imágenes de colección.
6. Compare ambos viewports. Los controles de escritorio y móvil pueden comportarse de forma diferente, así que previsualice cada tamaño de pantalla antes de publicar.
7. Use las anulaciones explícitas con intención. Los valores en blanco o con estilo predeterminado suelen conservar el estilo de respaldo, mientras que los colores personalizados, los degradados o la elección de medios separados hacen que esta sección sea más independiente del resto de la página.