Product Styles (Snippet Templates)
Product styles are reusable HTML templates that control how individual products appear inside your emails. Design a card layout once, then apply it across every email that includes products.
How Product Styles Work
When you add a Product block to an email template, you select a product style from a dropdown. At send time, the system takes each product's data (name, image, price, description, URL) and fills it into the style's HTML template using placeholders.
This means you design the look and feel of product cards separately from the email template itself. Change a product style and every email using it gets the updated design on the next send.
Available Placeholders
Use these tokens in your product style HTML:
| Placeholder | Replaced With |
|---|---|
{{product_name}} | The product's title (HTML-escaped) |
{{product_image}} | An <img> tag with the product image, or empty if no image |
{{product_description}} | Product description (truncated to 150 characters) |
{{product_price}} | Formatted price with currency symbol (e.g., $29.99) |
{{product_url}} | Link to the product page |
Default Style
Every organization starts with a built-in default product style. It's a simple card with image, title, description, price, and a "View Details" button. You can customize this or create additional styles for different use cases (e.g., a minimal style for newsletter grids, a detailed style for featured products).
Creating a Custom Style
- Go to the Product Styles page in the dashboard
- Click New Style
- Give it a name and enter your HTML template using the placeholders above
- The live preview on the right shows how it looks with sample data
- Save, then select it from the Product Style dropdown in the email editor
Tips for Email-Safe HTML
- Use
<table>-based layouts for maximum email client compatibility - All styling must be inline (no external CSS)
- Use
max-widthinstead of fixed widths so cards scale on mobile - Keep the total width under 280px per card if using grid layouts
- Test with the "Send Test Email" feature to verify rendering
Raw HTML in the Email Editor
When you switch to the HTML tab in the email editor, product blocks appear as placeholder tags like <product-snippet snippet-id="..." product-id="..." />rather than showing the style's full HTML. This keeps the email HTML clean and ensures the style is applied at send time, not baked into the template.