Footer Guide
The footer is a highly customizable section that can include multiple components such as a newsletter, scrolling marquee text, and the main footer content.
It provides flexible layout options, menu links, social icons, custom content, and branding elements to create a comprehensive footer that matches your store's design.
Footer Group Structure
The footer is organized as a group of sections that can include:
- Newsletter — Collects email subscriptions
- Marquee — Displays scrolling text
- Main Footer — Contains menus, custom content, and branding elements
The footer group allows you to mix and match sections to create the perfect footer for your store. Add only what you need!
Main Footer Features
Layout Options
| Setting | Description | Options |
|---|---|---|
| Layout orientation | Controls how footer blocks are arranged | Vertical, Horizontal |
| Show copyright notice | Displays copyright text with current year | On/Off |
| Show payment icons | Displays accepted payment method icons | On/Off |
| Show follow on shop | Displays Shopify's follow button | On/Off |
Footer Image
| Setting | Description | Options |
|---|---|---|
| Footer image | Optional image to display in footer | Image picker |
| Footer image position | Where the image appears relative to content | Above blocks, Below blocks |
| Image size | Controls the width of the footer image | XS, S, M, L, XL, Full Width |
| Top/Bottom padding | Spacing above and below the image | 0-50px |
Appearance
| Setting | Description | Options |
|---|---|---|
| Color scheme | Sets the color scheme for the footer | Theme color schemes |
Footer Blocks
The footer supports multiple content blocks that can be added, removed, and reordered:
Social Media Block
Displays social media links configured in Theme Settings.
| Setting | Description | Options |
|---|---|---|
| Title | Heading above social links | Text |
| Display type | How social links are displayed | Icons, Text |
Menu Block
Displays links from a selected menu (up to 4 menu blocks can be added).
| Setting | Description | Options |
|---|---|---|
| Title | Heading above menu links | Text |
| Footer menu | Menu to display in this block | Link list selection |
Empty Space Block
Adds an empty column or row for layout purposes.
Custom Liquid/HTML Block
Allows for custom content using HTML or Liquid.
| Setting | Description | Options |
|---|---|---|
| Title | Heading above custom content | Text |
| Custom HTML | HTML or Liquid code | HTML editor |
Text Block
Displays a title and formatted text content.
| Setting | Description | Options |
|---|---|---|
| Title | Heading for the text block | Text |
| Title alignment | Horizontal alignment of title | Left, Center, Right |
| Description | Text content to display | Rich text editor |
| Description alignment | Horizontal alignment of content | Left, Center, Right |
Newsletter Section
When included in the footer group, the newsletter section offers:
- Layout options (inline or stacked)
- Customizable heading and subheading
- Flexible spacing and color scheme options
Adding a newsletter section to your footer is one of the most effective ways to capture email addresses for marketing campaigns.
Marquee Section
When included in the footer group, the marquee section offers:
- Scrolling text that can be used for announcements
- Customizable text size and spacing
- Speed and direction controls
- Pause on hover option
Setup Instructions
Basic Footer Setup
- Navigate to your Shopify admin → Online Store → Themes
- Click Customize on your current theme
- Scroll to the footer section at the bottom
- Configure the general footer settings
Adding Footer Blocks
- In the footer section, click "Add block"
- Choose from available block types:
- Social
- Menu
- Empty space
- Custom Liquid/HTML
- Text
- Configure the block settings
- Use the drag handles to reorder blocks
Setting Up the Footer Group
- To customize the entire footer group, select "Footer" from the sections dropdown
- Add, remove, or reorder sections within the footer group
- Configure each section individually
Best Practices
Layout Considerations
- Vertical layout works well for more complex footers with multiple menus
- Horizontal layout is clean and modern for simpler footers
- Use empty space blocks to create balanced columns
- Consider mobile users — test how your footer collapses on small screens
Content Organization
- Group related links together in menu blocks
- Limit the number of links to avoid overwhelming visitors
- Place the most important links in the first menu block
- Use clear, concise menu titles
Avoid adding more than 4-5 menu blocks. Too many links can overwhelm visitors and reduce the effectiveness of your footer navigation.
Visual Design
- Choose a color scheme that complements your overall site design
- If using a footer image, ensure it's not too tall (which can push content down)
- For logos, the "Below blocks" position often works best
- Maintain consistent text alignment within blocks
Functionality
- Include contact information in a custom HTML block for easy access
- Consider adding a newsletter section for lead generation
- Use social media blocks to increase your social following
- Ensure all menu links are working and relevant
Combining Footer Elements
The footer group allows you to combine multiple sections for a comprehensive footer experience:
- Top Section: Often a newsletter to capture emails
- Middle Section: Optional marquee for announcements or branding
- Main Footer: Menus, social links, and custom content
- Bottom Elements: Copyright notice and payment icons
Advanced Tips
Custom HTML
Use the Custom Liquid/HTML block for complex layouts or integrations:
- Add custom contact forms
- Embed third-party widgets
- Create unique layouts with HTML/CSS
- Integrate external services
Marquee Timing
- Adjust marquee speed based on the length of your text
- Shorter text = slower speed for readability
- Longer text = faster speed to avoid waiting
Footer Image
- Use a footer image with a transparent background for better integration
- Consider using your logo or brand imagery
- Optimize image size for fast loading
- Test on mobile to ensure it doesn't push content too far
Newsletter Design
- Match newsletter styling with your brand colors
- Keep the form simple (email field + button)
- Add clear value proposition ("Get 10% off your first order")
- Test on mobile devices for usability
Multiple Menus
- Create separate menus in Shopify's Navigation settings for footer-specific links
- Organize menus by category (Shop, Help, About, Legal)
- Keep each menu focused and relevant
- Use descriptive menu titles
Recommended footer menu structure:
- Shop: Product categories, collections, sale
- Help: FAQ, shipping, returns, contact
- About: Our story, blog, press
- Legal: Privacy policy, terms, accessibility