Personyze Wiki Personyze Wiki docs
Español
Open Personyze
Documentación/ Vertical Product List — precios, valoraciones y cuenta atrás

Vertical Product List — precios, valoraciones y cuenta atrás

Una lista vertical de recomendaciones para barras laterales y secciones estrechas: tarjetas blancas con foto, título, precio, insignias y Añadir al carrito, en disposición lateral o apilada, con un botón Show More progresivo y…

4 min read Actualizado hace 18 horas

Productos en filas apiladas — pensado para barras laterales, columnas estrechas, páginas de carrito y ubicaciones en blogs donde no cabe un carrusel. Cada fila muestra la foto, el título y el precio, con insignias, valoraciones con estrellas opcionales, un botón rápido de añadir al carrito y una cuenta atrás en las ofertas por tiempo limitado. Un botón Show More muestra el resto, unos pocos cada vez.

Cómo funciona esta plantilla

  • Dos disposiciones. List Layout → Form Position alterna entre side — la fila clásica de barra lateral, con una miniatura junto al texto (Thumbnail Width y Height (Side Layout), 96px por defecto) — y stacked — la imagen arriba y el texto debajo, como tarjetas completas. Space Between Items fija el espacio entre filas.
  • Show More. Al principio se ven Items Shown Initially elementos (3 por defecto), y cada clic en el botón muestra Items Revealed Per Click más (3 por defecto). Cuando todo está visible, el botón pasa a ser Show Less y vuelve a contraer la lista. Show More Button Position puede ser centrado, a la izquierda, a la derecha o a todo el ancho; desactive Show More Button para mostrar todos los elementos a la vez.
  • Listas Top 10. Numbering (Top-10 Style) → Show Item Numbers pone una insignia numerada en cada elemento, para listas de clasificación.
  • Acentos de estilo. Style accent (light, gold, bold, ocean) cambia a la vez el color de la numeración, el título, las estrellas, los botones y los fondos de los elementos; gold es el aspecto prémium oscuro. Cada color se puede seguir cambiando por separado en su propio campo de estilo.
  • Insignias. Las insignias Popular, Best Seller, New, las basadas en tiempo y las personalizadas (del feed) comparten una misma pila — arriba a la izquierda por defecto, que se puede mover con Badge Stack Corner. Las demás tienen sus propias esquinas: Discount arriba a la derecha, Price Drop abajo a la derecha, Low Stock abajo a la izquierda y el corazón de lista de deseos arriba a la derecha. La insignia Back-in-Stock está en la sección New Badge.
  • La cuenta atrás. La Time-based Offer Badge lee el Offer End Date Field (una marca de tiempo Unix de su catálogo), puede hacer la cuenta atrás en vivo (Show Countdown Timer) y se oculta sola una vez pasada la fecha.
  • Catalog Fields y precios centralizados. Catalog Fields (el segundo del menú) asigna una vez por sitio cada columna de producto que usa la plantilla. 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 para todos los precios de la lista.
  • Añadir al carrito. En Quick add to cart, Button Action elige entre Add to cart (uses your cart integration) — el valor predeterminado, que ejecuta el código de añadido rápido al carrito de su cuenta — y Open the product page, un enlace normal. Quick Add to Cart — Cart Integration Argument se pasa a ese código como segundo argumento.
  • Productos de demostración. Demo Products (Preview Only) muestra seis productos de ejemplo mientras diseña, antes de conectar un catálogo. Solo aparecen en el editor de Personyze y en los enlaces de vista previa; en cuanto su catálogo carga más de un producto, se muestran los suyos. Los visitantes nunca los ven.

Conviene saber

  • 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

Did this page answer your question?
Thank you — that goes to whoever maintains this page.