Template de card

Remplace la card produit par ton propre HTML. Il s'édite dans le panneau (Apparence → Avancé → Template de card) avec aperçu en direct, et accepte variables, conditionnels et itération sur les étiquettes du produit.

Exemple

<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>

Le bouton « Ajouter au panier » est injecté automatiquement après ton HTML si tu l'as activé — inutile de l'inclure dans le template. Les styles de ta card vont dans le Custom CSS.

Variables

Variable	Contenu
{{name}}	Nom du produit.
{{url}}	URL de la fiche produit.
{{image}}	URL de l'image principale.
{{brand}}	Marque.
{{category}}	Catégorie principale.
{{price}}	Prix actuel formaté.
{{price_original}}	Prix avant la réduction. ATTENTION : si le produit N'EST PAS en promo, cette variable vaut la même chose que {{price}}, elle n'est pas vide — enveloppe-la dans {{#if on_sale}} si tu ne veux pas la voir en double.
{{sale_pct}}	Le NOMBRE de la réduction, sans signe ni symbole : « 24 », pas « -24% ». Le format, c'est toi qui l'écris : -{{sale_pct}} %. Vide quand le produit n'est pas en promo.
{{currency}}	Symbole/code de la devise.
{{reference}}	Référence interne (SKU).

Une variable sans valeur pour un produit est remplacée par du texte vide — le rendu ne casse jamais.

Conditionnels et itération

{{#if champ}}…{{/if}} ne rend le bloc que si le champ a une valeur. Champs disponibles : on_sale · available · image · brand · category · badges · sale_pct · name · url · price · price_original · currency · reference. Pas d'imbrication de conditionnels. Le plus utile est {{#if price}} : dans un moteur sans prix pour cet acheteur (B2B sans tarif de groupe, prix sur demande), un {{price}} seul n'affiche rien, mais le balisage autour si — enveloppe-le et la card reste propre.

{{#each badges}}{{.}}{{/each}} itère sur les étiquettes du produit (promo, épuisé, nouveauté…) selon ce qui est configuré dans le panneau.

Limites et sécurité

Jusqu'à 20 000 caractères.
Le modèle N'EST PAS assaini côté serveur : le serveur ne vérifie que sa taille et le stocke tel quel. L'assainissement se fait dans le widget au rendu (et dans l'aperçu du panneau, avec le même code) : il retire <script>, <style>, <iframe>, les attributs on*= avec n'importe quel séparateur et tout attribut-URL dont le schéma n'est pas dans la liste blanche (http, https, mailto, tel, data:image et chemins relatifs), avant et après la résolution des variables. Ce n'est pas un sanitizer HTML complet : relis le modèle comme du code qui va tourner dans ta boutique. Le JS a son éditeur et le CSS le sien.
Si le marchand masque les prix (catalogues B2B), les variables de prix sont vidées automatiquement.