The Footer provides essential information and quick access to important resources. It typically includes useful links, contact details, terms of service, and social media channels.
This guide will walk you through the different blocks of the footer, explaining their purpose and how to use them effectively, so you can navigate the website with ease and make the most of the available features.
1. How to customize the Footer section?
Make section full width: Expands the footer section to span the full width of the browser.
Background image: This option allows you to upload or select an image to be displayed as the background of the footer section.
Section padding:
Margin/Margin (Mobile): Sets the spacing outside the section(top, right, bottom, left) for desktop and mobile devices.
Padding/Padding (Mobile): Sets the spacing inside the section (top, right, bottom, left) for desktop and mobile devices.
Display colors by section: When enabled, you can apply colors individually to each section, with options to choose a colors schema and adjust the background opacity.
Background opacity: Adjust the slider to control the transparency of the background color/image.
Enable sticky footer: Keeps the footer fixed at the bottom of the screen on desktop, even when scrolling. (Note: Only works on desktop screens.)
2. Footer block contents
2.1. Footer Column
The footer's structure is determined by using Footer Column blocks. Each column in the footer is created with these blocks. To change the number of columns displayed in the footer, simply add or remove Footer Column blocks as needed.
Here are the detailed settings of the Footer Column block:
Title: This is the column label, and you have the option to hide it on Desktop devices as needed.
Accordion only on mobile: When activated, content in this block will only display in accordion format on mobile devices.
Font Size / Weight: Select the scale (Small, Medium, Large) and thickness (Normal, Bold) of the title text.
Heading space: Adjust the vertical gap (in pixels) between the title and the content below it.
Accordion on mobile: When enabled, column content is collapsed into a clickable accordion on mobile devices.
Layout & Responsive Sizing:
Alignment: Set the text alignment (Left, Center, Right) independently for Desktop and Mobile.
Width: Controls how much horizontal space the column takes up. Set unique percentages for Desktop, Tablet, and Mobile.
Styling & Spacing:
Display colors by block: Enable this to apply a unique color schema or background overlay specifically to this column.
Margin / Padding: Adjust the spacing outside or inside the column.
Each Footer column can include different inner blocks, like Button, Image, Heading, Text, Linklist, Newsletter, and others, enabling flexible and effective organization of footer content.
2.2. Link list block
The Link list block allows you to display a menu of links in the footer, where you can select a link list, set the menu title, and adjust the font size.
Menu Inline: When this option is enabled, menu items are displayed horizontally (in-line). When disabled, the items are stacked vertically.
Select Menu: This option allows you to choose a menu from your navigation to display as a list of links.
Font Size: This setting controls the font size and overall visual size of the menu text.g controls the font size, affecting the overall appearance of the menu text.
2.3. Newsletter block
The Newsletter block enables the addition of a signup form in the footer, allowing customers to subscribe with their email addresses. You can also customize the design, button, and text settings.
Color scheme: Opt for a custom color style for the block to enhance its visual appeal.
Design newsletter: Select a layout style for the newsletter form.
Button label: Customize the subscribe button text.
Button size: Set the size of the input and button (Small, Medium, Large).
Buttont font weight: Adjust the thickness of the text (e.g., Semibold).
Enable conditions checkbox: Show a checkbox to agree to terms (for GDPR).
Content: Enter and style the text next to the checkbox.
Icon: Choose an icon to display in the button.
2.4. Other blocks
- Liquid – HTML block
The Liquid – HTML block allows you to add custom code to the footer, including HTML, CSS, and Liquid. This is useful for advanced customization beyond the default theme settings.
Custom code support: Add HTML structure, inline CSS, or Liquid variables.
Flexible usage: Can be used to embed third-party widgets, scripts, or custom layouts.
Advanced control: Ideal for developers who need full control over content and design.
- Currency & Language block
This block provides selectors for customers to switch between available currencies and languages on your store.
Currency selector: Allows users to change the displayed currency.
Language selector: Enables switching between translated store languages.
Global accessibility: Improves user experience for international customers.
- Payment icons block
The Payment icons block displays accepted payment methods in the footer.
Supported payment methods: Automatically shows icons based on your Shopify payment settings.
Trust building: Helps increase customer confidence during checkout.
Visual customization: Icons adapt to the theme style and layout.
- General behavior of blocks
All footer blocks share some common behaviors:
Draggable & reorderable: Blocks can be rearranged within the footer layout.
Responsive design: Automatically adjust for desktop and mobile views.
Consistent styling: Inherit global typography, spacing, and color settings unless customized.
Flexible layout: Can be grouped using the Group block to create columns or structured sections.
