# Footer

<figure><img src="/files/acXr2jVvJ7TMMEqvJk8R" alt=""><figcaption></figcaption></figure>

The Footer appears at the bottom of every page and is one of the most important sections for building trust and navigation clarity.&#x20;

In Pebble, the Footer is fully customizable — you can add multiple columns, navigation menus, contact info, social icons, localization dropdowns, and payment method icons.

## Section overview <a href="#what-is-the-header-section" id="what-is-the-header-section"></a>

The Footer section is divided into two parts:

#### **1. Footer top**

* Contains **blocks** you add (footer columns)
* Typically used for menus, contact info, newsletter, or custom content

#### **2. Footer bottom**

* Social media icons
* Follow on Shop button
* Custom footer menu / quick links
* Currency & language selector
* Payment icons
* Copyright text

## How to edit the Footer section <a href="#how-to-edit-the-header-section" id="how-to-edit-the-header-section"></a>

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), go to the **Footer** area.
2. Select the **Footer** section.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

### Section setting

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Menu</strong></td><td>Choose a menu to display as quick links in the bottom bar.<br><img src="/files/3tSifwAjvLY2EaLb1tP8" alt=""><br><span data-gb-custom-inline data-tag="emoji" data-code="270d">✍️</span> <em>See</em> <a href="https://help.shopify.com/"><em>how to add and edit menus on Shopify Help Center</em></a></td></tr><tr><td><strong>Enable Follow on Shop</strong></td><td>Displays Shopify’s "Follow on Shop" badge (only if Shop Pay is configured for your store. <a href="https://help.shopify.com/manual/online-store/themes/customizing-themes/common-customizations/add-shop-buttons"><em>Learn more</em></a>).</td></tr><tr><td><strong>Enable social media icons</strong></td><td>Shows social icons if URLs are added in <strong>Theme Settings > Social media</strong>. <a href="/pages/RuVbI7q2u52tTPcROdcA"><em>Learn more</em></a></td></tr><tr><td><strong>Enable language selector</strong></td><td>Shows a language dropdown if multiple languages are published.<br><em>Learn more:</em> <a data-mention href="/pages/809aMlMmUNQPWsXuLaUZ">/pages/809aMlMmUNQPWsXuLaUZ</a></td></tr><tr><td><strong>Enable country selector</strong></td><td>Shows a country/currency selector if multiple markets are configured.<br><em>Learn more:</em> <a data-mention href="/pages/miD5L8I89Z7o21fID5aZ">/pages/miD5L8I89Z7o21fID5aZ</a></td></tr><tr><td><strong>Enable payment icons</strong></td><td>Displays supported Shopify payment icons.</td></tr></tbody></table>

### Block settings - Footer column

Each **Footer column** block lets you create structured sections inside the footer top area.&#x20;

{% hint style="info" %}
A typical footer might include:

* About us
* Customer service menu
* Shop links
* Contact info
* Newsletter signup
  {% endhint %}

#### ⚙️ Column block

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Width (%)</strong></td><td>Sets how wide the column is inside the footer layout (10%–100%). Common values: 20–33%.</td></tr><tr><td><strong>Heading</strong></td><td><p>The title of the column.<br><img src="/files/AM44CNfuffm41ku5N4xw" alt=""><br></p><p>On mobile, leaving the title blank removes the accordion and keeps the content always visible.<br><img src="/files/L1VzDQvomghxq9NWtARh" alt=""></p></td></tr><tr><td><strong>Heading size</strong></td><td>Choose the visual size of the column heading: H6 (small), H5 (default), or H4 (large).</td></tr><tr><td><strong>Open by default (mobile)</strong></td><td>When enabled, the accordion opens automatically on mobile. Useful for primary columns.</td></tr><tr><td><strong>Enable divider</strong></td><td>Adds a subtle dividing line between this column and the next.</td></tr><tr><td><strong>Column order</strong></td><td>Sets a custom desktop order using numeric values (lower number = appears earlier). Useful for rearranging layouts.</td></tr></tbody></table>

#### 📦 Supported nested blocks (Content inside the column)

Each footer column can contain any of the following blocks, giving you full design freedom:

<table><thead><tr><th width="275">Block Type</th><th>Use Case</th></tr></thead><tbody><tr><td><strong>App block</strong> </td><td>Insert content from third-party apps.</td></tr><tr><td><strong>Group</strong></td><td>Create grouped content layouts. <a href="/pages/yUngW5lCQUn2Igc1Ym1P#group"><em>Learn more</em></a></td></tr><tr><td><strong>Grid</strong></td><td>Build multi-column content inside the footer column. <a href="/pages/yUngW5lCQUn2Igc1Ym1P#grid"><em>Learn more</em></a></td></tr><tr><td><strong>Icon</strong></td><td>Add branded icons or visual markers. <a href="/pages/Je2j8VQFFrujz0gUuISl#icon"><em>Learn more</em></a></td></tr><tr><td><strong>Image</strong></td><td>Display small logos, badges, or store graphics. <a href="/pages/Je2j8VQFFrujz0gUuISl#image"><em>Learn more</em></a></td></tr><tr><td><strong>Video</strong></td><td>Embed short videos. <a href="/pages/Je2j8VQFFrujz0gUuISl#video"><em>Learn more</em></a></td></tr><tr><td><strong>Text</strong></td><td>Add paragraphs, contact info, store hours, etc. <a href="/pages/Je2j8VQFFrujz0gUuISl#text"><em>Learn more</em></a></td></tr><tr><td><strong>Button</strong></td><td>Add CTAs. <a href="/pages/Je2j8VQFFrujz0gUuISl#button"><em>Learn more</em></a></td></tr><tr><td><strong>Divider</strong></td><td>Add separation inside the column content. <a href="/pages/Je2j8VQFFrujz0gUuISl#divider"><em>Learn more</em></a></td></tr><tr><td><strong>Newsletter</strong></td><td>Add a newsletter signup form. <a href="/pages/LUT3BGa79hAMoIGOWxpU#newsletter"><em>Learn more</em></a></td></tr><tr><td><strong>Footer menu</strong> </td><td>Add a Shopify menu. </td></tr></tbody></table>

## Best practices

✅ **Use consistent column widths**

* 25% each for a 4-column layout
* 33% for a 3-column layout
* 20 / 20 / 20 / 40 for a layout with a wider “About us” section

✅ **Keep link lists short (max 6–8 items).** This helps scanning and avoids clutter.

✅ **Use grouping blocks for rich layouts.** Great for:

* Logos + text combinations
* Icon + text lists
* Mini contact cards

<figure><img src="/files/8azv5wQHnKRJwN0BJNr4" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/global-sections/footer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.