How to use Flex's footer and icon bar options to create engaging Shopify theme footers
by Michael P. Hill
Not only does Out of the Sandbox’s Flex Shopify theme come with four header layout options, but the new premium Shopify theme also boasts four footer options as well.
By definition, footers live at the very bottom of websites, including Shopify stores.
While they are the last thing most customers see — they certainly are not the least important part of your store — which might seem odd to say for something that seems to just hang out at the bottom of the browser.
In fact, the importance of a good footer is driven home by the attention to detail the Flex Shopify theme gives this part of your online store. Footers are often a great way to direct users to important information, promote your store or point out key features.
To adjust which footer your store uses, navigate to Customize > Theme settings > Layout.
Additional options and settings, which change depending on which footer is active, are under Customize > Sections > Footer (note that you’ll likely need to scroll down on the left sidebar to see this section).
After changing footer options in theme settings, there is a brief delay while the theme editor applies your selection.
To avoid any issues, wait until the preview refreshes with the new layout before attempting to work on any other theme settings.
There are four footer options that come ready to use in the Flex Shopify theme:
Classic: This option includes a traditional but thoughtfully designed footer layout.
Centered: This footer option center aligns and “stacks” the elements in the footer — a great option for simpler, more elegant footer layouts.
Promotional: This option lets you dedicate a part of your footer to a large promotional image, text and button — along with links and other text.
None: Flex also comes with an option for no footer if you’re looking for a cleaner layout or are in a “prelaunch” period.
Each footer option (except for “None”) lets you add and configure blocks of content:
Custom HTML: Exactly what it sounds like — input your own HTML to expand the functionality and look of your footer.
Logo: This option lets you insert your store logo (or site name). The “Classic” footer layout allows for a line of text under it. This text is a great place to put a tagline, slogan or even contact information or promos.
Menu: Use this option to add one or more navigation menus to your footer.
Newsletter: Adds a newsletter sign-up form.
Text: Add a blurb of text.
Empty column: Available only in “Classic”, this option lets you create a “spacer” column between content in the footer.
Social icons: Adds a cluster of links to your social media profiles, with support for Twitter, Facebook, YouTube, Vimeo, Pinterest, Tumblr, Instagram, Snapchat, Houzz, Dribbble, Behance, Flicker and an email address. To activate and link your social icons, be sure to add URLs under Customize > Theme settings > Social media (otherwise this block will appear blank).
The “Promotional” footer option adds settings for a promotional image, text and button linked to any URL you’d like.
In addition, Flex also includes options to toggle the following elements on or off:
As with most Flex Shopify theme features, the options outlined here present any store owner with a myriad of possible choices and combinations to create effective footers.
Here’s a quick rundown of some tips and things to keep in mind:
Remember that just because footers are the bottom of the page doesn’t mean they aren’t important. In fact, in many ways, they are your chance for a “last impression.”
To that end, adding an eye-catching promotion element or using the icon bar to showcase your company is a great opportunity for users who make it all the way down a page.
If you use either the promo layout or icon bar, keep in mind that the same content appears on all pages, so it typically should be general enough to apply to most or all of your pages. That said, the promo box is also a great way to promote a new or particularly interesting product, blog post or collection.
Many users may also jump right to the footer of a site when looking for links such as FAQs, customer service, shipping and returns, terms and conditions, and privacy, so it’s always a good idea to make sure you have these links included in your navigation menus, especially if you don’t have room for them at the top of the page.
On the other hand, a user who scrolls all the way down through your page is also likely to be well engaged with your content, so look at the footer as a sort of “summary” to help make your site look professional and encourage a sale, more engagement, social interaction, or newsletter signup.
The “Centered” layout may not be the best option if you have a higher count of footer links — because they end up getting stacked one on top of each other. This can end up creating a very high (read: more scrolling required) footer that’s harder to navigate.
However, if you’re just starting out and don’t have a lot of footer links, the “Centered” option can be a clean and more elegant option. You can always easily upgrade to another footer layout later.
Similarly, using the “Promotional” option may require some close attention to how much content you add beside your promo box to prevent the footer from being too high, especially in comparison to the height of the promotion.
Finally, like Flex’s headers options, the footers do change layouts for smaller screens such as tablets and smartphones, so be sure to preview and test everything on mobile view before going live.
Michael P. Hill
Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn. While comments and feedback are always appreciated, Michael regrets that, due to the volume of inquires received, personal responses are not possible. For specific assistance or support with Out of the Sandbox themes, visit the help center.