Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Footer Section
The Flex theme includes a customizable 'Footer' section has 4 layout styles to choose from and uses content blocks to achieve various layouts. You can choose to use any combination for your footer columns which can be dragged and re-ordered as well in your Theme Editor (Customize).
Within your 'Footer', you can choose to add menus, a newsletter signup form, your logo, text area (using a rich text editor), an empty column, display your social media icons.
In order to configure your Footer, click into Customize (your Theme Editor) > Sections > Scroll down and click into Footer.
In order to choose the layout style for your Footer, click into Customize (your Theme Editor) > Theme Settings > Layout > Footer.
Footer Settings
The section settings allow you to enable certain general information within the footer!
Copyright text
By default, ©, The Year, and your Shop Name will show up as 'copyright text'. However, in the footer section settings, you can also choose to add more to your 'copyright text' that will show up beside this.
Show theme designer credits
You have the option to enable/disable the theme designer credits. When you enable this, the text: 'Designed by Out of the Sandbox' which links to the Out of the Sandbox website, will display beside your Copyright text.
Show Powered by Shopify
You have the option to enable/disable the 'Powered by Shopify' text. When you enabled, this it will display beside your Copyright text and link out to Shopify's website.
Show payment method icons
You can choose to display payment icons in the footer. The icons that show are determined by your what you've set up in your store's payment settings.
Advanced
The 'Footer' includes an option to add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code.
Icon Bar
An 'Icon Bar' can be enabled in the Flex theme which will display above the Footer site-wide!
View our full Icon Bar article
Footer Styles
There are four different footer layout styles to choose from within the theme: classic, centred, promotional, and none. You can select which layout style you'd like to use under Customize > Theme Settings > Layout. Although there is some cross-over with what 'content block' options are available in each footer style, a few options are only available in certain layouts.
Select a Footer Style
-
Footer Style: Classic
The 'Classic' footer style allows for a normal, default layout. You can add up to 5 content blocks and all of the columns display vertically.
Content Block Options
The content block settings are for configuring each column within the footer. The content options for the 'Classic' footer style include adding a logo, newsletter signup form, menu, rich text area, or an empty column if you just want some extra space!
Logo and text
There is a 'Logo and text' content block available to add in the footer. A 500 x 200px image size is recommended, and you can control the size further with the 'Logo size' setting; choose between small, medium and large. You can also choose to add in some text which will appear below the logo, and you can enable the 'Show social media icons' settings as an option as well.
Menu
You can add a 'menu' content block which is an easy and organized way to display additional navigation links, such as your Contact and Policy pages, in the footer. You can enable the 'Show social media icons' settings as an option as well. Note: This menu won't show dropdown items.
Newsletter
A 'newsletter sign up form' can also be added to the footer. You can add a heading, text, choose to display first and last names, and enable the 'Show social media icons' settings as an option as well.
Text
A 'text' content block can be added if you would like to add some additional content in your footer. You can enable the 'Show social media icons' settings as an option as well.
Empty column
The final content block option is the 'Empty column' which is helps to achieve certain layouts and if you're looking for your columns to be more spaced out! Like any of the content blocks, you can drag and re-order within the Theme Editor.
-
Footer Style: Centered
The 'Centered' footer style does just that, centers all of the content. You can add up to 7 content blocks.
Content Block Options
The content block settings are for configuring each column within the footer. The content options for the 'Centered' footer style include adding a logo, newsletter signup form, menu, rich text area, and social icons!
Logo
There is a 'Logo' content block available to add in the footer. A 500 x 200px image size is recommended, and you can control the size further with the 'Logo size' setting; choose between small, medium and large.
Menu
You can add a 'menu' content block which is an easy and organized way to display additional navigation links, such as your Contact and Policy pages, in the footer. Note: This menu won't show dropdown items.
Newsletter
A 'newsletter sign up form' can also be added to the footer. You can add a heading, text, choose to display first and last names.
Text
A 'text' content block can be added if you would like to add some additional content in your footer.
Social icons
If you've added links to your social media (Theme Settings > Social Media) you can choose to add them to your footer by adding the 'social icons' content block.
-
Footer Style: Promotional
The 'Promotional' footer style includes an option to enable a promotion section which will be on the left or right side of the footer. The rest of your footer content will display beside the promotion, stacked vertically and you can add up to 5 content blocks.
Content Block Options
The actual 'Promotion' can be enabled in the Footer section settings, however, the content block settings are for configuring each column within the footer. The content options for the 'Promotional' footer style include adding a logo, newsletter signup form, menu, rich text area, and social icons!
Promotion
Within this footer layout, you can add a 'promotion' that will display on the left or right side of your footer! You can choose the background and text color settings, add an image, text, button link/label, and choose the button to display as either your 'primary' or 'secondary' button style.
Logo
There is a 'Logo' content block available to add in the footer. A 500 x 200px image size is recommended, and you can control the size further with the 'logo size' setting; choose between small, medium and large. You can also choose the 'alignment' of the logo as well; choose between left, center, right.
Menus
You can add a 'menus' content block that will allow you to add up to three menus. This is an easy and organized way to display additional navigation links, such as your Contact and Policy pages, in the footer. Note: This menu won't show dropdown items.
Newsletter
A 'newsletter sign up form' can also be added to the footer. You can add a heading, text, choose to display first and last names.
Text
A 'text' content block can be added if you would like to add some additional content in your footer.
Social icons
If you've added links to your social media (Theme Settings > Social Media) you can choose to add them to your footer by adding the 'social icons' content block.
-
Footer Style: None
If you wish to not have a footer on your site, you can set the footer style to 'None.' When your footer style is set to none, there are no section settings or content block options for the footer.
Examples
Example 1 - Promotional
Settings
- Show theme designer credits - enabled
- Show Powered by Shopify - enabled
- Show payment method icons - enabled
- Enable promotion - enabled
- Position - left
- Image - added
- Text - added
- Button link/label - added
- Logo content block
- Logo size - small
- Alignment - left
- Text content block
- Heading
- Text
- Menus content block
- 2 menus added
- Social icons content block
Example 2 - Centered
Settings
- Show theme designer credits - enabled
- Show Powered by Shopify - enabled
- Text content block
- Heading
- Text
Mobile layout
When viewed on a mobile device no matter which 'footer style' you select in your Layout settings, the footer content block will stack vertically.
