Footer

A simple, non-technical guide to the Footer section of your theme — the area at the very bottom of every page that holds your contact details, navigation links, newsletter signup, social icons, and more.

1. What is the Footer?#

The Footer is the section that appears at the bottom of every page of your store. It's where shoppers look when they want to:

• Find your contact information (address, email, chat)
• Browse quick links to policies, FAQs, or collections
• Subscribe to your newsletter
• Access your social media profiles
• Switch country/region or language
• See accepted payment methods

A well-organized footer builds trust and makes it easy for customers to find what they need.

2. Key Features at a Glance#

• 5 block types — Newsletter, Links (menu), Text, Contact, and Image columns
• Flexible column widths — each block has its own width percentage so you can build any layout
• Light & dark mode colors — separate background, text, and social icon colors for each mode
• Logo with positioning — show your logo at the top, middle, or bottom of the footer area
• Social media icons — two independent rows of social icons (top and bottom)
• Newsletter signup form — with customizable input style, radius, and colors
• Contact info block — address, chat/WhatsApp link, email with automatic icons
• Payment icons — automatically shows your store's enabled payment methods
• Country/region & language selectors — let international shoppers switch locale
• Secondary links — a separate menu row for policy links (Terms, Privacy, etc.)
• Popular links — a categorized link section with a two-level menu structure
• Collapsible mobile accordion — each block can collapse on phones for a cleaner experience
• Spacing controls — separate desktop and mobile padding

3. Where to Find It in the Theme Editor#

1. In your Shopify admin, go to Online Store → Themes → Customize.
2. Scroll down the section list and open the Footer group.
3. Click Footer.

The settings are split into two areas:

• Section settings — overall footer options (logo, social icons, selectors, colors, spacing). These apply to the whole footer.
• Content blocks — the individual columns that make up your footer (Contact, Links, Newsletter, etc.). Click a block to edit it, drag to reorder, or click Add block to add more.

4. Section Settings (the overall footer)#

These control the footer as a whole — not the individual columns.

Logo#

Social media#

Country/region selector#

Language selector#

Payment icons#

Secondary links#

Bottom social#

Popular links#

Spacing — Desktop#

Spacing — Mobile#

Colors — Light mode#

Colors — Dark mode#

5. Content Blocks#

The footer's main content area is built from blocks — each block becomes a column on desktop and a stacked section on mobile. You can mix and match these five block types to create your ideal footer layout.

5a. Newsletter Block (limit: 1)#

A newsletter signup form with optional content above and a description below. You can only add one Newsletter block per footer.

Layout settings

Content

Newsletter form

Input style options:

• Solid — A filled input field. When selected, extra color settings appear for customizing the input's background, text, and border colors in both light and dark mode.
• Outline — A bordered, transparent input field.
• Button — The email input is paired with a visible subscribe button. When selected, extra settings appear for the button text (default: "Subscribe"), button size (S / M / L), and button style (Primary / Secondary).

Solid style colors (only visible when Input style = Solid)

Button style settings (only visible when Input style = Button)

Message colors

5b. Links Block (no limit)#

A column of navigation links pulled from one of your Shopify menus. You can add multiple Links blocks to create several link columns across your footer.

5c. Text Block (no limit)#

A column for free-form text content — useful for an "About Us" blurb, store description, or any custom message.

5d. Contact Block (no limit)#

A column displaying your store's contact information with automatic icons for each type of info.

5e. Image Block (no limit)#

A column that displays an image — useful for badges, certifications, or decorative graphics.

6. Building Your Footer — Step by Step#

Here's a practical walkthrough for building a typical, professional footer layout:

1. Add a Contact block (set width to ~30%)

- Enter your store address, WhatsApp/chat link and hours, and support email.

1. Add 2–3 Links blocks (set each to ~13%)

- Point each block to a different navigation menu (e.g., "Shop", "Customer Service", "About Us"). - Create these menus first in Online Store → Navigation if they don't exist yet.

1. Add a Newsletter block (set width to ~30%)

- Write a short heading and description. - Choose your preferred input style (Outline for a clean look, Button for a prominent CTA).

1. Configure the bottom bar

- Turn on Show social icons and/or Show bottom social for social media links. - Turn on Show payment icons to display accepted payment methods. - Turn on Show country selector and Show language selector if you sell internationally.

1. Set up secondary links

- Choose a menu containing your policy pages (Terms of Service, Privacy Policy, etc.).

1. Set up the logo

- Turn on Show logo and upload both light and dark versions. - Choose a position (Middle is the most common) and alignment.

1. Add popular links (optional)

- Create a two-level menu in Online Store → Navigation where top-level items are categories and child items are the actual links. - Turn on Show popular links and select that menu.

1. Customize colors

- Set background, text, and social icon colors for both light and dark modes.

1. Adjust spacing

- Fine-tune the desktop and mobile padding to match your store's overall feel.

7. Footer Layout Diagram#

Here's a visual overview of how the footer is structured from top to bottom:

