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:

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.

  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.

  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 

Please Note

Inline forms will need to be placed in a specific area of your Shopify store. With this in mind, you will need to be able to locate the specific folder and navigate through the code to locate the exact spot for your inline form. 

  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

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 

Still need help? Get in touch! Get in touch!

Related Articles