Footer

The final touchpoint of your storeβ€”provide essential navigation, contact info, newsletter signup, and trust signals. A well-designed footer reduces bounce rates and supports conversions.

πŸ“ sections/footer.liquid⏱️ 10 min setup

Overview

The Footer appears on every page of your store, making it prime real estate for important links, trust signals, and email capture. Brave's footer supports multiple layout blocks, social links, payment icons, and accessibility features.

πŸ“‹

Multiple Menus

Add up to 4 navigation columns for organized links
πŸ“§

Newsletter Signup

Built-in email capture with GDPR consent option
🌐

Social Links

Display icons linking to your social profiles
πŸ’³

Payment Icons

Show accepted payment methods for trust

When to Use

The footer is automatically included on every page. Configure it once and it applies everywhere.

Common Footer Content:

  • Customer Service links β€” Contact, FAQ, Shipping info
  • Company links β€” About Us, Careers, Press
  • Legal links β€” Privacy Policy, Terms, Returns
  • Newsletter signup β€” Email capture for marketing
  • Social proof β€” Social links, payment icons

Quick Setup

1

Access Footer Settings

Scroll to the bottom of any page in the Theme Editor and click on the Footer section.

2

Add Menu Blocks

Click Add block β†’ Menu. Select a navigation menu and give it a heading like "Customer Service" or "Company".

3

Add Newsletter Block

Click Add block β†’ Newsletter. Add a compelling heading like "Join Our List" and enable consent checkbox if required for GDPR.

4

Configure Bottom Bar

Add your copyright text, enable payment icons, and link your quick links menu for the bottom row.

πŸ’‘

Create dedicated footer menus in Shopify Admin β†’ Online Store β†’ Navigation before configuring the footer. Name them clearly: "Footer - Customer Service", "Footer - Company", etc.


Section Settings

Logo & Branding

SettingTypeDefaultDescription
Logoimage-Optional footer-specific logo. Can be different from header (e.g., white version for dark footer).
Logo widthrange120pxWidth of the footer logo. Range: 50–200px.
Textrichtext-Brand description or tagline displayed under the logo. Keep it briefβ€”1-2 sentences.

Bottom Bar

SettingTypeDefaultDescription
Copyrighttext-Copyright text for the bottom. Use %year% for auto-updating year (e.g., 'Β© %year% Your Store').
Quick linkslink_list-A horizontal menu in the bottom bar. Good for privacy policy, terms, accessibility links.
Payment iconscheckboxtrueDisplay payment method icons based on your store's payment settings.
Back to top buttoncheckboxtrueShow a floating arrow button that scrolls to the top of the page.
ℹ️

Payment Icons: These are automatically pulled from your enabled payment providers in Shopify Settings β†’ Payments. Add more payment methods there to show more icons.

Colors

SettingTypeDefaultDescription
Color schemecolor_schemeBackground 2Apply a color scheme to the footer. Dark schemes are popular for visual separation.

Block Types

The footer supports up to 4 blocks that display in columns on desktop and stack on mobile.

Menu Block

A vertical list of navigation links.

SettingTypeDefaultDescription
HeadingtextMenuColumn title (e.g., 'Customer Service', 'Shop', 'Company').
Menulink_list-Select a navigation menu created in Shopify Admin β†’ Navigation.

Best Practice: Create specific footer menus rather than reusing your main menu. Footer links should be simpler and flatter.

Newsletter Block

An email signup form for building your mailing list.

SettingTypeDefaultDescription
HeadingtextSubscribe to our newsletterTitle above the signup form.
Descriptionrichtext-Optional text explaining what subscribers will receive.
Consent checkboxcheckboxfalseRequire users to check a box agreeing to receive emails. Required for GDPR compliance in EU.
Consent texttextI agree to receive marketing emailsText for the consent checkbox.
⚠️

GDPR Compliance: If you sell to EU customers, enable the consent checkbox. Consult with a legal professional for full compliance requirements.

About Block

A text block with your brand story and social links.

SettingTypeDefaultDescription
HeadingtextAbout UsBlock title.
Textrichtext-Your brand description, mission statement, or tagline.
Social linkscheckboxtrueDisplay social media icons. Links are configured in Theme Settings β†’ Social.

