Bloque Product add-on

El bloque Product add-on ofrece un único producto específico que eliges como complemento dentro del carrito, promoviendo un producto conocido (una garantía, una muestra, un superventas) como adición rápida directamente en el carrito.

• Si no se resuelve ninguna variante activa — el producto no está establecido, está archivado o está agotado — el bloque no renderiza nada en lugar de un botón muerto.
• El control refleja si la línea de complemento de este propio bloque está en el carrito, así que desactivarlo elimina la línea que agregó (y no afectará al mismo producto agregado en otro lugar).
• Un precio de comparación aparece tachado cuando hay una rebaja genuina; la etiqueta de ”% off” se oculta si el descuento redondea por debajo del 1%.
• La imagen del complemento recurre a la imagen destacada del producto cuando la variante elegida no tiene ninguna.

Title, Price label y Description admiten los mismos cuatro tokens: {{product_title}}, {{price}}, {{compare_at_price}} y {{savings}}.

• Región: cuerpo o parte inferior.
• Máximo: 3 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno su propio cupo.
• Estado: tanto carrito con artículos como carrito vacío.
• No se agrega de forma predeterminada. No está bloqueado — puedes eliminarlo u ocultarlo.

Admite una plantilla personalizada desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe. Dale estilo a este bloque con su sección Design en el panel de configuración. Son anulaciones por bloque que se aplican encima de tu diseño global y recurren a él cuando están en blanco. La sección Text de Design te permite controlar la tipografía de tres elementos. Usa el selector Text element para alternar entre ellos. Title — el nombre del producto. También admite una familia tipográfica personalizada. La negrita y el color del texto se establecen en el Rich Text Editor de arriba (en la pestaña Settings), no aquí. Price — la línea de precio. La negrita y el color del texto se establecen en el Rich Text Editor de arriba. Description — el texto de apoyo. La negrita y el color del texto se establecen en el Rich Text Editor de arriba. ¿Qué son las configuraciones de diseño? Aprende más aquí: Configuraciones de diseño.