Footer Features

The Horizon footer uses a dynamic grid system that adapts from 1 to 4 columns and supports multiple block types for flexible footer layouts.

Key Features

Responsive Grid: Automatically adjusts from 1-4 columns based on block count
Flexible Blocks: Support for menus, text, images, social links, email signup, and more
Smart Layout: Handles orphaned elements intelligently
Customizable Spacing: Adjust gap between footer blocks
Color Schemes: Full color scheme support

Footer Structure

The footer uses a container-based architecture:

<div class="section-background color-{{ section.settings.color_scheme }}"></div>
<div class="section section--{{ section.settings.section_width }} color-{{ section.settings.color_scheme }}">
  <div class="footer-content spacing-style" style="
    --footer-gap: {{ section.settings.gap }}px;
    --grid-columns: {{ grid_columns }};
  ">
    {% content_for 'blocks' %}
  </div>
</div>

Grid Layout System

Automatic Column Calculation

The footer automatically calculates optimal columns based on block count:

{% liquid
  assign total_blocks = section.blocks.size
  assign grid_columns = total_blocks | at_most: 4
  
  # Calculate last row counts
  assign last_row_count = total_blocks | minus: 1 | modulo: 4 | plus: 1
  assign tablet_last_row_count = total_blocks | minus: 1 | modulo: 2 | plus: 1
%}

Column Behavior:

1 block = 1 column (centered)
2 blocks = 2 columns
3 blocks = 3 columns
4+ blocks = 4 columns (desktop), 2 columns (tablet)

Responsive Breakpoints

Mobile
Tablet
Desktop

Breakpoint: < 750px

.footer-content {
  grid-template-columns: 1fr;
}

All blocks stack vertically in a single column.

Breakpoint: 750px - 989px

.footer-content {
  grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
}

.footer-content[style*='--grid-columns: 4'] {
  grid-template-columns: repeat(2, 1fr);
}

Maximum 3 columns, except 4-column layouts use 2 columns.

Breakpoint: ≥ 990px

