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
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
%}
- 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;
}
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);
}
Breakpoint: ≥ 990px.footer-content {
grid-template-columns: repeat(var(--grid-columns), 1fr);
}
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
Display social media icons and links.Type: social-linksUse Case: Connect to social profiles
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
Layout Settings
section_width:
options:
- page-width (default)
- full-width
gap:
min: 0
max: 100
step: 1
unit: px
default: 0
style="--footer-gap: {{ section.settings.gap }}px;"
Color Scheme
color-{{ section.settings.color_scheme }}
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" }
]
}
social-linksUse Case: Connect to social profiles