Skip to main content
The Email Love Figma Plugin exports your email design as HTML ready for a Shopify custom-coded campaign, with Shopify’s required unsubscribe and open-tracking Liquid variables already in place. Unlike most ESP integrations, Shopify works as a download: pick Shopify from the export dropdown, click Export, and the plugin gives you a zip file. You then import the HTML file into Shopify using the Code your own option in the campaigns app. Download the Email Love Figma Plugin here

​
Prerequisites

Before you begin, make sure you have:
  • A Shopify store with Shopify Messaging (formerly Shopify Email) installed
  • The Email Love Figma plugin installed
  • At least one email designed in Figma using the plugin
  • An Email Love Footer with an Unsubscribe link pointing to https://unsubscribe.com in your design
  • Image hosting turned on in the export settings (see the note below)
There’s no API key and no login flow. Shopify is a download destination, not a direct API push. Shopify custom-coded campaigns must be created on a desktop device.
Turn image hosting on before you export. The unsubscribe and open-tracking Liquid variables are only written into the HTML when image hosting is enabled. If you export with image hosting off, the unsubscribe link stays as the literal https://unsubscribe.com placeholder and {{open_tracking_block}} is missing, so Shopify will reject the campaign or send it without a working unsubscribe link. See Image Hosting.
1

Open the Export Panel

  1. Select the email frame you want to export in Figma
  2. Click the Export button in the top right of the plugin
  3. Pick Shopify from the export dropdown. You can also start typing “shopify” to filter the list.
The dropdown is alphabetised, so Shopify sits in the S section of the A–Z list of ESPs underneath the HTML, MJML, and Email Love Builder options.
2

Check Your Export Settings

  1. Make sure image hosting is on, so your images are uploaded to the Email Love CDN and the Liquid variables are written into the HTML
  2. Check the total file size shown in the export panel. Shopify caps custom-coded emails at 500 KB (and custom Liquid sections at 50 KB). Turning on HTML minification helps if you’re close to the limit.
3

Export Your Email

  1. With Shopify selected, click Export
  2. The plugin sends your design to the Email Love backend, which compiles it to HTML and swaps your unsubscribe link for Shopify’s {unsubscribe_link} variable, appending {{open_tracking_block}} to the link
  3. Your browser downloads a zip file containing the HTML
There’s no API call to Shopify. The export ends with the download. You’ll bring the file into Shopify in the next step.
4

Import the HTML Into Shopify

  1. Unzip the download. You’ll see a .html file (one per template if you exported several).
  2. From your Shopify admin, open the campaigns app (Apps > Messaging)
  3. Click Create campaign, then choose the Code your own option. This is the only route that accepts your own HTML: the standard drag-and-drop templates won’t take it.
  4. Click Import and select the .html file from the unzipped folder. You can also open the file in a text editor and paste its contents into the code editor instead.
  5. Add your subject line and preview text, then preview and send a test to yourself before scheduling
Imported files must be .html format. See Shopify’s guide to creating a coded email for the full campaign flow.

​
Why download instead of direct API push?

Shopify has no public API for creating a Messaging email campaign from HTML, so there’s nothing for the plugin to push to. Shopify’s own import flow is the supported route, and it accepts exactly the HTML file the plugin produces.

​
What the Plugin Does for You

  • Inserts Shopify’s unsubscribe variable: your Email Love Footer’s https://unsubscribe.com link becomes {unsubscribe_link}, which Shopify requires in every marketing email
  • Adds the open-tracking variable: {{open_tracking_block}} is appended to the unsubscribe link, satisfying Shopify’s requirement when open tracking is active. Both variables are required, and the footer is the conventional place for them.
  • Keeps a custom unsubscribe tag you chose yourself: if you set your own unsubscribe merge tag in the plugin’s Properties panel, the plugin leaves it alone. See Unsubscribe Links.
  • Hosts your images (when image hosting is enabled) so the HTML references CDN URLs that work as soon as you import, with no manual upload into Shopify’s file library
  • Generates responsive, deliverable HTML that renders consistently across major email clients

​
Troubleshooting

Shopify says my email is missing required Liquid variables: This almost always means you exported with image hosting off. Re-export with image hosting on and import the new file. You can confirm by opening the HTML and searching for {unsubscribe_link}: if you see https://unsubscribe.com instead, the pass didn’t run. My unsubscribe link wasn’t converted at all: The plugin only converts links pointing to exactly https://unsubscribe.com. www.unsubscribe.com, http://, or a bare unsubscribe.com are left as-is. See Unsubscribe Links. Shopify rejects the file as too large: Custom-coded Shopify emails are capped at 500 KB. Turn on HTML minification in the export settings, make sure image hosting is on so images aren’t inlined, and split very long emails if needed. Nothing downloads when I click Export: Check your browser’s download permissions for emaillove.com. The export ends with a browser download, so a popup blocker or download prompt may be holding it up. Try Export again from a fresh tab if needed. Images aren’t loading after I import: If you exported with image hosting off, the zip includes a separate Images folder and the HTML references local file paths that won’t resolve inside Shopify. Re-export with image hosting on, or upload the images to Shopify’s Content > Files library and update the src URLs before importing. Part of my design didn’t come through: Shopify’s custom-coded editor only supports its own documented Liquid variables. Any unsupported Liquid you added by hand won’t populate. The plugin’s own output is plain HTML plus the two Shopify variables above, so this only affects code you added yourself. Need help? Join our Discord community or reach out to our support team at hello@emaillove.com for assistance.
  • Export Overview: Understand all export options and how the plugin converts your Figma design to HTML
  • Unsubscribe Links: How the plugin converts unsubscribe links to each ESP’s merge tag
  • Image Hosting: How the plugin handles image hosting during export