.footer-content {
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

Uses the calculated number of columns (1-4).

Orphaned Item Handling

When the last row has a single item, it spans the full width:

{% assign has_isolated_grid_item_desktop = false %}
{% if total_blocks > 4 and last_row_count == 1 %}
  {% assign has_isolated_grid_item_desktop = true %}
{% endif %}

.footer-content--isolated-grid-item-desktop > :last-child {
  grid-column: 1 / -1;
}

This ensures single items in the last row don’t appear awkwardly narrow.

Supported Block Types

The footer supports these block types:

Core Blocks

Menu Block

Text Block

Add text content, headings, or rich text.Type: textUse Case: Copyright notices, company descriptions, disclaimers

Logo Block

Display your store logo.Type: logoUse Case: Brand identity in footer

Engagement Blocks

Follow on Shop

Shopify’s Follow on Shop button.Type: follow-on-shopUse Case: Enable customers to follow your shop

Visual Blocks

Image Block

Add custom images.Type: imageUse Case: Badges, certifications, partner logos

Icon Block

Display icon with optional text.Type: iconUse Case: Feature highlights, trust badges

Payment Icons

Show accepted payment methods.Type: payment-iconsUse Case: Display payment options

Layout Blocks

Group Block

Group multiple blocks together.Type: groupUse Case: Create complex layouts

Button Block

Add call-to-action buttons.Type: button

Divider Block

Visual separator.Type: _divider

Jumbo Text

Large display text.Type: jumbo-text

Footer Settings

Layout Settings

section_width:
  options:
    - page-width (default)
    - full-width
  
gap:
  min: 0
  max: 100
  step: 1
  unit: px
  default: 0

Gap Between Blocks:

style="--footer-gap: {{ section.settings.gap }}px;"

Color Scheme

color-{{ section.settings.color_scheme }}

Available Schemes:

scheme-1 (default)
Custom color schemes from theme settings

Padding Settings

Top Padding
Bottom Padding

padding-block-start:
  min: 0
  max: 100
  step: 1
  unit: px
  default: 20

padding-block-end:
  min: 0
  max: 100
  step: 1
  unit: px
  default: 20

Preset Configuration

The footer includes a preset with newsletter signup:

{
  "name": "Footer",
  "settings": {
    "gap": 20,
    "color_scheme": "scheme-1",
    "padding-block-start": 36,
    "padding-block-end": 36
  },
  "blocks": {
    "newsletter-group": {
      "type": "group",
      "settings": {
        "content_direction": "column",
        "vertical_on_mobile": true,
        "horizontal_alignment": "flex-start",
        "vertical_alignment": "center",
        "gap": 6
      },
      "blocks": {
        "newsletter-heading": {
          "type": "text",
          "settings": {
            "text": "Join our email list",
            "type_preset": "h3"
          }
        },
        "newsletter-text": {
          "type": "text",
          "settings": {
            "text": "Get exclusive deals and early access"
          }
        }
      }
    },
    "newsletter-form": {
      "type": "email-signup"
    }
  }
}

Performance Optimization

The footer uses content visibility for better performance:

.footer-content {
  contain: content;
  content-visibility: auto;
}

Content visibility ensures the footer only renders when scrolled into view, improving initial page load performance.

Example Layouts

Four-Column Footer

<!-- Menu | Links | Newsletter | Social -->
<div class="footer-content" style="--grid-columns: 4;">
  <div>{% render 'menu' %}</div>
  <div>{% render 'menu' %}</div>
  <div>{% render 'email-signup' %}</div>
  <div>{% render 'social-links' %}</div>
</div>

Centered Single Column

<!-- Logo + Copyright -->
<div class="footer-content" style="--grid-columns: 1;">
  <div>{% render 'logo' %}</div>
</div>

Five Blocks (Orphaned Item)

<!-- 4 blocks in first row, 1 spanning full width in second -->
<div class="footer-content footer-content--isolated-grid-item-desktop"
     style="--grid-columns: 4; --last-row-count: 1;">
  <div>Block 1</div>
  <div>Block 2</div>
  <div>Block 3</div>
  <div>Block 4</div>
  <div style="grid-column: 1 / -1;">Block 5 - Full Width</div>
</div>

Schema Structure

{
  "name": "Footer",
  "class": "section-wrapper",
  "enabled_on": {
    "groups": ["footer"]
  },
  "blocks": [
    { "type": "_divider" },
    { "type": "@app" },
    { "type": "button" },
    { "type": "follow-on-shop" },
    { "type": "group" },
    { "type": "icon" },
    { "type": "image" },
    { "type": "menu" },
    { "type": "payment-icons" },
    { "type": "text" },
    { "type": "logo" },
    { "type": "jumbo-text" },
    { "type": "social-links" },
    { "type": "email-signup" }
  ]
}

Overview

Core Concepts

Development

Customization

Features

Footer Features

Key Features

Footer Structure

Grid Layout System

Automatic Column Calculation

Responsive Breakpoints

Orphaned Item Handling

Supported Block Types

Core Blocks

Engagement Blocks

Visual Blocks

Layout Blocks

Footer Settings

Layout Settings

Color Scheme

Padding Settings

Preset Configuration

Performance Optimization

Example Layouts

Four-Column Footer

Centered Single Column

Five Blocks (Orphaned Item)

Schema Structure

​Key Features

​Footer Structure

​Grid Layout System

​Automatic Column Calculation

​Responsive Breakpoints

​Orphaned Item Handling

​Supported Block Types

​Core Blocks

​Engagement Blocks

​Visual Blocks

​Layout Blocks

​Footer Settings

​Layout Settings

​Color Scheme

​Padding Settings

​Preset Configuration

​Performance Optimization

​Example Layouts

​Four-Column Footer

​Centered Single Column

​Five Blocks (Orphaned Item)

​Schema Structure

Key Features

Footer Structure

Grid Layout System

Automatic Column Calculation

Responsive Breakpoints

Orphaned Item Handling

Supported Block Types

Core Blocks

Engagement Blocks

Visual Blocks

Layout Blocks

Footer Settings

Layout Settings

Color Scheme

Padding Settings

Preset Configuration

Performance Optimization

Example Layouts

Four-Column Footer

Centered Single Column

Five Blocks (Orphaned Item)

Schema Structure