Edit the Newsletter Optin Block on BigCommerce

(00:00)
Hey, are you guys trying to edit your “Subscribe to our Newsletter” box on your BigCommerce store? Let me show you how to find it.
My name is Kal, and before we get started, I’m a store owner, developer, and I’ve been building BigCommerce stores since 2010. I’m here to help you guys out. Let me share my screen to show you where to locate this block.
So, we’re talking about this block down here. At least on the Cornerstone theme, it’s in kind of an ugly spot and doesn’t look that great. You may want to change the text, the button, or whatever.
(00:30)
To customize this, make sure you’re on a custom theme, as you can’t edit a default theme. Assuming you’ve already cloned your theme, click on Edit Theme Files. This will take you to the theme editor.
By default, you’ll be on the homepage. Now, if we scroll down, the template file you’re looking for is located under:
templates > components > common > footer
This is where all the footer stuff is, including the newsletter box itself.
(01:02)
In this section, you’ll see the last column in your theme where it checks if the “show newsletter box” is turned on. If it is, it calls this component:
components > common > subscription form
You’re already in the “common” folder, so scroll down to subscription-form.html. This file contains the guts of the newsletter opt-in form.
Now, you can either turn this off or replace it with something else. For example, you could replace it with a Klaviyo opt-in, which I highly recommend if you’re serious about your store. (If you need help setting that up, reach out to me and my team at Epic Design Labs.)
If you want to keep the native form, this is where you find it:
templates > components > common > subscription-form.html
(02:20)
Here, you’ll see an <h3> tag for the heading, which refers to lang.newsletter_subscribe. Below that, there’s a paragraph tag for the intro text, which refers to lang.newsletter_subscribe_intro.
You may wonder why these are called language variables instead of just regular text. On the front end, you see:
Subscribe to our newsletter
Get the latest updates on new products and upcoming sales
But in the code, it looks different because it’s pulling text from the language file.
(02:51)
You can find the language file under:
language > en.json
Most of you will be using the en.json file as your default language. There are other language files available if you’ve enabled multi-language support. For this example, we’re focusing on English.
I’m going to search for “newsletter” in the en.json file by doing a Ctrl + F to locate it quickly.
(03:26)
You’ll see a few occurrences of the word “newsletter” in the file. When we scroll through, we find this block of code that contains the settings for the text:
Subscribe to our newsletter
Get the latest updates on new products and upcoming sales
If you want to change the wording of these, you can edit them directly in the en.json file and hit save.
To change the heading: edit it here.
To change the sub-line text: edit it here.
To change the button text: edit it here.
(04:04)
Alternatively, you could go into the subscription-form.html file and manually edit the text, but the en.json file is technically the right place to change it. This ensures future multi-language support remains intact.
(04:39)
If you’re serious about your store, you should consider using Klaviyo for email marketing instead of the native BigCommerce form. Klaviyo’s form allows you to collect both email and SMS signups simultaneously, which is a nice feature.
That’s why I usually swap out the native form for a Klaviyo form on my sites.
(05:09)
So, that’s how you find the newsletter opt-in form and how you edit it. If you have any questions I didn’t answer, or if you’re stuck on something else, leave a comment below. I’d really appreciate it if you subscribe for more tips!
If you need a developer for your site, reach out to me and my team at Epic Design Labs.
Thanks, and talk soon!