Footer navigation

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure/templates

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks

4. https://help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks#metafields-and-dynamic-sources

Reference videos

Overview

The Footer navigation section enables you to build a structured and visually engaging footer for your storefront. You can organize navigation menus, branding, information links, and key features into adaptive columns for every device size. Deploying this section increases usability and strengthens trust by keeping essential site resources easily accessible at the bottom of every page.

📝 Note: A thoughtfully designed footer connects visitors with important information and consistently reinforces your brand presence.

Key components and functionality

Footer column layout

Footer column layout settings control how your footer’s content is arranged across columns for desktop, tablet, and mobile devices. Adjusting these helps ensure a clear and accessible user experience for everyone.

Column count (desktop)

Select how many columns are displayed for footer content on desktop screens. Multiple columns keep your layout organized and make it easy to highlight navigation, branding, and information side by side.

1. Minimum value is 1

2. Maximum value is 12

3. Step size is 1

4. Default value is 4

Column count (tablet)

Choose a column count specifically for tablet devices to optimize the transition between desktop and mobile. If you set this to 0, the desktop value will be used, keeping layout consistent.

1. Minimum value is 0

2. Maximum value is 8

3. Step size is 1

4. Default value is 0

   1. Setting 0 means the desktop column count is used for tablets.

Column count (mobile)

Determine how many columns will show on mobile devices. One column is usually best for simple navigation and clarity on smaller screens.

1. Minimum value is 1

2. Maximum value is 4

3. Step size is 1

4. Default value is 1

💡 Tip: Lower column counts on mobile generally improve legibility and make navigation easier for users on smaller devices.

Supported block types

You can fill the Footer navigation section with a wide selection of block types. Each option offers a unique way to add content and functionality, allowing you to meet your brand’s needs and deliver the right information to your customers.

1. Button

2. Copyright

3. Follow on Shop button

4. Footer menu

5. Image

6. Localization selectors

7. Logo

8. Payment icons

9. Rich text

10. Separator

11. Social media icons

Add, duplicate, and reorder these blocks to fine-tune your footer according to your site's specific needs and customer behaviors.

⚠️ Important: Combine branding, navigation, and utility blocks for a footer section that delivers rapid access to critical links and strong visual appeal.

Usage notes

1. Adjust column counts for each device to keep your footer clear and user-friendly as screen sizes change.

2. Optimize site speed by limiting large images or videos in the footer for faster loading, especially on mobile.

3. Promote accessibility by using descriptive text labels, strong color contrast, and alt text for images and icons.

   1. Well-labeled and meaningful content in each block benefits both users and search engines.

4. Keep the footer focused on important links and details—don’t overload it with excessive content.

   1. Simpler footers are more readable and more likely to support user journeys effectively.

🚧 Caution: Overcrowding your footer with too many blocks or too much information can reduce clarity and overwhelm your visitors. Prioritize essentials for the best results.

A well-configured footer navigation section brings together brand, navigation, and utility, supporting shoppers across every device and visit.