How to add a popup form to your Shopify website

A step-by-step guide to embedding a Flodesk popup form on your Shopify website.

Flodesk popup forms help you capture your visitors’ email addresses so you can grow your list and stay connected with your audience.

Popup forms appear on top of your website content and are designed to grab attention. When used thoughtfully, they can be one of the most effective ways to turn website visitors into subscribers.

This guide walks you through how to add your Flodesk popup form to a Shopify website.

Make sure you have:

• A popup form created in Flodesk

• Access to your Shopify admin dashboard

• Permission to edit your Shopify theme code

You’ll only need to add one piece of code from Flodesk: the popup header code.

1. Log in to your Flodesk account.

2. Go to Forms.

3. Create a Popup form.

4. Customize the design, text, and settings to match your brand.

5. When you're finished, click Embed.

6. Copy the Header code that appears.

You’ll add this code to your Shopify theme in the next steps.

1. Log in to your Shopify admin dashboard.

2. Click Online Store.

3. Select Themes.

4. Under Current theme, click Customize.

1. Click the three dots (•••) in the top left corner.

2. Select Edit code from the dropdown menu.

This opens Shopify’s theme code editor.

1. In the left sidebar, locate the Layout folder.

2. Click theme.liquid.

This file controls the main structure of your Shopify website.

1. Scroll through the file until you find the closing </head> tag.

2. Paste your Flodesk header code directly above the </head> tag.

This allows your popup form to load on your website.

See the screenshot below as a reference.

1. Click the Save button in the top right corner.

2. Visit your website to confirm the popup is working.

Your popup form should now appear according to the display settings you configured in Flodesk.

To add a popup form to Shopify:

1. Create and customize your popup form in Flodesk.

2. Copy the header code from the Embed settings.

3. In Shopify, open Online Store → Themes → Edit code.

4. Open theme.liquid under the Layout folder.

5. Paste the code right before the </head> tag.

6. Save your changes.

Your popup form will now appear on your Shopify website.

A few things to check:

• Make sure the header code was pasted above the </head> tag.

• Confirm you clicked Save in the Shopify code editor.

• Check your popup display settings in Flodesk.

• Clear your browser cache or try viewing the site in an incognito window.

Yes. Adding the code to theme.liquid loads the popup across your entire website. The popup’s timing and behavior are controlled by the settings in Flodesk.

Yes. Popup timing and behavior are controlled inside Flodesk.

You can choose triggers such as:

• Immediately

• Time delay

• Scroll percentage

These settings determine when visitors see your popup.

No. Adding the code once in theme.liquid automatically loads the popup across your Shopify site.

Yes. Simply return to Online Store → Themes → Edit code, open theme.liquid, and remove the Flodesk header code you added. Then click Save.

No. The code simply loads your Flodesk popup form. It does not change your theme design or layout.