How To Add A Custom Email Opt-In Box To Bigcommerce

Building your email list is one of the most crucial things you can do to set up your store for success. When a customer trusts you enough to give you their email, that tells you two things:

a) They like you

b) They are willing to hear from you repeatedly

Half the battle is already won, because your visitor is now hooked.

Bigcommerce stores come with Newsletter Subscribe boxes from the get-go, but to put it bluntly, they are hideous.


When something is buried so deep in a webpage and placed so inconspicuously, hardly anyone is going to opt in. Luckily, there is a better way. It involves some simple coding, and you can mess around with the styling as much as you want to make it mesh with the rest of your store. Even though this tutorial is for Bigcommerce, you can use the code on any website.

 Update: I’ve developed an app for Bigcommerce that lets you set up back in stock email notifications for customers looking at out of stock products. You can install it from the app store here.

Where to put the opt in box

My online store had a lot of content pages, so I kept the fancy box at the end of each page. This way, even if someone just found me by looking for information, there is still a chance that I’ll get their email address and be able to turn them into a customer over time.

You can put the opt-in box at the end of regular content pages and blog posts. In the Bigcommerce template editor(Design=>Edit HTML/CSS), in the list of files, find page.html.

Once page.html is open, on the top left, under “Files used by this template”, find PageContent.html.

In PageContent.html, below the code that says %%GLOBAL_PageContent%%, enter this code(I’ve added comments throughout the code to help you make sense of it):

<!–subscribe form–>

<!– This DIV is the main box – you can edit the styles however you like –>

<div id “subscribeBox” style=“display:inline-block; width:50%; height:auto; padding:5px; background:#200000; border:2px solid black; margin-right:25%; margin-left:25%;”>

<!– The form action is what the form does when someone clicks the submit button – it varies from email provider to email provider – check below the code for a link to how you can find it for MailChimp and Aweber –>

<form action=[enter form action]” method=“post” name=“mc-embedded-subscribe-form” target=“_blank” onsubmit=“if ( subbox1.value == ‘First Name’) { subbox1.value = ”; } if ( subbox2.value == ‘Last Name…’) { subbox2.value = ”; }” name=“Subscribe”>

<!–This is the heading text – your “hook”, or why someone should subscribe – make it interesting! –>

<h2 style =“text-align:center; color:white;”>The Most Awesomest Newsletter In The World</h2>

<!–There is also space for a subheading – use it well –>

<h3 style “color:white;”>I’m awesome because I am awesome.</h3>

<!–These are two text boxes – one for the first name, and one for the last name–>

<input type=“text” id=“subbox1” style“width:80%; display:block; box-shadow:none; padding:1rem; margin-left:auto; margin-right:auto; margin-top:3px; margin-bottom:3px;” value=“First Name” onfocus=“if ( this.value == ‘First Name’) { this.value = ”; }” onblur=“if ( this.value == ” ) { this.value = ‘First Name’; }” name=“FNAME” />

<input type=“text” value=“Email Address” id=“subbox” style“width:80%; display:block;box-shadow:none;padding:1rem; margin-left:auto; margin-right:auto; margin-top:3px; margin-bottom:3px;” onfocus=“if ( this.value == ‘Email Address’) { this.value = ”; }” onblur=“if ( this.value == ” ) { this.value = ‘Email Address’; }” name=“EMAIL” />

<!– Finally, you have the button – change the text in the ” ” after “value” to change what the button reads –>

<center><input class=“button” type=“submit” value=“Let’s Get Started!”/></center>

<!–end subcribe form–>

Note: This code is meant for MailChimp – if you use Aweber, you will need to modify the “name” attribute for both text boxes – you can find this info in the Aweber link below.

Find your form action code for MailChimp

Find your form action code for Aweber

The color of the <div> is set to match the theme of my store. You can replace the value after “color” to whatever you like – this page will tell you the HTML code for all web colors.

Let me know if you have any questions in the comments! Please share this post if you found it useful 🙂


  1. Thank you for this post. I would say that putting an email optin box is now a must for internet marketers and they tend to use different autoresponders which make this post more helpful if they are not using mailchimp or aweber.

  2. Thanks for sharing your thoughts about get. Regards

  3. Hiya – Thanks so much for posting this information. I have done exactly as stated – have my form action. Ready. Set. Go. But no Opt In Box is showing on my webpage. Have I missed something?

  4. Hey guys,

    If you want to add an opt-in form to your BigCommerce site, you may find that OptWidget is far easier. You use a graphical editor to generate your form, select the integrations you want, and then you have only 2 lines of code to install the form.

    OptWidget also provides complete support on form installation if you have trouble. The coolest part is you can have the forms do more than just add someone to an email list – they can also send out an auto responder, notify you that someone has subscribed, and even trigger custom actions on your website.

Speak Your Mind