# Export to Shopify Messaging

Design in Figma, export with Sendra, paste into Shopify Messaging as a custom-coded email. Shopify Messaging, formerly Shopify Email, is on the Basic, Grow, Advanced and Plus plans, with 10,000 free emails a month.

## Before you start

- Put your images online: turn on **Host images online** in Sendra, which every plan includes, or use your own image URLs. Pasted code carries no image files, so every image must already be online.
- Set your preview text in **Properties**. It travels inside the code.
- A free trial cannot send: Shopify shows **Shopify Messaging is not available with your free trial**. On a trial you can still paste the email and check Shopify's preview.
- Shopify takes up to 500 KB of code per email.

## What Shopify needs in every email

Shopify's code box opens with **Please note that templates must include `{{ unsubscribe_link }}` and `{{ open_tracking_block }}` variables.** Put an unsubscribe link and the open-tracking tag in your design, and your store's address in the footer.

**Unsubscribe link.** Type "Unsubscribe" in your footer, select it, and put this in its **Link** field: `{{ unsubscribe_url }}`. Give it its own text layer, since Figma's link box will not accept a tag. Either unsubscribe tag counts for Shopify, and `{{ unsubscribe_url }}` is the one for a Link field: `{{ unsubscribe_link }}` is a ready-made link rather than an address. The link opens your store's own address.

**Open tracking.** Type `{{ open_tracking_block }}` as the text of its own text layer, at the very bottom of the email. Shopify shows nothing in its place. Keep the layer small. Never put the tag in a **Link** field: a link with it only reloads the page. Keep the layer on **Desktop + Mobile** in **Show on**: on **Hidden**, classic Outlook does not get the tag at all, and other inboxes get it hidden.

**Store address.** Put these tags in your footer text: `{{ shop.address.address1 }}`, `{{ shop.address.city }}`, `{{ shop.address.province }}`, `{{ shop.address.zip }}` and `{{ shop.address.country }}`. They come from the store address in **Settings**, then **General**, and a tag stays empty until that address is filled in. Shopify notes that US and Canadian law can require a postal address.

Note: type the tags exactly as shown, including the spaces inside the braces. See [Merge tags](/personalization-and-merge-tags/) for how Sendra treats them.

## Tags you will use most

Type these in Figma exactly as shown. Text tags go in a text layer, link tags go in a Link field.

| What it does | Tag | Where |
|---|---|---|
| First name | `{{ customer.first_name }}` | text |
| Last name | `{{ customer.last_name }}` | text |
| Email address | `{{ customer.email }}` | text |
| Store name | `{{ shop.name }}` | text |
| Street address | `{{ shop.address.address1 }}` | text |
| Unsubscribe | `{{ unsubscribe_url }}` | Link |
| Open tracking | `{{ open_tracking_block }}` | text |

For the first name with a fallback, type `{{ customer.first_name | default: "there" }}`. A customer without a first name sees "there".

## Preview text

Set it in Sendra's **Properties**. It travels inside the code, so leave Shopify's **Preview text** field empty. Merge tags work in Sendra's preview text too, such as `Hi {{ customer.first_name }}`.

## Import the email

1. In your Shopify admin, go to **Apps**, then **Messaging**, and click **Create campaign**.
2. Choose **Code your own**.
3. In Sendra, click **Copy HTML**, then paste the code into Shopify.
4. In **To**, choose all subscribers or a segment, and add a subject line.

To use the email again, save it as a template: in Messaging's list of campaigns, open the **...** menu on the email and choose **Save as template**. The same menu has **Duplicate email**. The template shows in **Templates** with a code icon, and under **Custom templates** when you create a campaign.

## Check it

Shopify's preview fills the tags with a sample customer, with a first name like Bob. Its phone view shows the email as it looks on a phone: rows stack as they do in Sendra's preview.

Click **Send test** and enter up to five addresses, then compare the test with the one you sent from Sendra. Test emails use the same sample customer as the preview, with a first name like Bob. On a new store, **Send test** can say **Test emails are temporarily unavailable for your store**, and at first, test emails go only to the sender email address.

When it looks right, click **Review**. If a tag is missing, Review stops and shows **Add `{{ open_tracking_block }}` variable.** or **Add `{{ unsubscribe_link }}` variable**. The second appears only when the email has no unsubscribe tag at all: `{{ unsubscribe_url }}` in the Unsubscribe layer's **Link** passes Review.

Then click **Schedule send**, and send it now, at Shopify's suggested time, or at a time you choose. A real send fills each subscriber's own details, and with the first-name fallback, a subscriber without a first name sees "there".

## Changing it later

Keep Figma as the source: change the design, export again, and paste again.

## Dynamic content

Shopify fills `{{ customer.first_name }}` and your store's details when it sends. [Merge tags](/personalization-and-merge-tags/) shows how to use tags in text, links and image URLs.