Popups can easily be set up with ConvertKit and without any code, by choosing the ‘modal’ option inside ConvertKit forms and then embedding on your Shopify site. Read on to see how and why you need to do this.

One of the biggest advantages of Shopify vs a platform like Amazon is that you can collect your customer's email.

Email is how you keep your visitor. Websites, unlike social media, lack a ‘follow’ feature — so you could be getting a ton of good traffic and then losing all those people because they forgot about your store!

Email is what gets them to come back.

I have a Shopify client who receives almost 50% of their sales from return customers. Most of these return to the site after an email promotion.

If she wasn’t using email marketing, she would have only half as many buyers.

Imagine doubling your revenue by using email.

If you aren’t using an email marketing tool yet, I recommend ConvertKit.

There are others like Mailchimp & Klaviyo. But if you are new to email marketing then you just need the basics, and ConvertKit is perfect because it’s so easy to use.

Let’s get started.

There are actually three things that you would normally need to set up.

1. Customers that have bought something, should automatically get added to your subscribers. Luckily the ConvertKit Shopify App does this for us. Install the app and your customers will start being added to your subscribers.
2. A popup or ‘modal’, that shows up for a customer, enticing them to join your newsletter. That’s what this guide covers. It’s one of the most effective ways to get more signups.
3. Linking ConvertKit to your built-in Shopify subscribe box. This requires some code changes and will be covered in another tutorial.

Step 1: Sign up for ConvertKit

If you haven’t already done so, head to ConvertKit and set up a new account.

If you use this link I would be very grateful as you will be supporting me as a blogger and allowing me to publish more articles like this one.

It’s very quick to create an account and you can start building your popup right away.

Step 2: Create a new form, select Modal

1. Go to landing pages and forms and click the ‘Create’ button.
2. Select Form.
3. Select Modal.
4. Choose any template that you prefer.

Great, your form is created and ready to go. You need to update the styling a bit before it’s ready to use.

Step 3: Style the popup

This part is pretty easy. You can use all the color and font options inside ConvertKit to make your popup look more attractive and match your brand.

If you’ve chosen a template with an image, I recommend optimizing your image in squoosh.app first.

Step 4: Click the gear icon, choose the popup trigger and expiry.

You can ignore the Custom Domain part. That’s only if you want to use the form as a landing page. The part we are interested in is lower down, under Display Options.

You have 3 options for the trigger.

1. Timing. This is the most common option. You can simply set an amount of time after which the popup shows up. This allows your customer to get to know your site before you present the popup. I usually use around 30 seconds.
2. Scroll percentage. This popup will be displayed when a person has scrolled a certain % amount down the page. This is great because you don’t want to annoy your customer right away.
3. Exit Popup. This will trigger the popup when it detects that someone wants to close the window or leave your website. It’s a good way to bring people back with a discount offer.

Scroll lower down and you will see the devices dropdown. I recommend only showing popups on desktop. Because Google now penalizes sites showing popups on mobile. This is because of how often they cover the entire screen on mobiles and generally degrade the user experience.

The expiry is pretty easy — it’s simply how often you want your popup to show up for the same person. Usually it’s only once a week or fortnight. You don’t want to annoy people if they don’t want what’s in your popup.

Step 5: Embed the ConvertKit popup on your Shopify site

Now you just need to add the popup into your theme code. Don’t worry, you don’t need to change much. It’s just one line that you need to paste into your theme.liquid file.

1. In your Shopify admin, go to Online Store and then click on Themes.
2. Click on Actions and then Edit Code.

3. Great. You should now be in the theme code editor. You are looking for the theme.liquid file. So use the search box and type ‘theme.liquid’.

4. Scroll to the very bottom of theme.liquid. The file should end with something like </body> and </html>.

5. Now you need to copy the ConvertKit embed code. So, back inside the ConvertKit form editor, at the top, you should see the embed button, it’s right in between preview, and reports. Click embed and copy the code for the Javascript option — it should be the first one that comes up.

6. Go back to Shopify, and paste that line of code right above the </body> tag. Save theme.liquid and exit.

You're done.

Congratulations! Your popup should now be firing. A couple notes:

• Keep in mind that you would normally only see it once because of the expiry that you set. If you set it to show one every 7 days, then you will see your popup a first time, and then only 7 days later.
• So how can you test it out if you’re still customizing it? Just open a new Chrome window in incognito mode (File > New Incognito Window). This creates a fresh new window without any cookies, so you will see your popup again. Close this window and open it again each time you want to see your popup.
• You can change your popup in ConvertKit, (e.g. colors) and the changes should show up on your site — IF you used the Javascript embed option. If for any reason you used one of the other options, you need to copy and paste them into your Shopify again after making changes in ConvertKit.