Footer

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

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

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

#Section setting

Setting	Description
Menu	Choose a menu to display as quick links in the bottom bar. ✍️ See how to add and edit menus on Shopify Help Center
Enable Follow on Shop	Displays Shopify’s "Follow on Shop" badge (only if Shop Pay is configured for your store. Learn more).
Enable social media icons	Shows social icons if URLs are added in Theme Settings > Social media. Learn more
Enable language selector	Shows a language dropdown if multiple languages are published. Learn more: Language selector
Enable country selector	Shows a country/currency selector if multiple markets are configured. Learn more: Currency selector
Enable payment icons	Displays supported Shopify payment icons.

#Block settings - Footer column

Each Footer column block lets you create structured sections inside the footer top area.

#⚙️ Column block

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

#📦 Supported nested blocks (Content inside the column)

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

#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