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 de anclaje, sin interruptores y sin total acumulado. Cada tarjeta enlaza directamente con 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).
- Add to Cart 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 está visible en pantallas táctiles) o always. Al pulsarlo se añade ese único producto mediante el código de añadido rápido al carrito de su cuenta y se muestra una confirmación: modern (un aviso oscuro redondeado con un icono de verificación), system (la notificación integrada de Personyze) o custom (su propio JavaScript, de los campos On Success y On Error).
- Las tarjetas se pueden pulsar. Hacer clic en cualquier parte de una tarjeta (fuera del botón o del enlace del nombre) abre la página del producto, respetando el ajuste Open Product Links In.
- Límite por elementos o por filas. Limit By elige entre un número fijo de productos (Max Items Shown, 4 por defecto) o un número de rows completas (Max Rows Shown, 1 por defecto) — tantas tarjetas como quepan por fila con el ancho actual. El resto queda oculto tras un enlace plegable Show N more.
- Acentos de estilo y preajustes de aspecto. Cuatro acentos (light, gold, bold, ocean) más los preajustes Title Look, Buttons Look, Text Font e Item Info Order. Cada color y cada fuente se puede seguir cambiando 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 razonables. Porcentaje de descuento (oculto en 0), NEW (añadido 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 por tarjeta de “visto hoy” y “comprado hoy”, con un ámbito de visibilidad.
- Líneas de información del producto. Campos adicionales del catálogo (marca, columnas personalizadas) bajo el nombre del producto.
Carga, popups y estabilidad
- Loading skeleton: filas con brillo que se muestran 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 popups de banner a todo el ancho.
- Representación a prueba de estilos. Los estilos de la plantilla están diseñados para resistir el CSS agresivo del sitio, 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 una vez mostradas, 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 Mis plantillas después de las actualizaciones importantes.
Relacionado
- Buy Together — creador de packs con total en vivo — las mismas tarjetas con el concepto completo de pack: producto de anclaje, interruptores y totales en vivo.
- Bought Together — tira clásica — tira de fotos, caja del total y lista de casillas.
- Botón de añadido rápido al carrito — el código que ejecuta el botón Add to Cart.
- Plantillas — la visión general de toda la biblioteca de plantillas.