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

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. 

   Please Note

   There is an option that allows you to email this code directly to your developer. This will allow your development team the ability to add the pop-up directly to your 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. 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 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 you 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 follow by Custom HTML

6. Her 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 meant to match the style or theme of your Shopify page.

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

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