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).
2) 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”.
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”.
6) Now, you’ll need to log into your BigCommerce site and navigate to “Design” in the menu (see image below):
7) Then, click on “Edit HTML/CSS” in order to view your store’s HTML files.
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”.
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”.
10) We’re almost done. Click on “HTMLHead.html” to view this html file on the right-hand side.
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.
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.
