Plantilla: slider de recomendaciones con tarjetas superpuestas (Overlay Card)

Slider de recomendaciones con tarjetas superpuestas (Overlay Card)

Tipo de acción: Recomendaciones de productos. Se configura desde: el menú de la acción — sin código.

El slider Overlay Card muestra las recomendaciones de productos como tarjetas de imagen con el nombre del producto, la marca y el precio superpuestos sobre la foto. Se desplaza deslizando el dedo en pantallas táctiles y con flechas, puntos, arrastre o reproducción automática en escritorio, y adapta el número de tarjetas visibles al tamaño de pantalla del visitante.

Inicio rápido

1. Añada la acción a su campaña y elija la plantilla Overlay Card Recommendations Slider.
2. Abra Card Image Style y confirme que Main Product Image Column apunta al campo de imagen de su catálogo. Si todavía no hay ningún catálogo conectado, el widget muestra en el editor productos de demostración integrados para que pueda seguir diseñando (consulte Productos de demostración).
3. Defina cuántas tarjetas ven los visitantes a la vez en Slider & Items Per View — escritorio, tableta y móvil tienen cada uno su propio número.
4. Elija el aspecto de las flechas en Slider Arrows → Arrow Style, o déjelo en none para que se aplique el estilo de botones de su propio sitio.
5. Previsualice en Móvil, Tableta y Escritorio, y publique.

Cómo calcula el slider el tamaño de las tarjetas

El ancho de las tarjetas no se define directamente — se calcula a partir de cuántos elementos quiere que se vean, así que la disposición siempre sale exacta:

card width = (row width − gaps) ÷ items visible

• Items Visible — Desktop / Tablet / Mobile — el número de tarjetas que se ven a la vez en cada tamaño de pantalla. Valores predeterminados: 4 / 3 / 1. Se admiten decimales: 1.15 en móvil muestra un trocito de la tarjeta siguiente como indicación de que se puede deslizar.
• Tablet / Mobile Breakpoint (px) — los anchos de pantalla a partir de los que se aplican los números de tableta y de móvil. Valores predeterminados: 1024 / 640.
• Minimum Card Width — un mínimo de seguridad (200px de forma predeterminada). Si la fila es demasiado estrecha para que quepa el número elegido por encima de este ancho, las tarjetas mantienen el mínimo y la fila se desplaza. Así se evita que las tarjetas se aplasten dentro de contenedores estrechos.
• Space Between Cards — el espacio entre tarjetas. Use una longitud simple, como 24px. Este valor se aplica en el primer pintado, antes de que se ejecute el procesamiento responsive, así que sel() no se admite aquí; si necesita un espacio distinto en móvil, añada una media query en Container Style.
• La altura de las tarjetas, el radio de las esquinas y cómo llena la foto la tarjeta se definen en Card Image Style → Card Box Style — p. ej. height: sel(220px, 180px) para alturas distintas en escritorio y en móvil.

Navegación

Scroll Behavior — x mandatory siempre se detiene en el borde de una tarjeta; x proximity solo se ajusta al detenerse cerca de un borde; none se desplaza libremente con inercia.

Items Scrolled Per Click — cuánto avanza cada clic en una flecha y cada paso de la reproducción automática: de 1 a 4 tarjetas, o full, que avanza exactamente el conjunto visible (con 2 elementos visibles avanza 2, con 4 avanza 4 — sigue el breakpoint automáticamente).

Flechas

Dos juegos independientes que pueden usarse por separado o juntos:

• Arrows on Sides (Classic) — flechas grandes centradas verticalmente en los bordes de la fila. La opción Offset las mueve fuera de la fila (valores negativos) o sobre las tarjetas (positivos).
• Arrows in Title Bar — botones compactos ‹ › en el extremo derecho del título del widget.

Estilos predefinidos de Arrow Style: circle (claro), dark, pill, outline, soft — cada uno es un aspecto completo con su propio hover, que se ve igual en todos los sitios. Elija none para dejar el estilo al tema de su sitio, de modo que las flechas combinen con los botones del propio sitio; tenga en cuenta que con none, la vista previa del editor muestra botones básicos de reserva, porque el tema solo existe en el sitio en vivo. Ajuste cualquier estilo predefinido en Side Arrow Custom Style — cuando haya uno activo, añada !important a cada propiedad que sobrescriba.

