# Templates Recommendations (HTML / CSS)

Templates let you **design and reuse visual layouts for your product recommendations** - in both your **website** and **emails**. 

They combine the **flexibility of HTML / CSS** with the **power of dynamic product data** from your recommendation strategies.

Instead of building each banner manually, you can **create a reusable template once**, connect it to any strategy (cross-sell, trending, similar products…), and let the data fill it automatically.

<figure><img src="https://2350286830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6Yw9IRJ6KbbucQPwZUCZ%2Fuploads%2FxoYHViZn5GJuF9PMXfqn%2Fimage.png?alt=media&#x26;token=9b3abf1b-5741-4555-b6e4-b2729d7bccf7" alt=""><figcaption></figcaption></figure>

## Why use templates?

{% stepper %}
{% step %}

### Hybrid testing in action

Compare two recommendation logics (e.g. *similar products* vs *best sellers*) or two visual layouts (*carousel* vs *grid*) within the same A/B test.
{% endstep %}

{% step %}

### Unify your design

Keep the same look & feel across all your recommendation banners (web and email).\
It ensures brand consistency and better UX.
{% endstep %}

{% step %}

### Empower marketing teams

Marketing or CRM teams can **edit visuals, copy, and colors** directly in the R\&M interface - no developer needed.
{% endstep %}

{% step %}

### Reduce integration time by API

Templates can be called **via API** or **embedded automatically** through the Recos Tag.\
Perfect for e-commerce sites, newsletters, or CRM automation.
{% endstep %}

{% step %}

### Scale personalization

Once designed, a template can be **reused across multiple strategies** - homepage, PDP, post-purchase, or even reactivation emails.
{% endstep %}
{% endstepper %}

## How does it work ?

When a recommendation runs, it returns a list of products.\
Templates render that list inside an HTML structure you define, using [Jinja2](https://jinja.palletsprojects.com/en/stable/templates/) syntax:

```html
{% for product in products %}
  <div class="product-card">
    <img src="{{ product.img_link }}" alt="{{ product.name }}">
    <h3>{{ product.name }}</h3>
    <span class="price">{{ product.price }} €</span>
  </div>
{% endfor %}
```

Each field of your product dataset can be used as a placeholder (name, price, brand, etc.).

## Example use cases

| Use case                  | Channel     | Description                                              |
| ------------------------- | ----------- | -------------------------------------------------------- |
| **Cross-sell banner**     | Web         | Display complementary products under the PDP or in cart. |
| **Post-purchase email**   | CRM         | Recommend products after an order confirmation.          |
| **Seasonal campaign**     | Web + Email | Quickly restyle a block for Black Friday or Christmas.   |
| **Reactivation campaign** | Email       | Suggest items similar to what the user last viewed.      |

## What you get ?

* A **designer-level rendering** of recommendations in minutes
* A **unified brand experience** across web & email
* A **shorter time-to-value** for new campaigns
* A **no-code flexibility** for marketers

In short: Templates bridge **design, marketing, and personalization -** in one place.

## Next steps

If you’re ready to start how creating Templates :

{% content-ref url="../how-tos/how-to-create-a-template-of-recommendation" %}
[how-to-create-a-template-of-recommendation](https://docs.abtasty.com/recommendations-and-merchandising/how-tos/how-to-create-a-template-of-recommendation)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/recommendations-and-merchandising/getting-started/templates-recommendations-html-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.