Buy Together — creador de packs con total en vivo

Un creador de packs “Frequently Bought Together” con totales en vivo: el producto actual se muestra como ancla (“This item”) junto a los complementos recomendados, cada uno con su propio interruptor de activar/desactivar. Cada interruptor actualiza al instante el total del pack, el precio original tachado, la línea verde You save y el contador opcional N of M items selected — y luego un clic añade toda la selección al carrito.

Cómo funciona esta plantilla

• Tres disposiciones. El ajuste Layout cambia entre vertical (una lista apilada con interruptores — la predeterminada), horizontal (una fila de productos unidos por signos de suma que se ajusta al tamaño de sus tarjetas) y compact (una tira mínima con fotos pequeñas, nombres y precios — allí las líneas de prueba social y de información se ocultan para ahorrar espacio, mientras que el producto actual conserva su etiqueta “This item”). En la tira compacta, Title Position (Strip Layout) coloca el encabezado en línea a la izquierda de los productos (la opción predeterminada) o en una línea completa encima de ellos. En pantallas estrechas, la fila horizontal se convierte automáticamente en una lista apilada limpia.
• Acentos de estilo y aspectos predefinidos. Un único selector Style accent (light, gold, bold, ocean) cambia a la vez el color de los interruptores, los botones, los totales, los ahorros y las tarjetas. Además: Title Style Preset (plain, caps, serif, underline, boxed), Button preset (solid, pill, outline, dark, square), Font preset (system, serif, rounded, condensed) y Card Info Order (standard, price-first, info-top, name-first). Cada color y cada fuente se pueden seguir cambiando por separado en su propio campo de estilo.
• Motor de totales en vivo. El pie muestra el total del pack, el total original tachado cuando hay descuentos, una línea You save calculada a partir de la diferencia y un contador opcional de elementos seleccionados. El total puede hacer un breve efecto de pulso en cada cambio (Animate Total on Change, activado por defecto).
• Cuántas recomendaciones. La plantilla pide hasta ocho recomendaciones (Recomendaciones a mostrar en la tarjeta Salida de la recomendación; hasta 12), pero solo se ven Max Items Shown (2 por defecto). El resto queda detrás de un enlace + N more; los elementos que se muestran al desplegarlo aparecen desactivados, así que el total solo incluye productos que el visitante ha visto y elegido de verdad. Al volver a hacer clic en el enlace (Show Less Text) se pliegan de nuevo.
• Selección predeterminada. Elija si el pack empieza con all (todos los elementos activados), none (ninguna de las recomendaciones) o solo con el producto anchor seleccionado. El estilo, la posición, el color y la visibilidad del control de inclusión son ajustes aparte.
• Estilo de confirmación. Después de añadir al carrito, el comprador ve una confirmación. Confirmation Style ofrece modern (un aviso oscuro redondeado con un icono de verificación — el predeterminado), system (la notificación integrada de Personyze) o custom (ejecute su propio JavaScript desde los campos On Success y On Error de Quick add to cart).
• Modo de demostración en vivo. Mientras diseña, aparecen automáticamente productos de demostración con interruptores y totales que funcionan — los visitantes del sitio nunca los ven.

Precio y descuento del pack

Todos los precios del widget — cada elemento, el total del pack, el total original tachado y la línea You save — salen de su catálogo de productos, a través de las columnas de precio asignadas en Catalog Fields. Personyze solo muestra el pack; no cambia lo que cobra su carrito.

Los complementos en sí salen del algoritmo de la recomendación — por ejemplo Ventas cruzadas (elementos comprados juntos, aprendidos automáticamente) o Ventas cruzadas gestionadas (parejas que usted mismo sube). Consulte Algoritmos de recomendación.

Buenas prácticas

• Ofrezca uno o dos acompañantes. Una pareja fuerte suele funcionar mejor que un muro de opciones — Max Items Shown ya es 2 por defecto.
• Pruebe la profundidad del descuento. Un descuento de pack del 10% puede generar más que uno del 25% si convierte a un ritmo similar.
• Colóquelo bajo la imagen principal del producto. En la página de producto, cerca de la decisión de añadir al carrito.
• Mida frente a un grupo de control. Dé al widget menos del 100% del tráfico, para que el resto de sus visitantes vea el Sitio original, y compare ambos en el paso Rendimiento de la campaña — consulte Pruebas A/B.

Cambiar los ajustes en el editor

Todos los ajustes están en la barra lateral de la izquierda del editor de la acción, agrupados por tema; haga clic en un grupo para desplegarlo, y la vista previa se actualiza al instante. Dos ejemplos:

