Footer Section Strategy

The footer is often overlooked, but it’s a crucial part of every page. A well-designed footer helps customers find information, builds trust, and provides important legal links. Let’s explore strategies for building effective footers.

Footers typically include several categories of content:

Secondary navigation menus
Quick links to popular pages
Sitemap-style category links
Customer service links (FAQ, Contact, Shipping)

Trust Signals

Payment method icons
Security badges
Certifications
Reviews/ratings

Legal

Privacy policy
Terms of service
Return/refund policy
Cookie policy

Engagement

Newsletter signup
Social media links
App download links
Loyalty program

Utility

Country/region selector
Currency selector
Language selector
Copyright notice

The header and footer serve different purposes:

Header	Footer
Primary navigation	Secondary/supplemental navigation
Limited space	More room for content
Quick access	Comprehensive links
Must be scannable	Can be detailed
Above the fold	End of page

The footer is where users look when they can’t find something in the main navigation. It’s also the natural endpoint of a page, so it’s a good place for next actions like newsletter signup.

Information Architecture

Organize footer content into logical groups:

Footer
├── Main Content (columns)
│   ├── Column 1: Navigation Menu
│   ├── Column 2: Customer Service
│   ├── Column 3: About/Contact
│   └── Column 4: Newsletter Signup
│
├── Secondary Bar
│   ├── Social Links
│   └── Payment Icons
│
└── Bottom Bar
    ├── Copyright
    ├── Policy Links
    └── Country Selector

Section Groups vs Single Section

Single Section Approach

All footer content in one section:

{# sections/footer.liquid #}
<footer class="footer">
  <div class="footer__main">
    {# Blocks for columns #}
  </div>
  <div class="footer__bottom">
    {# Copyright, policies #}
  </div>
</footer>

{% schema %}
{
  "name": "Footer",
  "blocks": [
    { "type": "menu" },
    { "type": "text" },
    { "type": "newsletter" }
  ]
}
{% endschema %}

Pros:

Simpler structure
All settings in one place
Easier to manage for small themes

Cons:

Limited flexibility
Can become complex with many options
Harder to reorder sections

Section Group Approach

Multiple sections in a footer group:

{# sections/footer-group.json #}
{
  "type": "footer",
  "name": "Footer",
  "sections": {
    "footer-main": {
      "type": "footer-columns"
    },
    "footer-bottom": {
      "type": "footer-bottom"
    }
  },
  "order": ["footer-main", "footer-bottom"]
}

Pros:

More modular
Sections can be reordered
Can add/remove sections
Better for large themes

Cons:

More files to manage
Settings spread across sections
More complex for merchants

Recommendation

For most themes, a single section with blocks provides the best balance of flexibility and simplicity. Use section groups when you need merchants to add entirely new footer components.

Schema Planning

Design your schema to cover common use cases:

Block Types to Consider

{
  "blocks": [
    {
      "type": "menu",
      "name": "Menu Column",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "link_list",
          "id": "menu",
          "label": "Menu"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text Column",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Content"
        }
      ]
    },
    {
      "type": "newsletter",
      "name": "Newsletter",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Subscribe to our newsletter"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Description"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image Column",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ]
}

Section Settings

{
  "settings": [
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "select",
      "id": "columns_desktop",
      "label": "Desktop columns",
      "options": [
        { "value": "2", "label": "2 columns" },
        { "value": "3", "label": "3 columns" },
        { "value": "4", "label": "4 columns" },
        { "value": "5", "label": "5 columns" }
      ],
      "default": "4"
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background color",
      "default": "#1a1a1a"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "Bottom Bar"
    },
    {
      "type": "checkbox",
      "id": "show_payment_icons",
      "label": "Show payment icons",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_country_selector",
      "label": "Show country selector",
      "default": false
    }
  ]
}

Here’s a starting point for a footer section:

{# sections/footer.liquid #}

<footer class="footer" style="background: {{ section.settings.background_color }}; color: {{ section.settings.text_color }};">
  <div class="footer__container container">

    {# Main columns #}
    <div class="footer__columns" style="--columns: {{ section.settings.columns_desktop }};">
      {%- for block in section.blocks -%}
        <div class="footer__column" {{ block.shopify_attributes }}>
          {%- case block.type -%}
            {%- when 'menu' -%}
              {% render 'footer-menu', block: block %}
            {%- when 'text' -%}
              {% render 'footer-text', block: block %}
            {%- when 'newsletter' -%}
              {% render 'footer-newsletter', block: block %}
            {%- when 'image' -%}
              {% render 'footer-image', block: block %}
          {%- endcase -%}
        </div>
      {%- endfor -%}
    </div>

    {# Bottom bar #}
    <div class="footer__bottom">
      <div class="footer__bottom-left">
        <p class="footer__copyright">
          &copy; {{ 'now' | date: '%Y' }} {{ shop.name }}. All rights reserved.
        </p>

        {%- if section.settings.show_policy_links -%}
          <nav class="footer__policies" aria-label="Policy links">
            {%- for policy in shop.policies -%}
              {%- if policy != blank -%}
                <a href="{{ policy.url }}">{{ policy.title }}</a>
              {%- endif -%}
            {%- endfor -%}
          </nav>
        {%- endif -%}
      </div>

      <div class="footer__bottom-right">
        {%- if section.settings.show_payment_icons -%}
          {% render 'payment-icons' %}
        {%- endif -%}
      </div>
    </div>

  </div>
</footer>

Presets for Quick Setup

Define sensible defaults in your presets:

{
  "presets": [
    {
      "name": "Footer",
      "blocks": [
        {
          "type": "menu",
          "settings": {
            "heading": "Quick Links",
            "menu": "footer"
          }
        },
        {
          "type": "menu",
          "settings": {
            "heading": "Customer Service",
            "menu": "footer"
          }
        },
        {
          "type": "text",
          "settings": {
            "heading": "About Us",
            "content": "<p>Your store description goes here.</p>"
          }
        },
        {
          "type": "newsletter",
          "settings": {
            "heading": "Stay Updated",
            "subheading": "Subscribe for exclusive offers and updates."
          }
        }
      ]
    }
  ]
}

Practice Exercise

Plan a footer for an outdoor gear store. Consider:

What navigation menus would you include?
What trust signals are important for this industry?
What engagement elements make sense?
How would you organize the columns?

Example Solution:

Column 1: Shop
- Camping
- Hiking
- Climbing
- Water Sports
- Sale

Column 2: Customer Service
- Shipping & Returns
- Size Guide
- Gear Care
- FAQ
- Contact Us

Column 3: About
- Our Story
- Sustainability
- Store Locations
- Careers

Column 4: Newsletter
- Heading: "Join the Adventure"
- Description: "Get gear tips and exclusive deals"
- Email signup form

Bottom Bar:
- Social links (Instagram, YouTube, TikTok)
- Payment icons
- Copyright
- Policy links

Key Takeaways

Footers serve different needs than headers: supplemental navigation, trust, legal
Organize content logically: group related items together
Use blocks for flexibility: let merchants add/remove/reorder columns
Plan your schema carefully: anticipate common customization needs
Consider single section vs group: single section works for most themes
Set good defaults: presets should create a usable footer immediately
Include essential elements: copyright, policies, payment icons

What’s Next?

With your strategy planned, the next lesson covers Dynamic Columns and Grid Patterns for building the actual footer layout with CSS.

What Belongs in a Footer

Navigation

Company Information