Bloco Product add-on

O bloco Product add-on oferece um único produto específico que você escolhe como complemento dentro do carrinho, promovendo um produto conhecido (uma garantia, uma amostra, um best-seller) como adição rápida diretamente no carrinho.

• Se nenhuma variante ativa for resolvida — o produto não está definido, foi arquivado ou está sem estoque — o bloco não renderiza nada em vez de um botão morto.
• O controle reflete se a linha de complemento deste próprio bloco está no carrinho, então desativá-lo remove a linha que ele adicionou (e não afeta o mesmo produto adicionado em outro lugar).
• Um preço comparativo aparece riscado quando há uma remarcação genuína; o rótulo de ”% off” fica oculto se o desconto arredondar para menos de 1%.
• A imagem do complemento volta para a imagem em destaque do produto quando a variante escolhida não tem imagem.

Title, Price label e Description suportam os mesmos quatro tokens: {{product_title}}, {{price}}, {{compare_at_price}} e {{savings}}.

• Região: body ou bottom.
• Máximo: 3 por estado do carrinho — o carrinho cheio e o carrinho vazio têm cada um a própria cota.
• Estado: tanto carrinho cheio quanto vazio.
• Não é adicionado por padrão. Não é fixo — você pode removê-lo ou ocultá-lo.

Suporta um template personalizado pela aba Code, que substitui a marcação nativa deste bloco pelo seu JSX. Estas são as props que ele recebe. Estilize este bloco pela seção Design no painel de configurações. São substituições por bloco que se sobrepõem ao seu design global e voltam a ele quando ficam em branco. A seção Text em Design permite controlar a tipografia de três elementos. Use o seletor Text element para alternar entre eles. Title — o nome do produto. Também suporta uma família de fonte personalizada. Negrito e cor do texto são definidos no Rich Text Editor acima (na aba Settings), não aqui. Price — a linha de preço. Negrito e cor do texto são definidos no Rich Text Editor acima. Description — o texto de apoio. Negrito e cor do texto são definidos no Rich Text Editor acima. O que são configurações de design? Saiba mais aqui: Configurações de design.