Template do card

Substitua o card de produto pelo seu próprio HTML. Edita-se no painel (Aparência → Avançado → Template do card) com pré-visualização em direto, e admite variáveis, condicionais e iteração sobre as etiquetas do produto.

Exemplo

<a class="mi-card" href="{{url}}">
  {{#if image}}<img src="{{image}}" alt="{{name}}" loading="lazy">{{/if}}
  {{#if brand}}<span class="mi-marca">{{brand}}</span>{{/if}}
  <h3>{{name}}</h3>
  <p class="mi-precio">
    {{price}}
    {{#if on_sale}}<s>{{price_original}}</s> -{{sale_pct}} %{{/if}}
  </p>
  {{#each badges}}<span class="mi-badge">{{.}}</span>{{/each}}
</a>

O botão «Adicionar ao carrinho» é injetado automaticamente depois do seu HTML se o tiver ativado — não é preciso incluí-lo no template. Os estilos do seu card vão no Custom CSS.

Variáveis

Variável	Conteúdo
{{name}}	Nome do produto.
{{url}}	URL da página do produto.
{{image}}	URL da imagem principal.
{{brand}}	Marca.
{{category}}	Categoria principal.
{{price}}	Preço atual formatado.
{{price_original}}	Preço antes do desconto. ATENÇÃO: se o produto NÃO está em promoção traz o mesmo valor que {{price}}, não vem vazio — envolve-o em {{#if on_sale}} se não o quiseres repetido.
{{sale_pct}}	O NÚMERO do desconto, sem sinal e sem símbolo: «24», não «-24%». O formato escreve-lo tu: -{{sale_pct}} %. Vazio quando o produto não está em promoção.
{{currency}}	Símbolo/código da moeda.
{{reference}}	Referência interna (SKU).

Uma variável sem valor para um produto é substituída por texto vazio — nunca quebra o render.

Condicionais e iteração

{{#if campo}}…{{/if}} pinta o bloco só se o campo tiver valor. Campos disponíveis: on_sale · available · image · brand · category · badges · sale_pct · name · url · price · price_original · currency · reference. Sem aninhamento de condicionais. O mais útil de todos é {{#if price}}: num motor de busca sem preço para esse comprador (B2B sem tarifa de grupo, preço sob consulta), um {{price}} solto não mostra nada, mas a maquetação em volta sim — envolva-o e a card fica limpa.

{{#each badges}}{{.}}{{/each}} itera as etiquetas do produto (promoção, esgotado, novidade…) conforme o configurado no painel.

Limites e segurança

Até 20.000 caracteres.
O modelo NÃO é sanitizado no servidor: o servidor só verifica o tamanho e guarda-o tal como está. A sanitização acontece no widget ao renderizar (e no preview do painel, com o mesmo código): remove <script>, <style>, <iframe>, os atributos on*= com qualquer separador e todo atributo-URL cujo esquema não esteja na lista branca (http, https, mailto, tel, data:image e caminhos relativos), antes e depois de resolver as variáveis. Não é um sanitizer HTML completo: reveja o modelo como reveria código que vai correr na sua loja. O JS vai no seu editor e o CSS no seu.
Se a loja oculta os preços (catálogos B2B), as variáveis de preço são esvaziadas automaticamente.