Contact Block

Display contact information with optional icons.

SettingTypeDefaultDescription
HeadingtextContact UsBlock title.
Addressrichtext-Your business address.
Phonetext-Customer service phone number.
Emailtext-Customer service email address.

Recommended Footer Structure

For Most Stores (3-4 Columns)

ℹ️

Column 1: About

Logo, tagline, social icons

πŸ›οΈ

Column 2: Shop

Collections, bestsellers, new arrivals

🀝

Column 3: Support

Contact, FAQ, shipping, returns

πŸ“§

Column 4: Newsletter

Email signup form

For Smaller Stores (2 Columns)

πŸ“‹

Column 1: About + Newsletter

Brand info and email signup combined

πŸ”—

Column 2: Quick Links

All important links in one menu


Use Case Examples

E-commerce Standard

  • Block 1: About block with logo, tagline, social links
  • Block 2: Menu "Shop" β†’ Collections
  • Block 3: Menu "Help" β†’ Contact, FAQ, Shipping, Returns
  • Block 4: Newsletter β†’ "Get 10% off your first order"
  • Bottom: Copyright, Privacy/Terms links, Payment icons

Fashion Brand

  • Block 1: Large logo, minimal text, prominent social links
  • Block 2: Menu "Collections" β†’ Categories
  • Block 3: Menu "Brand" β†’ About, Sustainability, Careers
  • Block 4: Newsletter with exclusive access messaging
  • Color scheme: Dark/Black for premium feel

Service Business

  • Block 1: About with contact information
  • Block 2: Menu "Services" β†’ Service pages
  • Block 3: Menu "Resources" β†’ Blog, FAQ, Contact
  • Block 4: Newsletter or additional contact form link

Best Practices

Content Strategy

  1. Prioritize links by importance β€” Most-clicked links should be prominent
  2. Keep menus to 5-7 items β€” Too many links overwhelm visitors
  3. Use clear, descriptive labels β€” "Returns Policy" not "Policy"
  4. Include trust signals β€” Payment icons, security badges, certifications

Newsletter Optimization

  1. Offer an incentive β€” "Get 10% off" converts better than "Subscribe"
  2. Set expectations β€” "Weekly style tips and exclusive offers"
  3. Keep the form simple β€” Email only, no extra fields
  4. Consider placement β€” Newsletter block works well as the last column

Design Considerations

  1. Contrast with content β€” Use a different color scheme than your main pages
  2. Don't overcrowd β€” Whitespace improves readability
  3. Test on mobile β€” Columns should stack logically
  4. Check social links β€” Verify all URLs work and open correctly
πŸ’‘

Analytics Tip: Add UTM parameters to footer links to track how many conversions come from footer navigation in Google Analytics.


Troubleshooting

Social icons not showing

  • Verify URLs are added in Theme Settings β†’ Social
  • Check that Social links is enabled in the About block
  • Ensure URLs are complete (including https://)

Payment icons not appearing

  • Verify you have payment providers enabled in Shopify Settings β†’ Payments
  • Check that Payment icons is enabled in footer settings
  • Some payment methods don't have icons (will be hidden)

Newsletter form not working

  • Form submissions go to Shopify Admin β†’ Customers
  • Check if subscribers are being marked as email subscribers
  • Verify your email marketing app is connected to Shopify

Columns not displaying correctly

  • Check that blocks are added (footer starts empty)
  • Verify each block has content (empty blocks may collapse)
  • Test responsive behavior on tablet/mobile

Copyright year not updating

  • Use %year% in the copyright field
  • Example: Β© %year% Your Store Name. All rights reserved.

Back to top button not visible

  • Enable Back to top button in settings
  • Button only appears after scrolling down
  • Check if custom CSS is hiding it

Accessibility Features

The Brave footer includes:

  • Semantic HTML β€” Proper <footer> and navigation landmarks
  • Keyboard navigation β€” All links are tabbable
  • Focus states β€” Visible focus indicators
  • Screen reader support β€” Proper ARIA labels
  • Skip to footer β€” Accessible via skip links