> ## 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.

# Footer Features

> Flexible footer section with responsive grid layout and customizable blocks

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:

```liquid theme={null}
<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 theme={null}
{% 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

<Tabs>
  <Tab title="Mobile">
    **Breakpoint:** \< 750px

    ```css theme={null}
    .footer-content {
      grid-template-columns: 1fr;
    }
    ```

    All blocks stack vertically in a single column.
  </Tab>

  <Tab title="Tablet">
    **Breakpoint:** 750px - 989px

    ```css theme={null}
    .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.
  </Tab>

  <Tab title="Desktop">
    **Breakpoint:** ≥ 990px

    ```css theme={null}
    .footer-content {
      grid-template-columns: repeat(var(--grid-columns), 1fr);
    }
    ```

    Uses the calculated number of columns (1-4).
  </Tab>
</Tabs>

### Orphaned Item Handling

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

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

```css theme={null}
.footer-content--isolated-grid-item-desktop > :last-child {
  grid-column: 1 / -1;
}
```

<Note>
  This ensures single items in the last row don't appear awkwardly narrow.
</Note>

## Supported Block Types

The footer supports these block types:

### Core Blocks

<Accordion title="Menu Block">
  Display a navigation menu in the footer.

  **Type:** `menu`

  **Use Case:** Footer navigation, legal links, customer service links
</Accordion>

<Accordion title="Text Block">
  Add text content, headings, or rich text.

  **Type:** `text`

  **Use Case:** Copyright notices, company descriptions, disclaimers
</Accordion>

<Accordion title="Logo Block">
  Display your store logo.

  **Type:** `logo`

  **Use Case:** Brand identity in footer
</Accordion>

<Accordion title="Social Links Block">
  Display social media icons and links.

  **Type:** `social-links`

  **Use Case:** Connect to social profiles
</Accordion>

### Engagement Blocks

<Accordion title="Email Signup Block">
  Newsletter subscription form.

  **Type:** `email-signup`

  **Use Case:** Build email list

  ```liquid theme={null}
  <div class="footer-email-signup">
    <!-- Newsletter form -->
  </div>
  ```
</Accordion>

<Accordion title="Follow on Shop">
  Shopify's Follow on Shop button.

  **Type:** `follow-on-shop`

  **Use Case:** Enable customers to follow your shop
</Accordion>

### Visual Blocks

<Accordion title="Image Block">
  Add custom images.

  **Type:** `image`

  **Use Case:** Badges, certifications, partner logos
</Accordion>

<Accordion title="Icon Block">
  Display icon with optional text.

  **Type:** `icon`

  **Use Case:** Feature highlights, trust badges
</Accordion>

<Accordion title="Payment Icons">
  Show accepted payment methods.

  **Type:** `payment-icons`

  **Use Case:** Display payment options
</Accordion>

### Layout Blocks

<Accordion title="Group Block">
  Group multiple blocks together.

  **Type:** `group`

  **Use Case:** Create complex layouts
</Accordion>

<Accordion title="Button Block">
  Add call-to-action buttons.

  **Type:** `button`
</Accordion>

<Accordion title="Divider Block">
  Visual separator.

  **Type:** `_divider`
</Accordion>

<Accordion title="Jumbo Text">
  Large display text.

  **Type:** `jumbo-text`
</Accordion>

## Footer Settings

### Layout Settings

```yaml theme={null}
section_width:
  options:
    - page-width (default)
    - full-width
  
gap:
  min: 0
  max: 100
  step: 1
  unit: px
  default: 0
```

**Gap Between Blocks:**

```liquid theme={null}
style="--footer-gap: {{ section.settings.gap }}px;"
```

### Color Scheme

```liquid theme={null}
color-{{ section.settings.color_scheme }}
```

**Available Schemes:**

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

### Padding Settings

<Tabs>
  <Tab title="Top Padding">
    ```yaml theme={null}
    padding-block-start:
      min: 0
      max: 100
      step: 1
      unit: px
      default: 20
    ```
  </Tab>

  <Tab title="Bottom Padding">
    ```yaml theme={null}
    padding-block-end:
      min: 0
      max: 100
      step: 1
      unit: px
      default: 20
    ```
  </Tab>
</Tabs>

## Preset Configuration

The footer includes a preset with newsletter signup:

```json theme={null}
{
  "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:

```css theme={null}
.footer-content {
  contain: content;
  content-visibility: auto;
}
```

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

## Example Layouts

### Four-Column Footer

```liquid theme={null}
<!-- 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

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

### Five Blocks (Orphaned Item)

```liquid theme={null}
<!-- 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

```json theme={null}
{
  "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" }
  ]
}
```