Plantilla de card
Sustituye la card de producto por tu propio HTML. Se edita en el panel (Apariencia → Avanzado → Plantilla de card) con vista previa en vivo, y admite variables, condicionales e iteración sobre las etiquetas del producto.
Ejemplo
<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> El botón «Añadir al carrito» se inyecta automáticamente después de tu HTML si lo tienes activado — no hace falta incluirlo en la plantilla. Los estilos de tu card van en el Custom CSS.
Variables
| Variable | Contenido |
|---|---|
| {{name}} | Nombre del producto. |
| {{url}} | URL de la ficha del producto. |
| {{image}} | URL de la imagen principal. |
| {{brand}} | Marca. |
| {{category}} | Categoría principal. |
| {{price}} | Precio actual formateado. |
| {{price_original}} | Precio antes del descuento. OJO: si el producto NO está de oferta trae el mismo precio que {{price}}, no viene vacío — envuélvelo en {{#if on_sale}} si no quieres verlo repetido. |
| {{sale_pct}} | El NÚMERO del descuento, sin signo ni símbolo: «24», no «-24%». El formato lo escribes tú: -{{sale_pct}} %. Vacío si el producto no está de oferta. |
| {{currency}} | Símbolo/código de la moneda. |
| {{reference}} | Referencia interna (SKU). |
Una variable sin valor para un producto se sustituye por texto vacío — nunca rompe el render.
Condicionales e iteración
{{#if campo}}…{{/if}}
pinta el bloque solo si el campo tiene valor. Campos disponibles:
on_sale · available · image · brand · category · badges · sale_pct · name · url · price · price_original · currency · reference.
Sin anidamiento de condicionales. El más útil de todos es
{{#if price}}:
en un buscador sin precio para ese comprador (B2B sin tarifa de grupo, precio bajo petición), un
{{price}}
suelto no pinta nada, pero el maquetado que lo rodea sí — envuélvelo y la card queda limpia.
{{#each badges}}{{.}}{{/each}}
itera las etiquetas del producto (oferta, agotado, novedad…) según lo configurado en el panel.
Límites y seguridad
- Hasta 20.000 caracteres.
- La plantilla NO se sanea en el servidor: el servidor solo comprueba el tamaño y la guarda tal cual. El saneo lo hace el widget al renderizar (y el preview del panel, con el mismo código): quita
<script>,<style>,<iframe>, los atributoson*=con cualquier separador y todo atributo-URL cuyo esquema no esté en la lista blanca (http, https, mailto, tel, data:image y rutas relativas), antes y después de resolver las variables. No es un sanitizer HTML completo: revisa la plantilla como revisarías código que va a correr en tu tienda. El JS va en su editor y el CSS en el suyo. - Si el comercio oculta los precios (catálogos B2B), las variables de precio se vacían automáticamente.