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 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 shows how to use tags in text, links and image URLs.