Hay dos comportamientos que se aplican a todas las flechas: Fade Arrows at Row Ends atenúa la flecha de retroceso al principio y la de avance al final, y Hide Arrows on Touch Devices las quita donde lo natural es deslizar. Las dos están activadas de forma predeterminada.

Otros controles

• Pagination Dots — puntos en los que se puede hacer clic, debajo de la fila, que indican la posición del desplazamiento. Solo aparecen cuando hay más de una página que desplazar, y se reconstruyen automáticamente al cambiar el tamaño. Los estilos del contenedor, del punto y del punto activo se pueden editar por separado.
• Scrollbar — una barra de desplazamiento fina opcional debajo de las tarjetas, desactivada de forma predeterminada. Los colores del control y de la pista se aplican en todos los navegadores; el ajuste de altura se aplica en Safari (Chrome y Firefox usan su tamaño fino fijo).
• Drag to Scroll with Mouse — permite a los visitantes de escritorio agarrar la fila y arrastrarla como en una pantalla táctil. Un arrastre nunca se confunde con un clic en un producto. Activado de forma predeterminada.
• Autoplay — defina un intervalo en milisegundos (p. ej. 4000) para que avance solo. Se pausa mientras el visitante pasa el ratón por encima o toca el slider, y Autoplay: Loop to Start controla qué pasa en la última tarjeta: vuelve a la primera (activado) o se detiene (desactivado).

Insignias

Las insignias funcionan con un sistema de esquinas para que nunca se solapen:

• El Badge Stack reúne las insignias Popular, Best Seller, New, por tiempo y personalizadas (de la base de datos). Cualquier combinación se apila ordenadamente en una esquina, la más nueva primero según el orden de la plantilla. Badge Stack Corner mueve toda la pila a cualquiera de las cuatro esquinas en una sola elección; Stack Custom Style añade márgenes o la convierte en una fila horizontal.
• Tres insignias tienen sus propias esquinas: Discount (arriba a la derecha), Price Drop (abajo a la derecha) y Low Stock (abajo a la izquierda). El corazón de Wishlist va arriba a la derecha. Si mueve la pila a una de esas esquinas, cambie el estilo de esa insignia o desactívela.

Cada insignia tiene sus propios umbrales (p. ej., porcentaje mínimo de descuento, nivel de stock, el N% superior de popularidad) y opciones de texto y estilo en su sección del menú.

Contenido de la tarjeta

La tarjeta es la propia foto del producto, con un Gradient Overlay que la oscurece y el Text Overlay en la parte inferior: el nombre del producto (limitado a dos líneas), un campo de subtítulo (la marca, de forma predeterminada) y el precio, con el precio original tachado automáticamente cuando hay descuento. Al hacer clic en cualquier parte de la tarjeta se abre la página del producto (Product Click Target define la columna de URL y si se abre en la misma pestaña o en una nueva).

Debajo de la imagen se pueden activar bloques opcionales: título del producto, bloque de precios completo, valoraciones con estrellas, descripción, columna personalizada del catálogo, enlace de opciones, botón de enlace, Añadir al carrito (que aparece animado al pasar el ratón), texto de pago a plazos, estadísticas en vivo de vistas y compras, y el ticker de prueba social. Todos están desactivados de forma predeterminada, para que la tarjeta se mantenga limpia hasta que usted los active.

Productos de demostración — cómo funciona el conjunto predeterminado

El widget incluye seis productos de ejemplo integrados para que una cuenta pueda diseñar y previsualizar el widget antes de conectar ningún catálogo de productos.

La lógica, exactamente:

1. Las tarjetas de demostración solo se muestran en contextos de vista previa. El widget detecta el editor de Personyze (incluido su marco de vista previa) y los enlaces de vista previa que llevan el parámetro _S_T= . Los visitantes normales de un sitio en vivo nunca cumplen esa condición, así que los productos de demostración — y sus precios de ejemplo — nunca pueden aparecer ante compradores reales. Un sitio en vivo sin catálogo simplemente muestra un widget vacío.
2. En un contexto de vista previa, las demostraciones sustituyen al marcador del editor. Cuando no hay ningún catálogo conectado, el editor muestra una sola tarjeta de marcador en lugar de la imagen del catálogo. El widget cuenta las tarjetas reales que produce el bucle de productos: una o ninguna significa que es el marcador, así que se oculta y en su lugar aparecen las seis tarjetas de demostración.
3. Los productos reales siempre ganan. En cuanto el bucle devuelve más de un producto real — es decir, hay un catálogo conectado de verdad —, las tarjetas de demostración se quedan ocultas y se muestran los productos reales, en el editor y en todas partes.
4. Todo el comportamiento depende de un solo interruptor: Widget Layout → Demo Products (Preview Only). Se puede dejar activado permanentemente sin riesgo; desactivarlo solo afecta a las vistas previas.

