Personyze Wiki Personyze Wiki docs
Español
  • English
  • Español
  • Français
  • Deutsch
  • Italiano
  • Nederlands
  • Português
  • Polski
  • 日本語
  • العربية
Open Personyze
Documentación/ Plantilla: slider de recomendaciones con tarjetas Clean Catalog

Plantilla: slider de recomendaciones con tarjetas Clean Catalog

El carrusel de productos completo: sliders, cuadrículas de varias filas e insignias, con acentos de estilo, campos del catálogo en un solo lugar y precios centralizados.

4 min read Actualizado hace 40 minutos

El carrusel de productos completo: una sola plantilla que abarca sliders clásicos, cuadrículas desplazables de varias filas y tarjetas de merchandising llenas de insignias. Elija un Style accent (light, gold, bold, ocean) y todas las tarjetas, insignias, botones y precios cambian de color en un clic.

Qué incluye

  • Cuadrículas de varias filas (ajuste Rows), flechas laterales o en la barra de título, puntos de paginación, barra de desplazamiento, reproducción automática con pausa al pasar el ratón, arrastre para desplazar y control del ajuste a las tarjetas.
  • Insignias de esquina (porcentaje de descuento / oferta, bajada de precio, poco stock) y una pila de insignias que se puede mover (New, Popular, Best Seller, ofertas por tiempo limitado, datos personalizados).
  • 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 ticker de prueba social y un temporizador de cuenta atrás.
  • Efectos al pasar el ratón: sombra de la tarjeta, zoom de la imagen, fundido a una segunda imagen, una capa superpuesta con botones, un panel que sube desde abajo y un Añadir al carrito animado.
  • Texto del producto: título con estilos predefinidos para el encabezado del widget, línea de marca/subtítulo, descripción, columna de datos personalizada, precio por unidad, línea de pagos, enlace de opciones, botón de enlace, lista de deseos.
  • Card Info Order (standard / brand-first / price-first) y un enlace View-All en la barra de título.

Cómo funciona esta plantilla

Esta familia de plantillas se basa en cuatro ideas:

  • Style accents. El primer ajuste, Style accent (light, gold, bold, ocean), cambia a la vez el color de las tarjetas, las insignias, los botones, los precios, los puntos y las barras de desplazamiento en un clic. Después, cada color se puede seguir sobrescribiendo por separado en su propio campo de estilo.
  • Catalog Fields en un solo lugar. La sección Catalog Fields (la segunda del menú) asigna todas las columnas de producto que usa la plantilla — imágenes, URL, título, marca, las dos columnas de precio, valoración, descripción, inventario, porcentaje de descuento, fechas y campos personalizados. Las asignaciones son globales: definir una columna ahí actualiza todos los elementos que la usan. Las tiendas con feeds totalmente personalizados pueden reconfigurar todo el widget desde esta única sección.
  • Modo de demostración en vivo. Mientras diseña, aparecen automáticamente productos de demostración realistas (los visitantes nunca los ven). La primera tarjeta de demostración es un escaparate en vivo: haga clic en cualquier elemento para darle estilo, y cada interruptor — insignias, Añadir al carrito, capas superpuestas, estadísticas, descripción, precio por unidad — responde visiblemente sobre ella.
  • 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 aparecen precios, incluida la capa superpuesta sobre la imagen. Los productos sin precio no muestran nada — ningún símbolo de moneda suelto.

Conviene saber

  • Los elementos por dispositivo responden al contenedor, no solo a la pantalla. El número de elementos visibles (escritorio / tableta / móvil) se aplica a partir del ancho del propio widget, así que funciona correctamente en la vista previa por dispositivo del editor, en móviles reales e incluso dentro de barras laterales estrechas.
  • Text on Image elimina los duplicados automáticamente. Mientras la capa superpuesta está activada, 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 sus 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.
Did this page answer your question?
Thank you — that goes to whoever maintains this page.