# Footer

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FmfINqDARnolMcQvFoQQ1%2FFox-BG%20Light%20-%202025-12-02T092218.865.jpg?alt=media&#x26;token=5713d930-fa82-4dc0-a0e2-0151c2e475c4" 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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FvVokl2XHwcDPBYw4j0O6%2Fimage.png?alt=media&#x26;token=fe70fa17-4da0-4a66-adbf-c82decb90c7c" 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="../theme-settings/social-media"><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="header/language-selector">language-selector</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="header/currency-selector">currency-selector</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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FTNPhCFa9S6G4LPhAabf2%2Fimage.png?alt=media&#x26;token=b9551fd9-f707-4a21-be3f-aff4f1b3ce54" alt=""><br></p><p>On mobile, leaving the title blank removes the accordion and keeps the content always visible.<br><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FZokidjbHCMhSp5VJYRxR%2Fimage.png?alt=media&#x26;token=f40d106f-c003-4fc5-9531-7f322ea46d70" 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="../../theme-blocks/layout#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="../../theme-blocks/layout#grid"><em>Learn more</em></a></td></tr><tr><td><strong>Icon</strong></td><td>Add branded icons or visual markers. <a href="../../theme-blocks/basic#icon"><em>Learn more</em></a></td></tr><tr><td><strong>Image</strong></td><td>Display small logos, badges, or store graphics. <a href="../../theme-blocks/basic#image"><em>Learn more</em></a></td></tr><tr><td><strong>Video</strong></td><td>Embed short videos. <a href="../../theme-blocks/basic#video"><em>Learn more</em></a></td></tr><tr><td><strong>Text</strong></td><td>Add paragraphs, contact info, store hours, etc. <a href="../../theme-blocks/basic#text"><em>Learn more</em></a></td></tr><tr><td><strong>Button</strong></td><td>Add CTAs. <a href="../../theme-blocks/basic#button"><em>Learn more</em></a></td></tr><tr><td><strong>Divider</strong></td><td>Add separation inside the column content. <a href="../../theme-blocks/basic#divider"><em>Learn more</em></a></td></tr><tr><td><strong>Newsletter</strong></td><td>Add a newsletter signup form. <a href="../../theme-blocks/forms#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="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FesmIFw9idCgf9WSFBaO2%2Fimage.png?alt=media&#x26;token=2a40013f-8d79-40df-ba90-b515c7099dcf" alt=""><figcaption></figcaption></figure>