Para cambiar los propios productos de demostración (imágenes, nombres, precios), edite el bloque de tarjetas de demostración en el código de la plantilla — las seis tarjetas son HTML simple que reproduce el diseño de la tarjeta real, marcadas con la clase pz-demo .

Arquitectura de estilos e interacción con el tema del sitio

Tres capas dan estilo al widget, en el orden en que se aplican:

1. La disposición crítica va en línea en el slider y en las tarjetas, y el navegador la aplica en el instante en que se muestra el HTML — por eso el slider nunca aparece un instante como una pila de tarjetas a todo el ancho en una primera carga en frío.
2. Las reglas responsive y decorativas (ajustes por breakpoint, puntos, estilos predefinidos de flechas, hovers) están en la hoja de estilos de la plantilla.
3. El CSS de su sitio puede alcanzar todo lo que no esté bloqueado explícitamente. Es intencionado: con Arrow Style en none, el tema del sitio viste por completo las flechas; con cualquier estilo predefinido seleccionado, este bloquea su geometría y sus colores con !important para que se vea igual en todos los sitios.

La regla práctica para personalizar: si su cambio no se aplica, la propiedad está bloqueada por un estilo predefinido o protegida frente a conflictos con el tema — añada !important a su declaración en el campo Custom Style correspondiente y tendrá prioridad.

Fuente de datos

Los productos salen del catálogo mediante la consulta de productos de la plantilla — de forma predeterminada, los productos más nuevos, mezclados con los artículos vistos recientemente por el visitante, con un límite de 12. La lógica de recomendación (más vendidos, vistos juntos, basada en el carrito, etc.) se define en la configuración de audiencia y de fuente de datos de la acción, como en cualquier recomendación de Personyze, con independencia de las opciones de diseño de este widget.

Consulte Configurar el feed de productos y Algoritmos de recomendación de productos.

Preguntas frecuentes

Las flechas se ven distintas en mi sitio que en el editor.
Con Arrow Style en none, es así por diseño — el tema del sitio les da estilo, y el editor no tiene tema. Elija cualquier estilo predefinido para tener un aspecto idéntico al píxel en los dos.

No se ven los puntos.
Los puntos solo aparecen cuando hay más de una página que desplazar. Con pocos productos o un Minimum Card Width alto en una pantalla ancha, todo cabe en una página y los puntos se ocultan.

La flecha de retroceso parece desactivada.
Al principio de la fila no hay nada hacia lo que retroceder, así que Fade Arrows at Row Ends la atenúa. Se activa en cuanto la fila se mueve. Desactive el atenuado si prefiere flechas siempre opacas.

He actualizado la plantilla y algunos ajustes se ven mal.
Los campos que guardó antes conservan sus valores guardados y prevalecen sobre los nuevos valores predeterminados de la plantilla. Restablezca un campo para que tome el valor predeterminado actual.

La reproducción automática se detiene sola.
Autoplay: Loop to Start está desactivado, así que se detiene en la última tarjeta, tal como está configurado. Actívelo para que dé vueltas continuamente. La reproducción automática también se pausa mientras el visitante pasa el ratón por encima o toca el slider — es intencionado.

¿Pueden los visitantes de escritorio arrastrar la fila con el ratón?
Sí — Drag to Scroll está activado de forma predeterminada. También pueden usar las flechas, los puntos, el trackpad o Mayús + rueda del ratón.

¿Por qué no puedo usar sel() en Space Between Cards?
El espacio se aplica en el primer pintado, antes de que se ejecute el procesamiento responsive, para garantizar una disposición estable desde el primer fotograma. Use una longitud simple; si necesita un espacio distinto en móvil, resuélvalo con una media query en Container Style.

¿Se muestran alguna vez los productos de demostración a visitantes reales?
No. Solo se muestran en el editor de Personyze y en los enlaces de vista previa con _S_T= , y solo mientras el catálogo devuelve como máximo un producto.