El carrusel de productos principal de la galería: una sola plantilla que funciona como slider clásico de una fila o como cuadrícula desplazable de hasta cuatro filas, con precios y descuentos, valoraciones con estrellas, insignias de stock y un botón rápido Add to cart en cada tarjeta. Elija un Style accent (light, gold, bold, ocean) y todas las tarjetas, insignias, botones y precios cambian de color con un clic.
Qué incluye
- Slider o cuadrícula. Layout — Slider or Grid: 1 es el slider clásico de una fila; de 2 a 4, una cuadrícula que se desplaza de lado. Flechas laterales o en la barra del título, puntos de paginación, una barra de desplazamiento, reproducción automática que se detiene al pasar el ratón, arrastrar para desplazar y control del ajuste a las tarjetas — consulte Opciones del slider.
- Densidad. Un solo control (Compact, Standard, Roomy) cambia a la vez el tamaño de la imagen, los espacios y el relleno de los botones. Prevalece sobre los controles de tamaño individuales; vuelva a ponerlo en Standard y son ellos los que mandan otra vez.
- Insignias. Insignias de esquina (porcentaje de descuento / oferta, bajada de precio, poco stock), una pila de insignias que se puede mover (New, Back in Stock, Popular, Best Seller, una oferta por tiempo limitado con cuenta atrás, datos personalizados de su feed) y tres insignias libres con su propio texto en More Badges.
- Prueba social. Valoraciones con estrellas y número de reseñas, estadísticas semanales y diarias de vistas y ventas con tres aspectos (divided, plain, pill), un carrusel de prueba social y un temporizador de cuenta atrás.
- Efectos al pasar el ratón. Sombra de la tarjeta, zoom de la imagen, una segunda imagen al pasar el ratón, una capa superpuesta con botones, un panel que sube desde abajo y un botón de acción que entra al pasar el ratón (siempre visible en pantallas táctiles).
- Texto del producto. Título, línea de marca o subtítulo, descripción, una columna de datos personalizada, precio por unidad, línea de pagos, insignia de ahorro, enlace de opciones, botón de enlace y corazón de lista de deseos. Card Info Order (standard, brand-first, price-first) ordena las líneas bajo la imagen; Title Style Preset (plain, accent-bar, underline, boxed, eyebrow) da estilo al encabezado del widget, y en la barra del título puede ir un enlace View-All.
Cómo funciona esta plantilla
Esta plantilla y Overlay Slider & Grid se basan en cuatro ideas:
- Acentos de estilo. Style accent (light, gold, bold, ocean), en la primera sección del menú, cambia a la vez el color de las tarjetas, las insignias, los botones, los precios y los puntos con un clic. Light y ocean encajan en sitios claros; gold y bold son los aspectos prémium oscuros — las tarjetas oscuras con precios y botones dorados son simplemente el acento gold. Después, cada color se puede seguir cambiando en su propio campo de estilo.
- Catalog Fields en un solo lugar. La sección Catalog Fields (la segunda del menú) asigna cada columna de producto que usa la plantilla — imágenes, URL, título, marca, las dos columnas de precio, valoración, número de reseñas, descripción, inventario, porcentaje de descuento, categoría, fecha de fin de la oferta y campos personalizados. Definir una columna ahí actualiza todos los elementos que la usan, así que una tienda con un feed totalmente personalizado puede reconectar todo el widget desde esta única sección.
- Modo de demostración en vivo. Mientras diseña aparecen seis productos de demostración (los visitantes nunca los ven). La primera tarjeta de demostración es un escaparate en vivo: haga clic en cualquier elemento de ella para darle estilo, y cada interruptor — insignias, el botón de acción, las capas superpuestas, las estadísticas, la descripción, el precio por unidad — responde visiblemente en ella. Consulte Productos de demostración.
- Precios centralizados. La sección Pricing tiene un único selector Price Format (standard, european, rounded, rounded-european) y un único par de campos de símbolo de moneda que se aplican en todos los lugares donde aparece un precio, incluida la capa sobre la imagen. Un producto sin precio no muestra nada — ningún símbolo de moneda huérfano.
Opciones del slider
Están en la sección Slider & Navigation, salvo Space Between Cards, que está en Widget Layout.
| Opción | Qué hace | Por defecto |
|---|---|---|
| Layout — Slider or Grid | 1 = el slider clásico de una fila. 2, 3 o 4 = una cuadrícula: los productos llenan cada columna de arriba abajo (con 2 filas, los productos 1 y 2 forman la primera columna), y las columnas se desplazan de lado. | 1 |
| Items Visible — Desktop / Tablet / Mobile | Cuántas tarjetas (en una cuadrícula, columnas) se ven a la vez. Se admiten decimales: 1.15 en móvil muestra un trocito de la tarjeta siguiente como indicación de que se puede deslizar. |
4 / 3 / 1 |
| Tablet Breakpoint (px) / Mobile Breakpoint (px) | Por debajo de estos anchos, mandan el número de tableta y el de móvil. | 1024 / 640 |
| Swipe Strip — Minimum Card Width | Un mínimo para el ancho de la tarjeta. Cuando la fila es demasiado estrecha para que quepa el número elegido con este ancho, las tarjetas lo conservan y la fila se desplaza en lugar de estrecharlas. | 120px |
| Space Between Cards | El espacio entre tarjetas. Use una longitud simple como 24px, no sel(): el espacio se aplica en el primer pintado, antes de que se calculen los valores responsive. |
24px |
| Swipe Strip — Scroll Behavior | x mandatory siempre se detiene en el borde de una tarjeta; x proximity se ajusta solo cuando la fila se detiene cerca de un borde; none se desplaza libremente. |
x mandatory |
| Swipe Strip — Items Per Arrow 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 el tamaño de pantalla actual (2 en un teléfono que muestra 2, 4 en un escritorio que muestra 4). |
1 |
| Arrows on Sides (Classic) | Flechas grandes centradas en los bordes izquierdo y derecho de la fila. Arrows — Side Arrow Offset las mueve fuera de la fila (negativo, p. ej. -10px) o sobre las tarjetas (positivo). |
Activado, 6px |
| Swipe Strip — Title-Bar Arrows | Botones ‹ › compactos a la derecha del título del widget. Necesita que se muestre la barra del título. | Desactivado |
| Arrows — Arrow Style | Aspectos predefinidos, cada uno con su propio efecto al pasar el ratón: circle (círculo claro), dark, pill, outline, soft. none deja que el tema de su sitio dé estilo a las flechas. Para ajustar un aspecto predefinido, añada CSS en Arrows — Side Arrow Custom Style con !important en cada propiedad que quiera que prevalezca. |
circle |
| Swipe Strip — Fade Arrows at Ends Hide Arrows on Touch Devices |
Atenúa y desactiva la flecha de retroceso al principio de la fila y la de avance al final. Oculta todas las flechas en teléfonos y tabletas, donde deslizar es lo natural. | Activado / Activado |
| Swipe Strip — Pagination Dots | Puntos en los que se puede hacer clic bajo la fila. Solo aparecen cuando hay más de una página que desplazar, y se reconstruyen cuando cambia el tamaño del widget. | Activado |
| Swipe Strip — Scrollbar | Una barra de desplazamiento fina bajo la fila, con su propia altura y sus propios colores de control y de pista. | Desactivado |
| Drag to Scroll with Mouse | Los visitantes de escritorio pueden agarrar la fila y arrastrarla, como en una pantalla táctil. Un arrastre nunca cuenta como un clic en un producto. | Activado |
| Swipe Strip — Autoplay Interval (ms) | Avanza cada N milisegundos, p. ej. 4000; 0 o vacío es desactivado. Se detiene mientras el visitante pasa el ratón o toca el slider. Swipe Strip — Autoplay Loops to Start decide qué pasa en la última tarjeta: volver a la primera (on) o detenerse (off). |
Desactivado; bucle activado |
Cómo se dimensionan las tarjetas
Usted no fija el ancho de la tarjeta. Se calcula a partir de cuántas tarjetas quiere ver:
card width = (row width − (items visible − 1) × gap) ÷ items visibley nunca baja de Swipe Strip — Minimum Card Width. La altura de la tarjeta, las esquinas y cómo llena la foto la tarjeta se fijan en Card & Image → Card Box Style (Height, Corners, Image Fit) — el valor predeterminado height: sel(280px, 220px) da a escritorio y a móvil su propia altura.
Cuántos productos recibe el widget lo decide la propia recomendación: Recomendaciones a mostrar en su tarjeta Salida, hasta 12. Con 2 filas y 12 productos, la cuadrícula tiene seis columnas que recorrer.
Productos de demostración
Seis productos de ejemplo le permiten diseñar antes de conectar un catálogo. Solo se muestran en el editor de Personyze y en los enlaces de vista previa, y solo mientras el widget tiene como mucho una tarjeta de producto real; en cuanto su catálogo devuelve más, sus productos toman el relevo. Los visitantes nunca los ven. El interruptor es Widget Layout → Demo Products (Preview Only), y se puede dejar activado sin problema.
El botón Add to cart
En Add to Cart & View Buttons, Button Action decide qué hace el botón de la tarjeta. Add to cart (uses your cart integration), el predeterminado, pone el producto en el carrito del visitante sin salir de la página; Open the product page es un enlace normal, para un catálogo sin integración de carrito. Add to cart ejecuta el código de añadido rápido al carrito guardado para su cuenta, y Quick Add to Cart — Cart Integration Argument se pasa a ese código como segundo argumento. On Success y On Error — Custom JavaScript sustituyen el aviso predeterminado «Added to cart» por su propio código.
Conviene saber
- Los elementos por dispositivo siguen al widget, no solo a la pantalla. En un escritorio, un slider colocado en una barra lateral estrecha pasa por sí solo al número de tableta o de móvil, porque los números se aplican a partir del ancho del propio widget.
- Text on Image elimina los duplicados automáticamente. Mientras Show Text on Image está activado, el título, la línea de marca y el precio de debajo de la foto se ocultan solos.
- Los estilos de hover son campos aparte. Si cambia el color base de un botón, repítalo en el campo Hover Style correspondiente para que el hover sea coherente.
- 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
- Overlay Slider & Grid — el mismo motor con el nombre y el precio sobre la foto.
- Vertical Product List — una lista apilada para barras laterales y columnas estrechas.
- Botón de añadido rápido al carrito — el código que ejecuta el botón Add to cart.
- Asistente de Recomendaciones de productos — cómo elegir lo que recomienda el widget.
- Galería de plantillas — todos los diseños listos para usar.