Footer layout settings

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

4. https://help.shopify.com/en/manual/online-store/themes/customizing-themes

5. https://help.shopify.com/en/manual/online-store/themes/features-list

6. https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes

Reference videos

1. Online store — The official Shopify guide

Overview

Footer layout settings provide essential controls for organizing and structuring the layout of your site's footer. These settings define how footer elements are arranged, spaced, and grouped, ensuring a visually cohesive experience across your entire shop. By adjusting these settings, you can tailor the base design of the footer to fit your shop's unique content and navigation requirements.

Footer layout settings are applied globally by default. This establishes a consistent footer structure for all pages, but these defaults can be selectively overridden at the section or block level for flexible, detailed customization.

⚠️ Important:Footer layout settings serve as the foundation for your site's footer organization. They combine strong baseline styling with the ability to fine-tune details at more granular levels, adapting to a wide variety of content and design needs.

Footer layout settings

Footer layout settings enable you to control the flow, grouping, and use of space within the footer area. Adjust these settings to achieve the arrangement that best aligns with your brand and usability goals.

Fill available space

Fill available space adjusts whether footer items expand to use all available horizontal space or remain grouped within their natural width.

1. When enabled, footer blocks distribute evenly and fill the width of their container, promoting a balanced and modern look.

   1. This is especially effective for edge-to-edge layouts or when you want to avoid content clustering to one side.

2. When disabled, footer elements stay at their default width, which may leave empty space at the sides and create a more compact or boxed layout.

3. The default state is disabled.

Enabling this setting can prevent uneven gaps, particularly on wider screens.

Show in new column

Show in new column determines if a footer item begins in a new vertical column, separating that item from other grouped elements.

1. With this setting enabled, the item starts its own column, clarifying the organization of different types of content within the footer.

   1. This can be used for content such as navigation links, store information, or newsletter forms to create clear separations.

2. When disabled, the content continues within the existing column, grouping similar elements together.

3. The default state is disabled.

Using columns can improve clarity, making it easier for users to scan and navigate footer information.

Show in new row

Show in new row controls whether a footer item is positioned on a new horizontal row beneath the current group of content.

1. Enabling this setting places the content on its own row, providing strong visual separation from previous items.

   1. This is useful for highlighting information such as disclaimers, badges, or secondary navigation beneath primary content.

2. When disabled, items remain on the same row unless screen constraints force a new line.

3. The default state is disabled.

Placing content in new rows helps highlight important details and can simplify footer navigation.

Usage notes

Footer layout settings define the structure for your entire site's footer but allow for selective adjustments when needed. Overriding defaults at the section or block level helps you meet specific design needs for different pages and devices.

1. Review footer layouts on multiple devices to evaluate the responsiveness and clarity of your arrangements.

2. You might consider different column or row configurations for mobile contexts, such as stacking content vertically or simplifying navigation for easier access on smaller screens.

3. Clear logical grouping of footer content enhances accessibility and helps visitors discover information quickly and efficiently.

4. Uniform use of space and well-separated content areas contribute to a professional and user-friendly footer.

💡 Tip: Thoughtfully combine fill, column, and row settings for a footer that feels clean, accessible, and visually organized across every screen size. Overriding defaults in specific contexts can provide the ideal mix of consistency and flexibility for all users.