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.

The first gear icon shows you the popup trigger settings.

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.

Select device and expiry.

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>.

The bottom of my theme.liquid file. I have already inserted the ConvertKit code above the </body> tag.

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.

The ConvertKit popup firing on a test Shopify store.

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

Looking for a custom Webflow site?

Have any questions?

Thank you! Please check your email for confirmation.
Oops! Something went wrong while submitting the form.
Like this article? 
Check us out on Youtube!
Open Youtube