Footer Section

The footer appears at the bottom of every page on your store. It's a great place to include important links, contact information, and trust-building elements like payment icons.

Overview

The footer helps customers find important information and navigate your store. You can add multiple blocks to organize different types of content, such as menus, contact info, and company information. The footer uses a responsive grid layout that adapts to different screen sizes.

Where to Use

The footer section is automatically included in the Footer Group section, which appears at the bottom of all pages. You typically won't need to add it manually to templates.

Blocks

You can add multiple blocks to your footer to organize content. Blocks are arranged in a responsive grid layout that adapts based on the number of columns setting.

Menu Block

What it does: Displays a navigation menu with links

Settings:

  • Heading: Title for the menu column (e.g., "Quick Links", "Shop", "Company")
  • Menu: Select a menu from your navigation menus

Best for:

  • Quick links to important pages
  • Product categories
  • Company pages (About, Contact, etc.)
  • Customer service links

Tips:

  • Create a dedicated "Footer" menu in Online Store > Navigation
  • Keep menu items to 5-7 links per column
  • Use clear, descriptive headings

Rich Text Block

What it does: Displays text content with formatting

Settings:

  • Heading: Optional heading for the block
  • Content: Rich text content (supports formatting, links, etc.)

Best for:

  • Company description or mission statement
  • Newsletter signup text
  • Store information
  • Brand story

Tips:

  • Keep text concise (2-3 sentences)
  • Use formatting to make it scannable
  • Include a call-to-action if relevant

Image Block

What it does: Displays an image (logo, badge, etc.)

Settings:

  • Heading: Optional heading above the image
  • Image: Upload or select an image
  • Image Link: Optional URL to link the image to
  • Image Width: Set the width (50-300px, default: 200px)

Best for:

  • Store logo
  • Trust badges or certifications
  • Awards or recognition
  • Partner logos

Tips:

  • Use high-quality images
  • Keep file sizes small for faster loading
  • Recommended width: 150-200px for logos

Store Info Block

What it does: Displays contact information with icons

Settings:

  • Heading: Title for the contact section (e.g., "Contact Us")
  • Show Phone: Toggle phone number display (checkbox)
  • Phone: Phone number (clickable on mobile)
  • Show Email: Toggle email display (checkbox)
  • Email: Email address (clickable)
  • Show Address: Toggle address display (checkbox)
  • Address: Physical address (rich text)
  • Show Hours: Toggle business hours display (checkbox)
  • Hours: Business hours text

Best for:

  • Contact information
  • Store location
  • Business hours
  • Customer service details

Tips:

  • Make sure all information is up to date
  • Use clear formatting for hours (e.g., "Mon-Fri: 9am-6pm, Sat: 10am-4pm")
  • Phone and email are automatically clickable
  • Address supports rich text formatting

Settings

Layout

Number of Columns

  • Controls how many columns the footer grid displays on desktop (1024px and above)
  • Range: 2-6 columns
  • Default: 4 columns
  • Mobile: Always displays 1 column
  • Tablet (768px-1023px): Always displays 2 columns
  • Desktop (1024px+): Uses your selected number of columns
  • Tip: Use 2-3 columns for minimal footers, 4-5 for comprehensive footers, 6 for maximum content

Appearance

Color Scheme

  • Select a color scheme to apply consistent colors throughout the footer
  • Uses color scheme tokens for:
    • Background color
    • Text colors (primary and muted)
    • Link colors (normal and hover states)
    • Border colors
    • Social icon backgrounds
  • Tip: Create custom color schemes in Theme Settings > Color Schemes for different footer styles

Top Padding

  • Space above footer content
  • Range: 0-100px (in 5px increments)
  • Default: 60px
  • Tip: More padding creates more breathing room

Bottom Padding

  • Space below footer content
  • Range: 0-100px (in 5px increments)
  • Default: 40px
  • Tip: Adjust based on your footer bottom section

Social Media

Show Social Media Icons

  • Displays social media icons in the footer
  • Icons are configured in Theme Settings > Social Media
  • Default: Enabled
  • Tip: Always enable to increase social engagement

Social Media Icon Size

  • Controls the size of social media icons
  • Options:
    • Small: Subtle, minimal look
    • Medium: Balanced size (recommended, default)
    • Large: Prominent, attention-grabbing
  • Tip: Match icon size to your footer's overall design aesthetic

Footer Bottom

Show Copyright

  • Displays copyright notice
  • Default: Enabled
  • Shows either custom copyright text or default format: "© [Year] [Store Name]. [Copyright text]. [Powered by Shopify link]"
  • The "Powered by Shopify" link automatically uses the footer link color
  • Tip: Keep enabled for legal protection

Copyright Text

  • Optional custom copyright text
  • If left empty, uses default: "© [Year] [Store Name]. [Copyright text]."
  • Supports rich text formatting
  • Tip: Leave empty to use default, or customize for your brand

Show Policies

  • Displays links to your store policies
  • Shows: Privacy Policy, Terms of Service, Refund Policy, etc.
  • Policies are set up in Settings > Legal in Shopify admin
  • Default: Enabled
  • Tip: Required in many regions, keep enabled

