Saltar al contenido
Ayuda
Secciones y bloques del constructor

¿Cómo muestro productos relacionados en mi página de producto?

Añade una sección Related products a las páginas de producto y de aterrizaje: elige el origen (más nuevos, más vendidos, con descuento, mejor valorados, misma colección o productos que eliges para cada producto), la cantidad, cuadrícula o carrusel, las columnas y la tarjeta de producto.

3 min de lectura

La sección Related products muestra otros productos de tu tienda debajo del producto, en una cuadrícula o un carrusel. Ayuda a los compradores a encontrar más cosas para comprar sin salir de la página.

Añadir la sección

En el constructor, abre la Product page o la Landing page, haz clic en Add new section y elige Related products en el grupo de productos. Puedes añadir una por página.

Elige qué productos aparecen

Define Source mode en el grupo Source:

  • Newest u Oldest: según la fecha en que creaste los productos.
  • Best selling: primero los productos más vendidos.
  • Discounted: solo los productos que están en oferta ahora mismo.
  • Top rated: primero la mejor valoración media. Los productos sin reseñas quedan fuera.
  • Same collection: solo los productos que comparten al menos una colección publicada con el producto que se está viendo, primero los más nuevos. Ideal cuando tus colecciones agrupan artículos parecidos.
  • Picked per product: tú eliges los productos exactos para cada producto, en tu propio orden. Abre cada producto en el editor de productos y usa su parte Related products. Un producto sin selección muestra un mensaje vacío.

El producto que se está viendo nunca aparece en su propia lista. Los productos ocultos también quedan fuera.

Ajustes de diseño

  • Section width: Page o Full.
  • Layout: Grid o Carousel.
  • Columns: de 1 a 8 tarjetas por fila en escritorio (o tarjetas visibles en un carrusel).
  • Mobile columns: 1 o 2. Carousel on mobile convierte la cuadrícula en una fila deslizable en móviles.
  • Products count: 4, 6, 8, 10 o 12.
  • Navigation: para carruseles, Navigation icons (Arrows, Chevrons, None) e Icon background (None, Circle, Square).
  • Color scheme, Gap entre tarjetas, relleno y Custom CSS.

Mobile columns y Carousel on mobile solo están disponibles con el diseño Grid. Los ajustes de Navigation aparecen cuando el diseño es Carousel, o cuando Carousel on mobile está activado.

Bloques

  • Product card: define cómo se ve cada producto (imagen, título, precio, valoración, botón de compra). Es obligatorio y no puede ir dentro de un grupo. Sus opciones están en Tarjetas de producto y de colección.
  • Text (hasta 2), Divider (1) y Group (1): añade un título como "También te puede gustar" encima o debajo de las tarjetas.

Tareas habituales

  • Mostrar artículos similares: pon los productos parecidos en la misma colección y usa Same collection.
  • Vender un accesorio a juego: usa Picked per product y elige el accesorio para cada producto.
  • Impulsar tus ofertas: usa Discounted.

Solución de problemas

  • La sección muestra un mensaje de "no hay productos": ningún producto coincide con el origen. Con Same collection, comprueba que el producto está en una colección publicada con otros productos. Con Picked per product, añade productos seleccionados a ese producto.
  • Top rated muestra pocos productos: solo cuentan los productos con al menos una reseña publicada.
  • Un producto nunca aparece en la lista: comprueba que está publicado y no oculto.

¿Aún necesitas ayuda?

Escríbenos y te responderemos.

Contáctanos