How to Use Pop-ups with Shopify

Sendlane's intelligent pop-ups are a great tool to use directly on your Shopify store! You can utilize pop-ups, banners, and even inline forms to collect contacts as they are navigating through your store! 

In this article, we'll share how to locate your pop-up code, plus we'll also dive into installing each of the 3 different pop-up forms into your Shopify store:

• Pop-up
• Banner
• Inline
• Additional Resources

Before Getting Started 

You will first need to create a pop-up in your Sendlane account. 

Also, be sure to integrate Shopify and Sendlane if your store isn't connected yet!

Locating the Code for your Pop-up

1. Navigate to Pop-ups using the left side navigation bar from your dashboard.
2. Click on the three dots next to the pop-up form that you would like to add to your Shopify store. From the dropdown selection, click on GET CODE

   

3. This will bring up a pop-up of the code you need to add directly to your Shopify Store.

Adding your Pop-up code to Shopify

1. Once you login to your Shopify store, navigate to the Themes section under Online Store. 

   

2. Click on the Actions dropdown in the Live Theme area and select Edit code. 

3. This will bring you to a file that contains all of the code to your Shopify store. Click on the Sections folder and locate the header.liquid file. Open this file.

4. Copy the code for your form from the Published screen. For pop-up and banner form types, paste the code inside the <header> or <footer> tags. For inline forms, paste the code inside the parent tags in your desired location.

5. Click Save and you are all set! Open your Shopify store to view the pop-up that will appear when a contact visits your store. 

   Please Note

   Be sure to adjust the pop-up settings in Sendlane so that it will appear at the time and frequency desired.

Adding your Banner code to Shopify 

1. Once you login to your Shopify store, navigate to the Themes section under Online Store. 

2. Click on the Actions dropdown in the Live Theme area and select Edit code. 
3. This will bring you to a file that contains all of the code to your Shopify store. Click on the Sections folder and locate the header.liquid file. Open this File.

   

4. You will now be able to edit the code for this file! Grab the code for your Pop-up form and paste it at the top of the file. 



5. Click Save and you are all set! Open your Shopify store to view the banner that will appear when a contact visits your store.

Adding your Inline code to Shopify 

1. Once you login to your Shopify store, navigate to the Themes section under Online Store. 
2. Click on Customize In the Live Theme area.

   

3. From the customize page, click on Add Section 

4. A list of sections will appear for you to choose from. Select Custom Content at the bottom. 

5. You will then be prompted to add content to your section. Click on the Add Content button followed by Custom HTML

6. Here will be the area for you to add in the Raw Form code. Paste it directly into the HTML block area. 

   Please Note

   Inline forms can only be added to Shopify using the Raw Form code. This code is meant to match the style or theme of your Shopify page.

Your inline pop-up can now be used on your Shopify page!

Additional Resources

• Hey Shopify… Meet Sendlane!
• Introducing Deep Data For Shopify!
• Automatically Retarget Your Shopify Abandoned Cart Customers in Sendlane
• Sendlane + OneClickUpsell - The Shopify App You Need to Boost Your eCommerce Sales
• How Shopify Uses Diverse Content To Keep Their Newsletters Feeling Fresh
• The Art of Upselling in Shopify: Boosting AOV with Carthook

TL;DR

Locating code: Pop-ups → Click 3 dots next to pop-up → Get Code → Copy

Pop-up: Login to Shopify → Online Store → Themes → Actions → Edit Code → Sections → header.liquid → Copy Pop-up form code → Paste at the top

Banner: Login to Shopify → Online Store→ Themes → Actions → Edit Code → Sections → header.liquid → Copy Banner form code → Paste at the top

Inline: Login to Shopify → Online Store → Themes → Live Themes → Customize → Add Section → Custom Content →  Add Content → Custom HTML → Copy Raw Inline From code → Paste