(00:01)
Hey there! Are you trying to edit your BigCommerce footer? In this video, I’m going to show you a couple of ways to do just that.
Before we get started, my name is Kal. I’m a developer and store owner just like you, and I also run a private community for store owners called E-commerce Growth. Every week, I post videos about e-commerce, so if you find this one helpful, give it a like and… what do you do? Subscribe and hit the bell so you don’t miss out on future content.
(00:34)
Let’s dive in! I’ll show you a couple of ways to edit your footer on BigCommerce.
I have this theme here, which is the basic Cornerstone theme. We’ve got a very simple footer at the bottom, and I’ll show you how to edit it.
Your footer may be made up of different dynamically populated menu columns, depending on your theme.
For instance, here we’ve got the Pages menu pulling from the Storefront Web Pages. All of this content—Shipping, Returns, Contact Us, Blog—is controlled from there.
(01:16)
If you go into Web Pages in your store, you can push things up or down or create new items. This will affect your footer and also the top navigation if you’re sharing the same menus. Be mindful of that when making changes.
The next column here shows my Categories, which match my top categories. If that works for you, great! Otherwise, we may need to make adjustments.
Originally, I had a Brands section here, but since I don’t have any brands loaded, it disappeared dynamically. You might still see Brands or other columns that you want to remove.
(02:23)
Let’s go to the back end and start editing. We’ll head to Storefront > My Themes. I’m using the untouched version of the Cornerstone theme, which can’t be edited directly.
So, I’m going to click Make a Copy and apply the copied version to make it live. This will let me edit the theme files.
(02:58)
Let’s give this a minute. By the way, how are you guys doing? How’s your cat? I wish I had a cat, but my wife won’t let me get one. Crazy, right? A grown man who can’t have a cat… Anyway, the theme has copied, so let’s click Apply. I’ll stick with the light version of this theme, and now we can edit it.
(03:40)
We’ll go to Advanced > Edit Theme Files.
We’re looking for the Footer file, which is found under Templates > Components > Common > footer.html.
Inside the footer, you’ll see blocks of code. We’re focusing on the section that outputs menu items like pages, categories, brands, and the store address.
Let’s say I want to move the address from the middle of the footer to the far left.
(05:35)
We’ll go to Store Setup > Store Profile and enter a fake address: 123 Main Street, Portland, Oregon.
Once that’s saved, it will show up in the footer, but it’s not in the spot we want, so let’s fix that by moving the address code in the footer file.
(06:21)
Here’s the address block. I’m going to copy this entire section, comment it out, and paste it before the first article in the footer to move it to the left. Once saved and refreshed, the address will appear in the correct place.
(07:45)
Now, if you want to edit the links in the footer, like removing the Sitemap link, go back into the footer.html file and find the Pages Loop.
Comment out the sitemap line, rather than deleting it, so you can easily add it back if needed.
You can also hardcode links by creating new list items if you don’t want the links to be dynamically generated.
(09:44)
Let’s say we want to hardcode some new links. I’ll create list items labeled Link 1, Link 2, Link 3, and so on. We’ll point them to a URL of your choice.
After commenting out the dynamic menu, refresh the front end to see the changes. Now, we have our hardcoded links in place.
(10:56)
If you want to change the section title, like from Navigate to Browse, go to the Lang (Language) file.
We’ll open the en.json file, search for footer.navigate, and change it to Browse.
If you want multilingual support, you’ll need to create variables for each language.
(12:29)
Once saved and refreshed, you’ll see the title updated to Browse. You can do the same thing for other sections, depending on your needs.
(14:55)
Lastly, if you’re looking for an easier way to edit the footer, consider using Regions. Regions allow you to insert widgets using BigCommerce’s drag-and-drop Page Builder.
I’ll show you how to add a region for the Categories section. Once that’s done, we’ll head to Storefront > Customize and use Page Builder to drag a widget into the region.
(16:48)
For example, I could add an image widget or, better yet, a custom menu widget from my Epic Page Builder Widgets app. This app is available in the BigCommerce App Store and allows you to create custom menus and other elements.
(19:07)
Once the widget is in place, you can style it to match the rest of the footer. You can change the font size, color, and spacing to ensure everything looks consistent.
(20:56)
That’s it! You’ve seen how to hardcode links, use dynamic menus, and leverage the Page Builder with regions to make future updates easier.
If this video was helpful, click the like button!
If you’re interested in joining our e-commerce community, visit joinecommercegrowth.com.
And if you need a developer for your store, head over to epicdesignlabs.com. I’ve been doing this for 11 years and love helping build million-dollar stores.
Leave a comment if you’re stuck, and maybe I’ll cover it in a future video. Thanks for watching, and I’ll see you next time!