1┌─────────────────────────────────────────────────────────┐2│  LOGO (if position = Top)                               │3├─────────────────────────────────────────────────────────┤4│                                                         │5│  CONTENT BLOCKS (columns)                               │6│  ┌──────────┬────────┬────────┬────────┬──────────┐     │7│  │ Contact  │ Links  │ Links  │ Links  │Newsletter│     │8│  │  30%     │  13%   │  13%   │  13%   │  30%     │     │9│  └──────────┴────────┴────────┴────────┴──────────┘     │10│                                                         │11├─────────────────────────────────────────────────────────┤12│  Social icons row          Country / Language selectors │13├─────────────────────────────────────────────────────────┤14│  (C) 2026 Store Name       Secondary links │ Payment   │15├─────────────────────────────────────────────────────────┤16│  LOGO (if position = Middle)                            │17├─────────────────────────────────────────────────────────┤18│  Bottom social icons row (centered)                     │19├─────────────────────────────────────────────────────────┤20│  Popular Links                                          │21│  Category 1                                             │22│  Link A | Link B | Link C | Link D                      │23│  Category 2                                             │24│  Link E | Link F | Link G                               │25├─────────────────────────────────────────────────────────┤26│  LOGO (if position = Bottom)                            │27└─────────────────────────────────────────────────────────┘

8. Tips & Best Practices#

• Column widths should roughly add up to ~100%. For example: 30% (Contact) + 13% + 13% + 13% (Links) + 30% (Newsletter) = 99%. Blocks that exceed 100% total will wrap to the next row.
• Use collapsible on mobile for all blocks. This keeps the mobile footer clean — shoppers tap to expand only the section they need.
• Upload both light and dark logos if your store uses the dark mode toggle. This ensures the logo is always readable.
• Social media links are set globally, not in the footer. Go to Theme settings → Social media to add your Instagram, Facebook, TikTok, and other profiles. The footer just toggles whether to show them.
• Create dedicated menus in Online Store → Navigation for your footer columns. Don't reuse your main header menu — footer links should be different (policy pages, support, secondary collections).
• Popular links use a two-level menu. The top-level items become bold category headings; their children become the pipe-separated links underneath. This is great for SEO-friendly internal linking.
• Don't forget the secondary links menu for your legal/policy pages — shoppers expect to find Terms and Privacy in the footer.
• Test both light and dark mode after setting your footer colors to make sure everything is readable.

9. Common Questions & Troubleshooting#

Q: My social icons aren't showing in the footer. Make sure Show social icons (and/or Show bottom social) is turned on in the footer's section settings. Then check that you've actually added your social media URLs in Theme settings → Social media. The footer only shows icons for platforms that have a URL entered.

Q: My payment icons aren't showing. Make sure Show payment icons is on. The icons are pulled from your store's payment settings — if you haven't set up any payment providers yet, there won't be any icons to show.

Q: The country or language selector is empty or missing. You need to set up Shopify Markets (for countries/currencies) and/or translations (for languages) first. Without these configured, the selectors have nothing to display.

Q: My columns look weird on desktop — one is too wide or they wrap. Check the Width percentage on each block. They should roughly add up to 100%. If they total more than 100%, extra blocks will wrap to a new row.

Q: A setting I expected isn't showing. Many settings only appear when related options are enabled. For example, Logo size only appears when Logo width is set to "Fixed"; Solid input colors only appear when Input style is "Solid"; Button settings only appear when Input style is "Button". Check the related toggle above the missing setting.

Q: The footer looks different on my phone vs. my computer. This is by design. On mobile, blocks stack vertically and can collapse into accordions. On desktop, blocks sit side by side as columns. You can control whether each block is collapsible and whether it starts open or closed.

Q: How do I change which social media icons appear? Social icons are configured globally in Theme settings → Social media, not in the footer section. Add or remove platform URLs there, and the footer icons update automatically.

Q: My popular links aren't showing. Check three things: (1) Show popular links is on, (2) you've selected a menu in the Menu field, and (3) that menu has at least one top-level item with child links. Empty menus won't display anything.

Q: The newsletter form success/error messages are hard to read. Customize the Message colors in the Newsletter block settings. Set distinct success (typically green) and error (typically red) colors for both light and dark mode.

10. Summary#

The Footer is the foundation of your store's bottom section, appearing on every page. You can:

• Build a multi-column layout using five block types — Contact, Links, Text, Newsletter, and Image,
• Set each column's width for a custom layout that adds up to ~100%,
• Show your logo at the top, middle, or bottom of the footer,
• Display social media icons in two independent rows,
• Add a newsletter signup with customizable form styles and colors,
• Show payment icons, country/language selectors, and secondary policy links in the bottom bar,
• Include a popular links section with categorized, SEO-friendly link groups,
• Collapse blocks into mobile accordions for a tidy phone experience,
• And fully control colors and spacing for both light and dark mode.

Set up your navigation menus first, configure your social media links in Theme settings, and then arrange your footer blocks into columns. A well-organized footer makes your store feel complete and trustworthy.