Skip to main content
The footer section appears at the bottom of every page and provides navigation, brand information, newsletter signup, social links, and legal content. Once configured, it creates a consistent footer experience across your entire store with flexible block-based layout options. A well-designed footer helps customers find important information, subscribe to updates, and connect with your brand across platforms.

​
What this section controls

This section controls the layout, content, and appearance of the footer, including brand blocks, navigation menus, newsletter forms, social media links, payment icons, and custom content blocks.

​
Getting started

1

Open Theme Customizer

From your Shopify admin, go to Online Store → Themes → Customize.
2

Locate footer section

Scroll to the bottom of any page or select Footer from the sections list in the sidebar.
3

Add blocks

Click Add block to add footer elements like menus, brand info, or newsletter forms.
4

Configure layout

Adjust column and row factors to control block sizing and positioning within the 6-column grid.

​
Section settings

​
Section width

Controls how wide the footer content appears on the page.
Content width matches the global page width setting with standard side margins. Creates alignment with your main content.
Content extends with minimal side margins for an edge-to-edge appearance. Provides maximum horizontal space for footer blocks.
Use Page width to align with your main content, or Fluid for edge-to-edge footer designs.

​
Spacing grid

Controls the space between footer blocks in the grid layout.Available options: No, S, M (default), L, XL
Medium (M) spacing provides balanced separation between blocks without excessive gaps.

​
Block types

The footer uses a flexible block-based system. Add, remove, and arrange blocks to create your ideal footer layout.

​
Brand block

Displays your brand logo and description text. Only one brand block can be added.
Logo: Upload a PNG or JPG logo via the image picker.SVG code: Paste raw SVG code for vector logo. If provided, this overrides the uploaded image and allows perfect scaling at any size.Logo width: Set maximum logo width on desktop (default: 240px).Logo width mobile: Set maximum logo width on mobile (default: 150px).
Text: Add brand description text below the logo. Supports rich text formatting.Default: “Share contact information, store details, and brand content with your customers.”
Column factor: Controls horizontal space (1-6 columns).Row factor: Controls vertical space (1-6 rows).Content position vertical: Aligns content within the grid cell (start, center, end).Content alignment: Horizontal text alignment (start, center, end).Content alignment for mobile: Separate mobile text alignment.
We recommend using column factor 2 for brand blocks to give them appropriate prominence in the footer layout.

​
Rich text block

Custom HTML/text content, commonly used for copyright notices and legal disclaimers. You can add up to 2 rich text blocks.
Heading: Optional heading above the content.Text: Content text with rich text formatting support.Special feature: Type [year] and it automatically displays the current year.
Copyright ©[year] DigiFist. All rights reserved.
Renders as:
Copyright ©2026 DigiFist. All rights reserved.
Column factor: Controls horizontal space (1-6 columns).Row factor: Controls vertical space (1-6 rows).Content position vertical: Vertical alignment (start, center, end).Content alignment: Horizontal alignment (start, center, end).Content alignment for mobile: Separate mobile alignment.

​
Grid layout system

The footer uses a 6-column grid system. Each block can span 1-6 columns (column factor) and 1-6 rows (row factor) to create flexible, responsive layouts.

​
Column factor (1-6)

Controls how much horizontal space a block occupies:
Takes 1/6 of row width (narrowest). Ideal for compact elements like social icons or single menu columns.
Takes 1/3 of row width. Good for brand blocks, primary menus, or newsletter forms.
Takes 1/2 of row width (half). Suitable for prominent content or wide menus.
Takes 2/3 of row width. Use for featured content or multi-column menus.
Takes 5/6 of row width. Rarely used, for specific asymmetric layouts.
Takes full width. Perfect for copyright notices, disclaimers, or content that spans the entire footer.

​
Best practices

  • Brand first: Place brand block in the first column for immediate recognition
  • Menus in the middle: Use 2-4 menu blocks for organized navigation categories
  • Utilities last: Position newsletter, social, and localization in final columns
  • Bottom row for legal: Copyright and payment icons typically span the full width in a second row
  • Distribute blocks evenly across the 6-column grid
  • Typical patterns: 1+1+1+1+2 = 6, or 2+2+2 = 6
  • Avoid having too many narrow blocks (all 1-column)
  • Use column factors strategically for visual hierarchy
  • Enable top border to create clear separation from page content
  • Use a contrasting color scheme (often inverse or darker) for the footer
  • Maintain consistent spacing between blocks (Medium spacing recommended)
  • Match footer spacing with overall site rhythm
  • Set important menus to show expanded on mobile
  • Use content_alignment_for_mobile for better mobile layouts
  • Consider spacer blocks with show_on: mobile for mobile-specific adjustments
  • Keep mobile logo width reasonable (150px default works well)
  • Keep menu link text concise and descriptive
  • Use clear newsletter heading with value proposition
  • Update copyright with [year] tag for automatic updates
  • Ensure social links are configured in Theme Settings
  • Use SVG logos when possible for faster loading and better scaling
  • Limit the number of custom Liquid blocks to reduce complexity
  • Test footer load impact with browser developer tools
  • Avoid embedding heavy third-party scripts via custom Liquid unless necessary
  • Create menus in Shopify admin → Navigation before adding link list blocks
  • Configure Shopify Markets for country/language selectors
  • Set up social media URLs in Theme Settings → Social Media
  • Enable Shop Pay for “Follow on Shop” functionality
  • Configure payment methods in Shopify Settings → Payments for payment icons
  • Header - Configure the header navigation and layout
  • Social media - Set up social media profile links
  • Colors - Define color schemes for the footer
  • Navigation - Create and manage Shopify menus