# Templates

Templates are a powerful way to customize your store's checkout flow.

Please read the [templates guide](/guides/templates.md) first.

Here are some examples of ready templates.

As plain text templates are pretty simple, we show complex html examples. Ensure to enable [html template rendering](/guides/templates.md#html-templates).

**Note**: the templates contain a lot of boilerplate code to workaround different email clients rendering issues. All examples are self-contained and are ready to be used in production.

They were generated by this [email template generator](https://emailbuilder.top) and modified to be actual templates.

## Simple summary table

![](/files/-MQ8snyUFFHSoLkpEQrA)

This template is just a simple example of how to use html in your templates for better design. This example utilizes a table with some custom styles to display bought items.

{% embed url="<https://gist.github.com/MrNaif2018/29345d711181421753f1226366a39d36>" %}

`product.html` is the template that renders each individual product.

We use some of the available variables to show the product price, quantity selected, and final calculated price. `store.default_currency` can be used to get product's currency.

And in `shop.html` template (containing most of the design), we just use:

```
{% for product in products %}
{{product}}
{% endfor %}
```

To include all products' rendered templates.

And we also use `{{store.name}}` to display store name at the top.

## HTML notification template

The following HTML template produces a nice summary to the recipient whenever a new order is placed. It can be used anywhere notification templates are supported, but this example is especially suitable for Telegram or other instant-messaging notification services.

![Example Rendered template](/files/xcm0ZG5KFfzKXSQC3jCW)

### Tips and gotchas

* Ensure that you *escape* all input -- *especially* user-provided input like email addresses, notes, and shipping addresses. You do this by using the `escape` filter, e.g. `{{ invoice.buyer_email|escape }}`.
* To use this template as a notification template, you need to ensure that HTML rendering is supported by your notification provider. Telegram supports HTML formatting in messages, [for example](/guides/telegram-notifications.md).

```html
<b>New Order in {{ store.name|escape }}</b>

From {{ invoice.buyer_email|escape }}
Price: {{ invoice.currency }} {{ invoice.price|format_decimal("price") }}
Sent amount: {{ invoice.sent_amount|round(6) }} {{ invoice.paid_currency }}

{% if invoice.promocode %}
* Promo: {{ invoice.promocode|escape }}
{% endif %}
{% if invoice.discount %}
* Discount: {{ invoice.discount }}
{% endif %}
{% if invoice.shipping_address %}
* Deliver to: 
{{ invoice.shipping_address|escape }}
{% endif %}

<b>Notes:</b>
{{ invoice.notes|escape }}
{% if invoice.products %}

<b>Invoice</b>
<code>
| Item          | Price    | Qty |  Total |
|---------------|----------|-----|--------|
{% for product in invoice.products %}
{% set q = invoice.product_quantities[product.id] %}
{{ "| %-14s| %8.2f | %3.0f | %6.2f |"|format(product.name,product.price,q,product.price*q) }}
{% endfor %}
</code>
{% endif %}

<b>Actions</b>
* <a href="https://my_store.xyz/admin/i/{{ invoice.id }}">Open checkout screen</a>
* <a href="https://my_store.xyz/store/{{ store.id }}">Open Store</a>

<b>Details</b>
* Status: {{  invoice.status }}

```


---

# 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.bitcart.ai/examples/templates.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.