> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shoply.gg/llms.txt
> Use this file to discover all available pages before exploring further.

# Email Templates

> Change the emails buyers get in your store's name: their words, their look and their HTML, with a preview beside them and the original a click away

Email Templates is under **Marketing**, then **Email Templates**. Every email a buyer gets in your store's name is a card there, in its group, with a picture of it as it would be sent. One you have changed says **Edited**. A card opens the email over the whole window, in a builder laid out as the store builder is, with its HTML and CSS a press away.

Along the top: back, the email's name, which opens a menu of every email to switch to another, **Computer** and **Phone** for the size it is shown at, undo and redo, three dots for **Edit Code**, **Send Test Email** and **Revert to Original**, and **Save**, which says **Saved** once nothing is left to save. Down the left, what the email is made of; on the right, the settings of what is picked.

Email Templates needs a computer: on a phone it says to open it on one.

## The emails

| Group | Email | When it is sent |
| - | - | - |
| Orders | **Order Receipt** | When an order is paid, and when you send it again |
| | **Invoice** | When you send an invoice or a payment link |
| | **First-Order Coupon** | 15 minutes after a buyer's first order |
| Customer Panel | **Sign-in Code** | When a buyer signs in to the customer panel |
| | **Balance Code** | When a buyer pays with their store balance |
| | **Sign-in Code for Your Site** | When a buyer signs in on your own site, through the [Customer API](/guides/customer-api.md) |
| | **Ticket Reply** | When you reply to a [support ticket](/guides/support-tickets.md) |
| Subscriptions | **Renewal Reminder**, **Renewal Charged**, **Renewal Past Due**, **Card Declined**, **Subscription Paused**, **Subscription Ended** | As in [Subscriptions](/guides/subscriptions.md) |
| Cart Recovery | **First Reminder**, **Card Declined**, **Second Reminder** | As in [Cart Recovery](/guides/cart-recovery.md) |
| Win-Back | **First Email**, **Second Email** | As in [Win-Back](/guides/win-back.md) |

An email you have not changed is sent exactly as Shoply writes it.

## The builder

The email as it will look, to change where it stands, as a page is in the store builder.

The list on the left is the email's name, then **Card** and **Under the Card**, which open to their blocks in their order, as a page's sections open to their elements. A row shows a block's name and the start of its words, and picks it. Its grip drags it to another place, and its three dots **Move Up**, **Move Down**, **Duplicate** and **Remove** it. A lock marks a part the email cannot go without. **Shared CSS** is at the list's foot.

**Add Element**, under each, opens the elements: a title, a heading, text, small text, a button, an image, a space and a divider, with a search. Under **From This Email** are the email's own parts that you have taken out, to put back. Picked, an element goes at the end of the card, or of what is under it.

Click any part of the email to pick it too: its name is over it, with a bar to **Move Up**, **Move Down**, **Duplicate** and **Remove**. The card picked has **Add Element** on its foot. Double-click words to change them in place.

