Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Shopify/horizon/llms.txt

Use this file to discover all available pages before exploring further.

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

Breakpoint: < 750px
.footer-content {
  grid-template-columns: 1fr;
}
All blocks stack vertically in a single column.

​
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

Add text content, headings, or rich text.Type: textUse Case: Copyright notices, company descriptions, disclaimers
Display your store logo.Type: logoUse Case: Brand identity in footer

​
Engagement Blocks

Newsletter subscription form.Type: email-signupUse Case: Build email list
<div class="footer-email-signup">
  <!-- Newsletter form -->
</div>
Shopify’s Follow on Shop button.Type: follow-on-shopUse Case: Enable customers to follow your shop

​
Visual Blocks

Add custom images.Type: imageUse Case: Badges, certifications, partner logos
Display icon with optional text.Type: iconUse Case: Feature highlights, trust badges
Show accepted payment methods.Type: payment-iconsUse Case: Display payment options

​
Layout Blocks

Group multiple blocks together.Type: groupUse Case: Create complex layouts
Add call-to-action buttons.Type: button
Visual separator.Type: _divider
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

padding-block-start:
  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" }
  ]
}