Show Shop Login

  • Displays a shop login button in the footer bottom section
  • Only appears if customer accounts are enabled in your store
  • Default: Disabled
  • Tip: Useful for B2B stores or stores with customer accounts

Show Payment Icons

  • Displays accepted payment method icons
  • Shows icons for payment types you've enabled in Shopify
  • Configure in Settings > Payments > Payment providers
  • Default: Enabled
  • Tip: Builds trust and shows payment options

Show Newsletter Signup

  • Displays a newsletter subscription form in the footer
  • Default: Disabled
  • Tip: Enable to collect email subscribers directly from the footer
  • When enabled, the newsletter form appears between the footer blocks and social media section

Newsletter Settings

When "Show Newsletter Signup" is enabled, you can customize the newsletter form:

Newsletter Heading

  • Title displayed above the newsletter form
  • Default: "Subscribe to our newsletter"
  • Tip: Keep it short and action-oriented

Newsletter Description

  • Text displayed below the heading
  • Default: "Get the latest updates on new products and upcoming sales"
  • Tip: Explain the value of subscribing

Email Input Placeholder

  • Placeholder text inside the email input field
  • Default: "Enter your email"
  • Tip: Keep it simple and clear

Subscribe Button Label

  • Text on the subscribe button
  • Default: "Subscribe"
  • Tip: Use action words like "Subscribe", "Join", or "Sign Up"

Success Message

  • Message displayed after successful subscription
  • Default: "Thank you for subscribing!"
  • Tip: Keep it friendly and confirm the subscription

Newsletter Form Features:

  • Uses theme's input styling from Theme Settings > Buttons & Inputs
  • Uses theme's primary button styling from color scheme
  • Email validation and error handling
  • Success message display
  • Subscribers are added to your customer list with "newsletter" tag
  • Responsive design (stacks on mobile)

Color Scheme Implementation

The footer uses color scheme tokens for consistent styling:

  • Background: background token from color scheme
  • Text: text token for primary text
  • Text Muted: text_muted token for secondary text (copyright, etc.)
  • Links: link and link_hover tokens for all links including "Powered by Shopify"
  • Borders: border token for dividers and borders
  • Social Icons: Uses surface or text with opacity for backgrounds
  • Newsletter Button: Uses primary, on_primary, and primary_hover tokens from color scheme
  • Newsletter Input: Uses input styling from Theme Settings > Buttons & Inputs

This ensures the footer respects your theme's color schemes and allows merchants to retheme the entire footer by changing the color scheme setting. The newsletter form button automatically uses the footer's color scheme primary button colors.

Common Footer Layouts

Simple Footer (2-3 Columns)

  • Rich Text block (company info)
  • Menu block (quick links)
  • Social media icons
  • Copyright and policies

Comprehensive Footer (4-5 Columns)

  • Rich Text block (about us)
  • Menu block (shop categories)
  • Menu block (company pages)
  • Store Info block (contact)
  • Social media icons
  • Copyright, policies, and payment icons

Minimal Footer (2 Columns)

  • Image block (logo)
  • Menu block (essential links)
  • Copyright only

Contact-Focused Footer (3-4 Columns)

  • Store Info block (full contact details)
  • Rich Text block (hours and location details)
  • Menu block (quick links)
  • Social media icons

Newsletter-Focused Footer (3-4 Columns)

  • Rich Text block (company info)
  • Menu block (quick links)
  • Newsletter signup form (enabled in settings)
  • Social media icons
  • Copyright and policies

Responsive Behavior

The footer grid automatically adapts to different screen sizes:

  • Mobile (< 768px): 1 column, all blocks stack vertically
  • Tablet (768px - 1023px): 2 columns
  • Desktop (1024px+): Uses your selected number of columns (2-6)

This ensures optimal readability and usability across all devices.

Tips & Best Practices

✅ Do's

  • Organize logically: Group related links together
  • Keep it updated: Ensure contact info and links are current
  • Show trust signals: Include payment icons and policies
  • Use clear headings: Make it easy to scan
  • Match columns to content: 2-3 blocks = 2-3 columns, 4-5 blocks = 4-5 columns
  • Test links: Verify all menu links work correctly
  • Mobile-friendly: Footer stacks on mobile, test the layout
  • Use color schemes: Leverage color schemes for consistent branding

❌ Don'ts

  • Don't overcrowd: Too many blocks can be overwhelming
  • Don't use too many columns: 6 columns can be hard to scan
  • Don't use tiny text: Ensure text is readable
  • Don't forget mobile: Test how footer looks on phones
  • Don't hide important info: Make contact details easy to find
  • Don't use broken links: Regularly check menu links
  • Don't hard-code colors: Always use color scheme settings

Block Organization Tips

Recommended Block Order

  1. Rich Text or Image (branding/company info)
  2. Menu blocks (navigation links)
  3. Store Info (contact information)
  4. Social media icons (below blocks)
  5. Footer bottom (copyright, policies, payments)

How Many Blocks?

  • Small store: 2-3 blocks (2-3 columns)
  • Medium store: 3-4 blocks (3-4 columns)
  • Large store: 4-5 blocks (4-5 columns)
  • Maximum recommended: 6 blocks (6 columns)

