Footer navigation

Featured links

1. Company XYZ documentation on the footer navigation section
2. Shopify documentation on sections and blocks
3. Company XYZ documentation on the footer menu block
4. Company XYZ documentation on the logo block
5. Company XYZ documentation on the social media icons block
6. Company XYZ documentation on the localization selectors block
7. Company XYZ documentation on the payment icons block
8. Company XYZ documentation on the copyright block
9. Company XYZ documentation on the button block
10. Company XYZ documentation on the image block
11. Company XYZ documentation on the video block
12. Company XYZ documentation on the separator block
13. Shopify documentation on customizing sections
14. Company XYZ documentation on section backgrounds settings
15. Company XYZ documentation on section padding settings
16. Company XYZ documentation on separators settings
17. Company XYZ documentation on layout widths settings

Helpful videos

Learn With Shopify video: Shopify Navigation Menu Best Practices

Learn With Shopify video: Shopify Navigation Menu Best Practices

Shopify Academy video: Customizing your store

Shopify Academy video: Customizing your store

Use Footer navigation to build a custom end-of-page layout with menus, brand elements, legal text, social links, media, and utility content. It works best when you want more control than a simple stacked footer, especially across desktop, tablet, and mobile.

The Footer navigation section reference is available in Company XYZ documentation. For a broader overview of section behavior in Shopify, see Shopify documentation on sections and blocks

Core settings

The main layout controls define how many columns the footer uses at different screen sizes. These settings shape the overall structure before you fine-tune individual blocks.

1. Set the desktop layout first. Use more columns for link-heavy footers and fewer columns for simpler brand-led layouts.
2. Use the tablet setting intentionally. If tablet columns are set to 0, tablets reuse the desktop column count, which is useful when your desktop layout already scales well.
3. Keep mobile simpler. Narrower screens usually work best with fewer columns, especially when you mix menus with wider content like rich text, images, or video.

Tip

If the footer feels crowded, reduce the column count before hiding content. A cleaner structure usually improves readability more than removing useful links.

Color settings

These section-level colors let you override the footer’s text and icon colors without changing the rest of the site. Use them when the footer needs its own visual treatment.

1. Match text color to the background. This matters most when you add a background image, gradient, or video.
2. Use icon color for consistency. It helps unify icon-based blocks such as social links or other utility items.
3. Treat block colors as exceptions. Start with section colors for the overall footer, then use block-level colors only when a specific item needs to stand apart.

Supported block types

1. Button
2. Copyright
3. Follow on shop button
4. Footer menu
5. Localization selectors
6. Logo
7. Payment icons
8. Rich text
9. Separator
10. Social media icons
11. Image
12. Video

Block guidance

Footer menu

Footer menu blocks display a navigation list, with an optional heading for each group. Learn more about the Footer menu block.

1. Use separate menu blocks for distinct groups such as Help, Company, and Policies.
2. Add short headings when you have multiple menus so customers can scan the footer faster.
3. Split long lists into smaller groups instead of building one oversized menu.

Logo

The Logo block reinforces brand identity and can anchor the footer visually. If no image is set in the block, it can fall back to the store name. Learn more about the Logo block.

1. Keep the logo modest in size so it supports the layout instead of dominating it.
2. A width of 0 lets the logo stretch to available space, which is usually best for simple, brand-first footers.

Rich text

Rich text works well for short brand copy, contact details, trust messaging, or a concise value statement.

1. Keep copy brief so the footer stays easy to scan.
2. Use block-level background or text colors only when that content should stand apart from surrounding items.

Social media icons

This block pulls from the social accounts configured in your theme settings. Learn more about the Social media icons block.

1. Use Show all when your configured social accounts are complete and consistent.
2. Turn Show all off if you want to feature only a few key networks.
3. Choose the icon style based on the footer design: branded for recognition, solid for a cleaner UI, or text only for a more minimal look.

Localization selectors

Localization selectors let customers choose country, currency, and language where supported. Learn more about the Localization selectors block.

