Saltar al contenido
Ayuda
Secciones y bloques del constructor

¿Cómo personalizo la cuadrícula de productos de la página de colección (Collection products)?

Personaliza la página de colección: la cuadrícula Collection products, columnas, columnas en móvil, espaciado, la tarjeta de producto, un título con {{collection_name}}, {{collection_description}} y {{products_count}}, subcolecciones, el orden de los productos y el botón de ver más.

3 min de lectura

La Collection page se abre cuando un comprador hace clic en una colección. Su sección principal, Collection products, muestra los productos de esa colección en una cuadrícula de tarjetas. Es obligatoria en esta página.

Dónde encontrarla

  1. Abre el constructor y elige Collection page en la pestaña Pages.
  2. Elige una colección para la vista previa. Esto solo cambia la vista previa: se usa un único diseño para todas tus colecciones.
  3. Haz clic en Collection products.

Ajustes de la sección

  • Section width: Page o Full.
  • Columns: de 1 a 8 tarjetas por fila en escritorio.
  • Mobile columns: 1 o 2 tarjetas por fila en móviles.
  • Color scheme, Gap entre tarjetas, relleno y Custom CSS.

Bloques

  • Product card: cómo se ve cada producto. Es obligatorio y no puede ir dentro de un grupo. Consulta Tarjetas de producto y de colección.
  • Text (hasta 2), Divider (1) y Group (1): colócalos encima o debajo de la cuadrícula.

Mostrar el nombre y la descripción de la colección

Como un mismo diseño sirve para todas las colecciones, los bloques Text de esta sección pueden mostrar valores reales. Escríbelos en el texto:

  • {{collection_name}}: el nombre de la colección que se está viendo.
  • {{collection_description}}: su descripción.
  • {{products_count}}: cuántos productos tiene.

Una nueva página de colección empieza con un título que muestra {{collection_name}}. Por ejemplo, escribe "{{collection_name}}: {{products_count}} productos". El nombre y la descripción vienen de la propia colección, consulta ¿Cómo organizo los productos en colecciones?

Cómo se muestran los productos

  • Los productos más nuevos de la colección aparecen primero.
  • Los primeros productos se cargan con la página, y un botón de ver más debajo de la cuadrícula carga los siguientes.
  • Los productos ocultos quedan fuera.

Tareas habituales

  • Mostrar la descripción debajo del título: añade un segundo bloque Text con {{collection_description}} y arrástralo debajo del título.
  • Tarjetas más grandes en escritorio: baja Columns, por ejemplo de 4 a 3.

Otras secciones para esta página

Añade Sub collections para mostrar las colecciones hijas de la que se está viendo, por ejemplo "Camisas" y "Pantalones" dentro de "Hombre". Consulta Sección de subcolecciones. También puedes añadir cualquier sección permitida en todas las páginas, como un banner de imagen o una FAQ.

La página que muestra todas tus colecciones en example.com/collections es otra página, la Collections page. Consulta ¿Qué páginas de la tienda puedes editar en el constructor?

Solución de problemas

  • Una variable aparece como texto normal: revisa la ortografía y las llaves dobles. Las variables solo funcionan en los bloques Text de esta sección.
  • Falta un producto: comprueba que está publicado, no oculto y añadido a esa colección.
  • Todas las colecciones muestran el mismo título: escribiste un nombre en el título. Sustitúyelo por {{collection_name}}.

¿Aún necesitas ayuda?

Escríbenos y te responderemos.

Contáctanos