(1) El grupo How Many Recommendations contiene Max Items Shown (2 por defecto) y los textos del enlace para mostrar más. (2) Show More Link cambia entre mostrar los elementos ocultos con un enlace o simplemente no mostrarlos. (3) El enlace + N more resultante en la lista vertical — al hacer clic en él en la vista previa funciona exactamente igual que en el sitio.

(1) El selector Layout cambia todo el widget entre vertical, horizontal y compact en un clic. (2) Aquí, la tira compact: el título en línea a la izquierda (se puede mover encima de los productos con Title Position), minitarjetas uniformes unidas por signos de suma, la etiqueta + N more y el total con el botón del carrito — todo en una línea.

Insignias, prueba social e información del producto

• Insignias con valores predeterminados razonables. Porcentaje de descuento (oculta cuando el descuento es 0), NEW (productos añadidos en los últimos 14 días), Popular y Bestseller (el 5% superior por vistas o por compras) y poco stock, que muestra el número restante en vivo seguido de un texto editable como “left in stock” (se activa con 5 unidades 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 ajuste de ámbito para todas las tarjetas, solo el ancla o solo las recomendaciones.
• Líneas de información del producto. Campos adicionales del catálogo (marca, columnas personalizadas) debajo del nombre del producto, con el mismo control de ámbito.

Carga, popups y estabilidad

• Esqueleto de carga. Filas de marcador con brillo (activadas por defecto) que se muestran hasta que llegan las recomendaciones, para que el widget nunca aparezca de golpe.
• Smooth Reveal. El widget permanece invisible un momento hasta que su tamaño y su posición se estabilizan, y después aparece con un fundido — sin saltos visibles mientras carga la página. Activado por defecto, con un mecanismo de seguridad que siempre lo muestra en unos tres segundos como máximo.
• Protección frente a datos obsoletos. Al navegar, el evento de vista de producto y la solicitud de recomendaciones compiten entre sí; si el widget fuera a mostrarse con el producto de la página anterior como “This item”, se oculta en esa página vista. La comprobación está integrada (Require Current-Page View, activada por defecto): la tarjeta del producto actual debe enlazar a la página que se está viendo. Esto también mantiene el widget fuera de las páginas que no son de producto automáticamente — sin necesidad de reglas de audiencia.
• Popup Hugs Widget. Cuando el widget se ejecuta dentro de un popup mucho más ancho que él, reduce el marco del popup para ajustarlo. Desactívelo para los popups de banner a todo el ancho intencionados.

Todos los ajustes

Todos los ajustes están en la barra lateral del editor de la acción, agrupados exactamente como se indica abajo. Haga clic en un grupo para desplegar su lista. Los ajustes marcados con (CSS) admiten CSS en bruto; el resto son texto, números o selectores sencillos.

Conviene saber

• El widget se oculta fuera de las páginas de producto y ante datos obsoletos. Require Current-Page View (activado por defecto) impide que el pack muestre alguna vez el producto de la página anterior o aparezca en la página de inicio. ¿Prefiere gestionarlo usted? Desactívelo y añada una regla de audiencia que segmente a los visitantes cuya última interacción es una vista de producto.
• La línea de ahorro solo aparece cuando hay algo que ahorrar. Si ningún elemento seleccionado tiene descuento, el total tachado y la línea You save se ocultan solos.
• Add bundle to cart envía todos los elementos seleccionados en una sola llamada al código de añadido rápido al carrito de su cuenta, con los campos del catálogo que haya añadido allí; hasta que ese código se guarde, el botón muestra su mensaje de error. Un botón secundario, Save bundle for later, está desactivado por defecto y se puede activar con un clic; los dos se pueden reestilizar por completo.
• Precios centralizados. Un único selector Price Format y un único par de campos de símbolo de moneda se aplican en todos los lugares donde aparecen precios, incluidos los totales y los ahorros.
• 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 sobre los valores predeterminados de la plantilla.
• Las tarjetas de plantilla guardadas congelan su código. Si guarda su propia copia en Mis plantillas, las acciones creadas a partir de ella usan el código tal como estaba al guardarla — vuelva a guardar la tarjeta después de las actualizaciones importantes.

Relacionado

• Bought Together — tira clásica — el mismo motor con el aspecto clásico: tira de fotos arriba, caja de precio total y lista de casillas debajo.
• Botón de añadido rápido al carrito — el código que ejecuta el botón Add bundle to cart.
• Aplicar un código de cupón automáticamente en el checkout — lleve el cupón del pack hasta el checkout.
• Vertical Product List — una disposición de recomendaciones en lista, sin lógica de pack.
• Plantillas — la visión general de toda la biblioteca de plantillas.