Settings are on the right only while something is picked, in folds, one open at a time: **Content** (its words, where a button or a link goes, an image's address), **Text** (size, weight, colour and line up), **Spacing** and **Background**. **Insert Variable**, over its words, puts a variable where the caret is. The handle on their edge slides them away and back, with the pick kept.

Variables (`{{ order.id }}`) and parts (`{{ parts.delivery }}`) are drawn as they are: a variable as a small pill, a part as what it holds for a sample buyer. Undo and redo are in the bar, and on Ctrl or Cmd and Z.

What you do here is the email's HTML: **Edit Code** shows it.

## Code

**Edit Code**, under the three dots, opens the email as code, laid out as the code studio is. The email is two files, its HTML and its CSS, as tabs over the editor. The HTML is the card and what is under it; Shoply writes the page round it. The preview beside it is the email as it would be sent, a moment after you stop typing, on a computer or a phone; its handle slides it away for more room. Under the editor, what is wrong and where the caret is. The foot of the strip on the left goes back to the builder.

It is written with Liquid's marks for what changes from one buyer to the next. `{{ store.name }}` prints a value, `{{ parts.summary }}` a part only Shoply writes, and `{% if coupon %} ... {% endif %}` shows something only sometimes. **Variables** in the strip is every variable and part of the email, each with what it holds for a sample buyer; a click puts it where the caret is. A value printed is always text, never markup.

| | |
| - | - |
| **Variables** | The store (`store.name`, `store.url`, `store.panel_url`), `year`, and the email's own: an order's ID, total and how it was paid, a coupon's code, a subscription's renewal day, a sign-in code. |
| **Parts** | What only Shoply writes for each buyer: a receipt's keys and downloads (`parts.delivery`) and what was paid (`parts.summary`), your logo (`parts.logo`), your socials (`parts.socials`), what a reply does (`parts.reply_note`), and on the reminders written as a note where the buyer gets help (`parts.help`: a reply where your emails take replies, otherwise your support link). Their look is changed in the CSS tab. |

Some marks an email cannot be saved without: a receipt's `{{ parts.delivery }}` and `{{ parts.summary }}`, an invoice's `{{ parts.lines }}`, a ticket reply's `{{ parts.messages }}`, a code's `{{ code }}`, and on Cart Recovery's and Win-Back's emails `{{ links.unsubscribe }}`, so a buyer can stop them.

An email may hold the tags an email is made of: tables, blocks of words, links, pictures, lists, a line. Never a script, a form, a frame or `<style>` (CSS goes in the CSS tab), and no `on...` attribute. A link goes to `https://`, `http://`, `mailto:` or `#`, a picture to `https://`, or either to a variable. What is wrong is underlined on its line, said under the editor and listed in **Problems** (its icon has a red dot), and **Save** waits until it is put right. A name no variable has is said too, and does not stop a save: it prints nothing.

The Code tab is Monaco, the editor inside VS Code: Ctrl or Cmd and F finds, and Ctrl or Cmd and S saves.

> [!NOTE]
>
> A `{% %}` mark between two rows of a table is somewhere a browser moves it, so an email that has one can only be changed in its code. The builder says so.

## CSS

The CSS tab, beside the HTML: how the email looks. The originals are written with a few classes, listed in **Classes** in the strip with what each is (`.title`, `.lead`, `.button td`, `.key`, `.footnote`); a click starts a rule for one. The preview beside shows each rule as you type it.

A rule sets how things look: colours, type, room, edges and corners, widths. It is written with types, classes, ids and attributes, with a space or a `>` between them. `@media` and `:hover` are kept for the mail apps that read them. Not allowed: a picture or a font from another site (`url()`), `position`, `*`, and Shoply's own classes, which start with `shp-` or `shoply-`.

Gmail and Outlook drop a `<style>` block in many of their apps, so before an email is sent Shoply writes each rule into every part it is for. What is set on a part in the builder is over the CSS tab's rules for its class.

### Shared CSS

**Shared CSS**, in the page's head and at the foot of the builder's list, is CSS every email gets, under each email's own. It has a screen of its own, with the email it is previewed on picked from the menu over the preview. Saving it draws every email from its template, Shoply's original where you have not changed it.

## The subject

The subject is the line over the email, with its variables as pills. The receipt's reads `Your {{ store.name }} order is delivered ({{ order.id }})`: the order's ID is a variable, which you keep or take out like any words. In the builder, press it, or the mark beside the email's name, and it is in the email's settings on the right, as written, with **Insert Variable** and what it is sent as for a sample buyer. In the code, press it or its pencil and change it in place; Enter keeps it. Type the original back, or leave it empty, and it is the original again. One line, up to 150 characters.

Cart Recovery's and Win-Back's subjects are written here too.

## What stays Shoply's

The page round the email, its dark look in a mail app set to dark, and the last line under it, "Sent with Shoply", are written under every email whatever its HTML says. A mail app set to dark (Apple Mail among them) shows Shoply's dark look over your colours; a rule of your own in `@media (prefers-color-scheme: dark)`, with `!important`, changes it.

## Saving, the original, and a test

* **Save** saves the email's HTML, CSS and subject together, as does Ctrl or Cmd and S. Nothing is saved as you type. Leaving or switching to another email with something unsaved asks first.
* **Revert to Original**, under the three dots, puts the email back as Shoply wrote it, its CSS and subject too, after asking. Your shared CSS stays.
* **Send Test Email**, under the three dots, sends the email as it is on screen, saved or not, about a made-up buyer, to the address you type. One test every five minutes.

An email you have changed that cannot be drawn when it is sent (something in it Shoply cannot read) is sent as Shoply wrote it instead, so a buyer always gets their receipt.

## Through the API

A key with **Read Email Templates** (`emails.read`) and **Change Email Templates** (`emails.write`) reaches all of it but the test: [List email templates](/api-reference/email-templates/list-email-templates.md), get, change, preview and revert one, and the shared CSS.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.