Recomendaciones de productos como tarjetas limpias en las que se puede hacer clic — el mismo motor que la familia Buy Together, sin el concepto de pack: sin producto ancla, sin interruptores y sin total acumulado. Cada tarjeta enlaza directamente a su producto y lleva su propio botón Add to Cart, que aparece al pasar el ratón (como en los sliders) y confirma con un aviso moderno.
Cómo funciona esta plantilla
- Tres disposiciones. Horizontal (una fila de tarjetas, la predeterminada — se ajusta al tamaño de sus tarjetas), vertical (filas de lista apiladas) y compact (una tira mínima con fotos pequeñas, nombres y precios).
- Añadir al carrito en cada tarjeta. Cada tarjeta tiene su propio botón. Show Add to Cart controla cuándo aparece: hover (el predeterminado — aparece con un fundido cuando el comprador pasa el ratón por la tarjeta, y siempre visible en pantallas táctiles) o always. Al hacer clic se añade ese producto y se muestra una confirmación: modern (aviso oscuro redondeado con un icono de verificación), system (la notificación integrada de Personyze) o custom (su propio JS desde los campos Success y Error Action).
- Las tarjetas se pueden pulsar. Al hacer clic en cualquier parte de una tarjeta (fuera del botón o del enlace del nombre) se abre la página del producto, respetando el ajuste Open Product Links In.
- Límite por artículos o por filas. Limit By elige entre un número fijo de productos (Max Items Shown, 4 de forma predeterminada) o un número de rows completas (Max Rows Shown, 1 de forma predeterminada) — tantas tarjetas como quepan por fila con el ancho actual. El resto se oculta detrás de un enlace plegable Show N more.
- Acentos de estilo y aspectos predefinidos. Cuatro acentos (light, gold, bold, ocean) más los aspectos predefinidos Title Look, Buttons Look, Text Font e Item Info Order. Cada color y cada fuente se pueden seguir sobrescribiendo por separado en su propio campo de estilo.
- Modo de demostración en vivo. Mientras diseña aparecen siete productos de demostración realistas — suficientes para mostrar el enlace Show More y los botones al pasar el ratón; los visitantes del sitio nunca los ven.
Insignias, prueba social e información del producto
- Insignias con valores predeterminados sensatos. Porcentaje de descuento (oculta en 0), NEW (añadidos en los últimos 14 días), Popular y Bestseller (el 5% superior) y poco stock (5 o menos) — cada umbral, texto y estilo se puede editar.
- Líneas de prueba social. Recuentos de “viewed today” y “bought today” por tarjeta, con un alcance de visibilidad.
- Líneas de información del producto. Campos adicionales del catálogo (marca, columnas personalizadas) debajo del nombre del producto.
Carga, popups y estabilidad
- El esqueleto de carga muestra filas con brillo hasta que llegan las recomendaciones.
- Smooth Reveal mantiene el widget invisible hasta que su tamaño se estabiliza, y después lo muestra con un fundido — sin saltos mientras carga la página.
- Popup Hugs Widget reduce un marco de popup demasiado grande para ajustarlo al widget; desactívelo para los popups de banner a todo el ancho.
- Renderizado a prueba de estilos. Los estilos de la plantilla están pensados para resistir el CSS agresivo de los sitios, mientras que las personalizaciones por elemento hechas en el editor siguen teniendo prioridad.
Conviene saber
- El límite por filas mide la disposición real. Con Limit By: rows, el conjunto visible se calcula a partir de dónde quedan realmente las tarjetas después del renderizado, así que se adapta a cualquier ancho de contenedor; se calcula una vez por carga de página.
- Precios centralizados. Un único selector de formato de precio y un único par de campos de símbolo de moneda se aplican en todos los lugares donde aparecen precios.
- Las tarjetas de plantilla guardadas congelan su código. Vuelva a guardar su copia en sus plantillas después de las actualizaciones importantes.
Relacionados
- Buy Together — creador de packs con total en vivo — las mismas tarjetas con el concepto de pack completo: producto ancla, interruptores y totales en vivo.
- Bought Together — Classic Strip — tira de fotos, caja del total y lista de casillas.
- Plantillas — el resumen completo de la biblioteca de plantillas.