How To Install LeadPages LeadBoxes On Your BigCommerce Site

Here’s how to install LeadPages on your BigCommerce site.

Let’s start from when you log into your LeadPages account. I’m going to show you specifically how to install a LeadPage LeadBox which is an opt-in form that will popup on your site after a visitor views a certain number of pages or exits the site.

1) Click on the LeadBoxes tab in the top menu. Then, click on the lead magnet you want to install as a popup on your BigCommerce site (see red arrow).

LeadPages Account View2) When you select the lead magnet that you want to install as a popup, you’ll see the below image.

3) Click on  “Popup LeadBox”.

LeadPages Popup LeadBox

4) You’ll have three options as settings for your Popup LeadBox. I recommend at first to leave all of these at their default of “0”. This is necessary if you want to be able to test your installation. Once you know the popup works, you can change the settings.

5) Now, copy the HTML code at the bottom-left of this screen where it says “Publish above as HTML code”.

LeadPages LeadBox  - Publish Above As HTML Code

6) Now, you’ll need to log into your BigCommerce site and navigate to “Design” in the menu (see image below):

BigCommerce Design

7) Then, click on “Edit HTML/CSS” in order to view your store’s HTML files.

BigCommerce Store Design

8) You are looking for a Panel called “HTMLHead.html”. So, on the left-hand side of the screen, under “Other Template Files”, you need to scroll down until you see “Panels”.

BigCommerce Panels

9) Now that you’ve located “Panels” in the left side-bar, you need to scroll below it until you find the file called “HTMLHead.html”.

BigCommerce HTMLHead for LeadPages

10) We’re almost done. Click on “HTMLHead.html” to view this html file on the right-hand side.

BigCommerce HTMLhead file

11) Within this html file, you simply need to scroll to the bottom and look for the /head tag. Remember the LeadPage LeadBox code you copied earlier? You want to now paste that code just before the /head tag. So, add some space between the code %%GLOBAL_RTLStyles%% and the /head tag, and then paste your code for the LeadBox Popup.

Insert LeadPages code on BigCommerce

12) I recommend adding a comment just above the Popup LeadBox code so that you remember in the future what this code was for. You must use “<!–” before the sentence so that it doesn’t get read as code but as a comment.

You’ll notice I have a second set of LeadPage code in the above image. That’s for the Exit LeadPage. If you want a popup when a visitor starts to exit your site, you can place that code directly below the Popup LeadBox code.

13) Lastly, click “save” on the very upper-left corner of the screen. Refresh (shift + reload) your BigCommerce site in your internet browser and test the Popup LeadPage for proper functioning.

If the LeadPage is working as expected according to the settings you used, you can now go back into the LeadPage interface and change the settings for the Popup or Exit LeadPage and simply replace the code you previously added to the HTMLHead.html file.

That’s it! I hope these step-by-step instructions help you install LeadPages LeadBoxes on your BigCommerce site. Time to start collecting those email addresses!

 

If you have any questions or suggestions for clarification, please leave a comment below and I will respond.

3 Steps To Creating Your First Business With The Startup Assembly Manual

startup-assembly-manual-book-timothy-freriks

If you'd like to start your own business but don't know where to begin----this book is for you. Below, Kevin Kauzlaric interviews author Tim Freriks about his new book that provides aspiring entrepreneurs with a method for building a business … [Continue reading]

Outsourcing vs. Crowdsourcing – What Should You Choose for Custom Designs

Outsourcing Vs Crowdsourcing1

The following post was written by Rahul Aggarwal, the founder of Desighill. The quality, cost and effectiveness of graphic designs can spell the difference between the success and failure for your start-up or small business. That’s why it’s … [Continue reading]