Correcto
Colección
Crear una cuadrícula de colección personalizable con filtros, ordenación, estilo de tarjeta y banners promocionales dentro de la cuadrícula.
- Documentación de Company XYZ sobre los ajustes de la interfaz de cuadrícula
- Documentación de Shopify sobre la personalización de secciones
- Documentación de Company XYZ sobre filtros
- Documentación de Shopify sobre secciones y bloques
- Documentación de Company XYZ sobre el bloque de banner de colección
- Documentación de Company XYZ sobre los ajustes de encabezado
- Documentación de Company XYZ sobre los ajustes de las tarjetas de producto
- Documentación de Company XYZ sobre los ajustes de espaciado de sección
- Documentación de Company XYZ sobre los ajustes de fondo de sección
- Documentación de Company XYZ sobre los ajustes de separadores
- Documentación de Company XYZ sobre los ajustes de anchos de diseño
Use esta sección para convertir la colección actual en una cuadrícula de productos flexible con controles de navegación, opciones de visualización de tarjetas y banners promocionales opcionales dentro de la cuadrícula. Es especialmente adecuada para páginas de colección en las que los clientes necesitan examinar productos rápidamente, refinar resultados y detectar contenido destacado sin salir del listado.
Ajustes básicos
Sección titulada «Ajustes básicos»Esta sección siempre toma la colección activa. Su primera decisión clave es cómo tratar los productos no disponibles, ya que eso afecta tanto a la claridad de la navegación como a la visibilidad de los productos.
Ocultar los productos no disponibles mantiene la cuadrícula centrada en lo que se puede comprar ahora. Moverlos al final suele ser una mejor opción cuando los reposiciones son frecuentes o cuando quiere que los clientes sigan descubriendo toda la gama.
Si los clientes esperan con frecuencia reposiciones, mostrar los productos no disponibles al final suele funcionar mejor que ocultarlos por completo.
Ajustes de la interfaz de la cuadrícula
Sección titulada «Ajustes de la interfaz de la cuadrícula»Estos ajustes controlan el diseño predeterminado de la cuadrícula en escritorio y móvil, además de si los clientes pueden ajustar la cuadrícula por sí mismos. Más información en los ajustes de la interfaz de la cuadrícula.
Elija el número predeterminado de columnas según el espacio visual que necesite cada producto. Las tarjetas más grandes son mejores para productos centrados en la imagen, mientras que las cuadrículas más densas ayudan a que los catálogos grandes se naveguen más rápido.
Activar la interfaz de tamaño de cuadrícula da a los compradores más control sobre cómo navegan. La interfaz Sticky mantiene estos controles visibles mientras los clientes se desplazan, lo que es especialmente útil en páginas de colección largas. Para una visión general más amplia del comportamiento de la sección en el editor, consulte la documentación de Shopify sobre la personalización de secciones
Ajustes de filtro
Sección titulada «Ajustes de filtro»Estos ajustes añaden controles de filtrado y ordenación para ayudar a los clientes a acotar y reordenar los resultados. Los filtros necesitan configuración adicional antes de ser útiles, y la guía de configuración de filtros del tema está disponible.
Active los filtros cuando una colección sea lo bastante amplia como para que los clientes se beneficien de acotar por atributos compartidos. En colecciones más pequeñas o muy seleccionadas, los filtros pueden añadir más interfaz que valor.
El filtro de disponibilidad funciona mejor cuando el estado del inventario influye en cómo compran los clientes. La ordenación es una opción predeterminada sólida para la mayoría de las colecciones, pero mantener los filtros abiertos de forma predeterminada es más útil cuando es probable que se usen de inmediato.
Ajustes de color
Sección titulada «Ajustes de color»Estas sustituciones de color específicas de la sección se aplican al contenido de encabezado propio de la sección, como el icono, el texto y el subtítulo. Úselas cuando esta página de colección necesite un aspecto distinto sin cambiar los colores generales del tema.
Mantenga las sustituciones intencionadas y fáciles de leer. Si también usa un fondo personalizado de la sección, compruebe cuidadosamente el contraste para que el contenido del encabezado siga viéndose con claridad.
Tipos de bloque admitidos
Sección titulada «Tipos de bloque admitidos»- Banner de colección
Banner de colección
Sección titulada «Banner de colección»Use bloques de Banner de colección para colocar contenido promocional directamente dentro de la cuadrícula de productos. Más información sobre el bloque Banner de colección.
Este bloque funciona bien para lanzamientos, campañas de temporada, selecciones curadas o mensajes específicos de la colección. Puede añadir hasta dos banners, pero solo se mostrará uno de cada tamaño.
La visibilidad del banner depende del tamaño de la colección. Un banner grande necesita al menos 6 productos, y un banner pequeño necesita al menos 11 productos.
Si la colección es demasiado pequeña para el tamaño de banner seleccionado, el banner no aparecerá.
Use la imagen o el video de fondo con cuidado para que el mensaje promocional siga siendo legible. Un medio móvil independiente es útil cuando los recortes de escritorio no se adaptan bien a pantallas más pequeñas.
El contenido del primer plano puede incluir texto, botones, iconos y medios de apoyo, como un logotipo o una imagen promocional. Si elige un estilo de enlace de bloque completo, los enlaces dentro del texto del subtítulo se eliminarán.
El bloque también incluye su propio control de visibilidad, que resulta útil cuando quiere que un banner aparezca solo en escritorio o solo en móvil.
Ajustes estándar de sección
Sección titulada «Ajustes estándar de sección»Ajustes de encabezado
Sección titulada «Ajustes de encabezado»Use la referencia compartida de ajustes de encabezado. En esta sección, el encabezado presenta la colección con icono, leyenda, encabezado, texto de apoyo y contenido de botón opcionales.
Este es un buen lugar para añadir contexto cuando el título de la colección por sí solo es demasiado breve. Un botón funciona mejor como acción secundaria, por ejemplo, para enlazar a una colección relacionada o a una guía de compra útil.
Ajustes de tarjeta
Sección titulada «Ajustes de tarjeta»Use la referencia compartida de ajustes de tarjeta. Estos ajustes sustituyen la presentación predeterminada de la tarjeta de producto para esta sección, incluido el estilo, la proporción de imagen, la densidad de texto, el estilo del CTA, la alineación y la visualización de variantes.
Use estas sustituciones para adaptarse al comportamiento de compra de la colección. Las categorías visuales suelen beneficiarse de imágenes más potentes y menos texto, mientras que las categorías técnicas o con muchas comparaciones suelen necesitar títulos, extractos y pistas de variantes más claros.
Algunos ajustes son más importantes con ciertos estilos de tarjeta. Por ejemplo, la alineación vertical media solo se aplica por completo al diseño de tarjeta estilo banner, y los selectores de variantes funcionan mejor cuando los datos de opciones de producto ya son coherentes.
Ajustes de espaciado
Sección titulada «Ajustes de espaciado»Use la referencia compartida de ajustes de espaciado. Estos controles ajustan el espacio por encima y por debajo de la sección de colección.
Un espaciado más ajustado ayuda a que las páginas con muchos productos se sientan más eficientes. Un espaciado más generoso funciona bien cuando el encabezado de la sección o el tratamiento del fondo forman parte de la historia visual.
Ajustes de fondo de sección
Sección titulada «Ajustes de fondo de sección»Use la referencia compartida de ajustes de fondo de sección. Estos ajustes le permiten añadir un color, degradado, imagen o video detrás de la sección.
Los tratamientos de fondo pueden hacer que una colección se sienta más editorial o impulsada por campañas, especialmente cuando se combinan con colores personalizados de encabezado o tarjeta. Dado que pueden cambiar el peso visual de la página, prévisualícelos en distintos tamaños de pantalla antes de publicar.
Ajustes de separador
Sección titulada «Ajustes de separador»Use la referencia compartida de ajustes de separador. Los separadores superior e inferior ayudan a definir la sección cuando se sitúa entre áreas de contenido similares.
Por lo general, un separador sutil es suficiente. Use estilos de línea más intensos solo cuando la página necesite límites visuales más claros.
Ajustes de ancho
Sección titulada «Ajustes de ancho»Use la referencia compartida de ajustes de ancho. Estos ajustes controlan el ancho máximo del contenido y el ancho exterior de la sección.
Los diseños más anchos pueden mostrar más productos por fila y reducir el desplazamiento. Los diseños más estrechos pueden parecer más seleccionados y hacer que el contenido del encabezado sea más fácil de leer, especialmente cuando los fondos o los tratamientos promocionales son importantes.
Es posible que el editor no refleje por completo los cambios de ancho, así que previsualice la página real antes de finalizar diseños de ancho completo o full-bleed.
Notas de uso
Sección titulada «Notas de uso»- Adapte la densidad de la cuadrícula a los productos. Use menos columnas para productos centrados en la imagen y cuadrículas más densas para catálogos grandes en los que importa un examen rápido.
- Active los filtros solo cuando ayuden. El filtrado aporta más valor en colecciones amplias con atributos compartidos significativos.
- Use las sustituciones de tarjeta de forma estratégica. Ajuste la proporción de imagen, el texto y el estilo del CTA para respaldar cómo los clientes comparan los productos de esta colección.
- Compruebe los requisitos del banner antes de publicar. Asegúrese de que la colección tenga suficientes productos para el tamaño de banner seleccionado para que los bloques promocionales aparezcan realmente.
- Revise por separado escritorio y móvil. La densidad de la cuadrícula, los recortes de medios y la visibilidad del banner pueden variar según la vista, así que confirme ambos diseños antes de publicar.
- Mantenga legibles los colores y fondos. Los valores de estilo predeterminado conservan el aspecto base, mientras que las sustituciones más intensas hacen que la sección sea más autónoma y siempre deben comprobarse en cuanto a contraste.
- Previsualice el diseño en vivo. Los cambios de ancho, los controles Sticky y los medios de fondo suelen sentirse distintos en la página real que en el editor.