How to Upgrade Your Footer Columns to Page Builder Fields

Upgrading your footer columns into widget fields is one of the best ways to make managing your ecommerce site easier. With widget fields, you or any team member can quickly make changes to footer items without diving into code or risking your site’s layout. In the video below, we’ll walk you through exactly how to make this upgrade using Epic Page Builder Widgets, ensuring your footer becomes fully dynamic and easy to update.

Why You Should Upgrade Your Footer to Widget Fields

Managing your site’s footer should be simple, not a technical headache. Whether you’re an ecommerce owner, a team member, or someone who manages multiple sites, converting footer columns into widgets offers a quick, user-friendly solution to make updates without breaking your theme. Plus, this process makes your footer fully dynamic, giving you the freedom to customize it across all pages.

Watch the video below to see how you can:

• Use our free custom menu widget to easily replace static footer links.
• Ensure all footer columns are fully editable from within BigCommerce.
• Style your footer links for a seamless design experience.

Key Highlights of the Video (with Timestamps)

Here’s a summary of the key steps and insights from the video, so you know what to expect:

• (00:02) Introduction to upgrading footer columns: Learn why converting your footer columns into widget fields is a game-changer for simplifying site management.
• (01:10) Using Epic Page Builder Widgets: Discover how the free custom menu widget allows you to make your footer fully editable.
• (03:34) Adding regions to your footer code: Understand how to insert widget regions into your theme’s footer for dynamic content updates.
• (07:00) Styling and customizing your widgets: Learn how to style your new footer widgets for a cohesive look that blends with your site’s design.
• (16:06) Removing old code and finalizing the widgetized footer: Finish by cleaning up your old static footer code and making your new widget-based footer live.

Watch the Full Video

Whether you’re familiar with BigCommerce’s Page Builder or just getting started, this video will guide you through the entire process. By the end, you’ll have full control over your footer content, and anyone on your team will be able to make updates easily. Watch now and start upgrading your footer today!

Full Transcript

(00:02)
Hey, in this video, I’m going to show you how to convert one of your footer columns into a widget field. This is great if you want to make it easier to manage your footer without being a developer. If it’s too much, you can always hire a developer, but this method allows you, or anyone on your team, to edit the footer easily without messing things up.
(00:34)
I’ll share my screen and show you step by step how to do this. On this demo site, I’m using the plain uncustomized Cornerstone theme. As you can see, it has a basic footer that we’ll improve by making the navigation, categories, and popular brands sections editable.
(01:10)
First, a quick plug: You’ll need my app, Epic Page Builder Widgets. I’ll show you how to use a free widget in the app, but there are premium widgets available as well. For this demo, we’re going to use the custom menu widget.
Install the custom menu widget from the app.
Now we’ll dive into the code briefly.
(01:43)
Go to:
Storefront > Themes > Edit theme files
Locate the theme file that manages your footer. Most of you will be using Cornerstone, which is ideal, but the file location may vary based on your theme.
For Cornerstone, navigate to:
templates/components/common/footer/footer.html
(02:56)
Once you open this file, look for the following sections:
Article footer info call – This is where the footer columns like categories, brands, and navigation are defined.
Identify which column you want to edit.
(03:34)
To add a new region, insert this code under the section you want to edit:
{{{region name="footer_categories" global="true"}}}
Replace "footer_categories" with the column name.
Note: Always use underscores instead of dashes in the region name.
Adding global="true" ensures that the widget applies sitewide.
(04:45)
Next, repeat this process for the other columns like brands and navigation, giving each region a unique name to avoid repeating content across columns. For example:
{{{region name="footer_brands" global="true"}}}
(05:54)
Once the regions are added, save and apply the file. These regions won’t show up on the front end until we put content in them. Keep the theme file open as we’ll come back to it.
(06:28)
Now, go to the theme customizer. Because we added the regions, you should see them appear as purple blocks, indicating they are global regions. If they aren’t purple, you need to double-check that you added global="true" in the region code.
(07:28)
Next, scroll down to the widgets area in the customizer, and drag the custom menu widget into the regions. You can now add the custom links you want for each footer column. For example, set one to be the “About Us” link and another for “Contact Us.”
(08:29)
Now, let’s work on the style. The default styling may look a bit off, so we’ll adjust it. First, remove any unnecessary padding or margin, and make the text smaller or less bold to fit the style of your footer.
(09:59)
You can also adjust the spacing and appearance of these links, such as reducing the padding, margins, and font weight. Play around with these settings until the links fit well within your design.
(11:02)
Once styled, go ahead and customize the links for each section. You can link directly to pages like “About Us” or “Contact Us” using the appropriate URLs.
(12:05)
For each column, you can add, reorder, or remove links. This custom menu widget is flexible and allows you to control everything from the admin interface, making future edits much easier.
(12:33)
Here’s a quick hack: instead of restyling each widget from scratch, you can duplicate an already-styled widget and reuse it in the other columns.
(14:59)
After setting up your custom links, publish your changes and refresh the front end of your site to see the new footer in action. You should now have fully customizable and widget-based footer columns.
(16:06)
The final step is to remove the old hardcoded links. Go back to the theme file you had open earlier and comment out the old HTML for the original footer links, leaving only the headings and the widget regions.
(17:04)
Refresh the site again, and you’ll see only your new, fully controllable widget-based footer columns. That’s it! Now you have complete control over your footer without needing to dive into the code for future edits.