1. Add this block only if those choices are available to customers.
2. On mobile, the Small field input style can force the block onto a new row, so preview the footer after changing it.

Add localization selectors only when they are fully set up and useful to customers. Otherwise, they add complexity without improving the footer.

Payment icons and copyright

These blocks are typically used near the bottom of the footer for reassurance and legal information. Learn more about the Payment icons block and the Copyright block.

1. Place them in a lower row for a familiar footer pattern.
2. Keep copyright text short and current.
3. Treat payment icons as supporting trust signals rather than the footer’s main content.

Button

The Button block adds a clear footer action, such as contacting your team or opening a support page. Learn more about the Button block.

1. Use one or two buttons at most so the footer does not compete with the main page content.
2. Full-width mobile buttons are helpful when the action is important on smaller screens.

Image and video

Image and Video blocks can make the footer feel more editorial or brand-driven. Learn more about the Image block and the Video block.

1. Use media sparingly so navigation does not get pushed too far down the page.
2. Keep captions short and practical.
3. For video, a poster image usually creates a better first impression.

Caution

Large media blocks can make footer links harder to find, especially on mobile. If navigation is the footer’s main job, keep media secondary.

Separator

The Separator block adds space or a visual break between footer elements. Learn more about the Separator block.

1. Use it to divide upper and lower footer areas or to create breathing room around utility content.
2. A small gap can remain even at 0 height because the footer uses standard spacing between items.

Shared block settings

Most footer blocks include shared controls for alignment, layout, and visibility. These settings are what make the section flexible enough for custom responsive footers. For general editing behavior, see Shopify documentation on customizing sections

1. Alignment settings let each block line up differently on desktop and mobile.
2. Layout settings let you move a block into a new row or column, or stretch it to fill remaining desktop space.
3. Visibility settings help when desktop and mobile need meaningfully different footer layouts.

Standard section settings

Section background settings

Section background settings control the footer’s background color, gradient, image, video, and overlay treatment. In this section, they are especially useful for separating the footer from the rest of the page or creating a stronger branded finish.

If you add image or video backgrounds, check text and icon contrast carefully. Overlay color and opacity can help preserve readability, and mobile-specific background media can simplify the design on smaller screens.

Padding settings

Padding settings control the space above and below the footer content. Use them to make the footer feel more spacious or to tighten it when the page already has a lot of vertical space.

Desktop and mobile padding can be adjusted separately, which helps keep a large desktop footer from feeling too tall on phones.

Separator settings

Separator settings add a line at the top or bottom of the footer section. This is useful when you want a clearer transition between the footer and nearby content.

If the separator color is transparent, the default border color is used instead. Keep separator styling subtle unless the footer needs a stronger edge.

Width settings

Width settings control both the maximum content width and the overall section width. In Footer navigation, content width affects how tightly blocks sit together, while section width matters most when you use background styling.

The editor can make width changes feel less obvious than they are on the live page, so preview the result on the storefront when refining layout. Use narrower widths for cleaner reading and wider widths when the background is part of the design.

Usage notes

1. Start with columns. Set desktop, tablet, and mobile column counts first, then adjust individual block layout only where needed.
2. Group links clearly. Use multiple Footer menu blocks with short headings so customers can scan support, company, and policy links quickly.
3. Protect contrast. Recheck text and icon readability whenever you add a background image, gradient, video, or custom colors.
4. Use responsive variants sparingly. Hide or duplicate blocks only when mobile and desktop truly need different footer layouts.
5. Keep utility content secondary. Logos, media, payment icons, and buttons should support the footer, not make core navigation harder to find.
6. Preview both viewports. Footer blocks can rearrange, hide, or change emphasis between desktop and mobile, so review each size before publishing.
7. Treat media as a design decision. Separate desktop and mobile media can change cropping, readability, and fallback behavior, so check both versions if you use images or video.
8. Leave defaults when you want fallback styling. Blank or transparent color choices usually preserve the existing footer look, while explicit colors, gradients, or media make the footer area more independent.