How to Upgrade Your Footer Columns to Page Builder Fields

(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.