Block Headings

Use clear, descriptive headings:

  • ✅ "Quick Links", "Shop", "Company", "Contact Us"
  • ❌ "Links", "Stuff", "Info"

Adding and Managing Blocks

Adding a Block

  1. In the theme editor, click on the Footer section
  2. Scroll to the Blocks section
  3. Click Add block
  4. Choose a block type (Menu, Rich Text, Image, or Store Info)
  5. Configure the block settings
  6. Click Save

Reordering Blocks

  1. Click on a block in the left sidebar
  2. Use the ⋮⋮ (six dots) icon to drag and drop
  3. Move blocks to change their order

Removing a Block

  1. Click on the block you want to remove
  2. Scroll to the bottom of the block settings
  3. Click Remove block

Setting Up Menus for Footer

  1. Go to Online Store > Navigation in Shopify admin
  2. Click Add menu or edit an existing menu
  3. Name it "Footer" or similar
  4. Add menu items:
    • Links to pages (About, Contact, etc.)
    • Links to collections
    • Links to products
    • Custom URLs
  5. Save the menu
  6. Select this menu in your Footer Menu block

Color Scheme Setup

  1. Go to Online Store > Themes > Customize
  2. Click Theme settings (bottom left)
  3. Go to Color Schemes section
  4. Create or edit color schemes with appropriate colors for footer:
    • Dark background with light text for traditional footers
    • Light background with dark text for modern footers
    • Match your brand colors
  5. In the Footer section settings, select your desired color scheme
  6. All footer colors will automatically update

Social Media Setup

  1. Go to Online Store > Themes > Customize
  2. Click Theme settings (bottom left)
  3. Go to Social Media section
  4. Add your social media URLs:
    • Facebook
    • Instagram
    • Twitter/X
    • Pinterest
    • YouTube
    • TikTok
    • LinkedIn
    • And more
  5. Save settings
  6. Social icons will appear in footer if "Show social media icons" is enabled

Payment Icons Setup

  1. Go to Settings > Payments in Shopify admin
  2. Set up your payment providers
  3. Enable payment methods (Credit cards, PayPal, Apple Pay, etc.)
  4. Payment icons will automatically appear in footer if "Show Payment Icons" is enabled

Policies Setup

  1. Go to Settings > Legal in Shopify admin
  2. Create or update your policies:
    • Privacy Policy
    • Terms of Service
    • Refund Policy
    • Shipping Policy
  3. Policies will automatically appear in footer if "Show Policies" is enabled
  4. Policy links use the footer link color from your color scheme

Troubleshooting

Blocks Not Showing

  • Check: Make sure you've added blocks to the footer
  • Check: Verify block settings are filled in (especially menu selection)

Social Icons Not Showing

  • Check: Enable "Show social media icons" in footer settings
  • Check: Add social media URLs in Theme Settings > Social Media

Payment Icons Not Showing

  • Check: Enable "Show Payment Icons" in footer settings
  • Check: Set up payment providers in Settings > Payments

Menu Links Not Working

  • Check: Verify menu is selected in Menu block settings
  • Check: Ensure menu has items in Online Store > Navigation

Contact Info Not Clickable

  • Phone and Email: Automatically clickable, no setup needed
  • Address: Not clickable (text only)

Colors Not Changing

  • Check: Select a color scheme in footer settings
  • Check: Verify color scheme has appropriate colors set in Theme Settings > Color Schemes
  • Check: Clear browser cache after changing color schemes

Newsletter Form Not Showing

  • Check: Enable "Show newsletter signup" in footer settings
  • Check: Verify newsletter settings are configured (heading, description, etc.)
  • Check: Newsletter form appears between footer blocks and social media section

Newsletter Button Colors Wrong

  • Check: The button uses the footer's color scheme primary button colors
  • Check: Verify your color scheme has primary, on_primary, and primary_hover colors set
  • Check: Button styling follows Theme Settings > Buttons & Inputs settings

Newsletter Form Styling Issues

  • Check: Input styling comes from Theme Settings > Buttons & Inputs
  • Check: Button styling uses primary button style from color scheme
  • Check: Form is responsive and stacks on mobile devices

Layout Issues

  • Check: Number of columns setting (2-6)
  • Check: Footer automatically stacks on mobile (1 column)
  • Check: Tablet displays 2 columns regardless of setting

Newsletter Integration

The newsletter form integrates with Shopify's customer system:

  • Email Collection: Subscribers are added to your customer list
  • Tagging: All newsletter subscribers are tagged with "newsletter"
  • Email Marketing: Use the customer list for email marketing campaigns
  • Compliance: Ensure you have proper consent mechanisms in place (GDPR, CAN-SPAM, etc.)

To access newsletter subscribers:

  1. Go to Customers in Shopify admin
  2. Filter by tag: "newsletter"
  3. Export the list for your email marketing platform

Related Sections

  • Header - Navigation at the top of pages
  • Store Info Bar - Information bar above header
  • Color Schemes - Global color scheme settings
  • Buttons & Inputs - Global button and input styling (affects newsletter form)

Next Steps: