Appearance

Footer ​

This guide describes setting up the Footer section.

Use the section to provide visitors with a secondary navigation menu. The Footer section typically displays at the bottom of your store's pages.

​An example Footer section on a store's todo page.

​The previous image shows a Footer section at the bottom of a store's Homepage.

For general guidance with modifying sections, refer to Sections overview, and Shopify help: Sections and blocks.

To set up a Footer section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select the Homepage template.

    Note

    The section is accessible from all page templates, excluding the Checkout, Password and Gift card pages. By default, Theme editor displays the section in a page's Footer area.

  2. From the side menu, select Footer.

    The Footer section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
Language selector > Language settingsTo add a language, follow the language settings link to the Store languages area of your store's Admin page. Refer to Shopify help: Localization and translation.
Language selector > Show language selectorFor stores that support multiple languages, use the Show language selector checkbox to show/hide a language selector inside the section. The language selector allows visitors to switch between different language versions of your store.
Country/ region selector > Payment settingsTo add a country, region or currency, follow the payment settings link to the Payments area of your store's Admin page. Refer to Shopify help: Payments.
Country/ region selector > Show country/ region selectorFor stores that support multiple countries or regions, select the checkbox Show country/ region selector to show/hide a region selector inside the section. The region selector allows visitors to switch between your store's supported regions and currencies.
Payment methods > Show payment iconsSelect the Show payment icons checkbox to show/hide payment icons inside the section. Payment icons represent your store's acceptable payment methods.
Payment methods > Grayscale payment iconsSelect the Grayscale payment icons checkbox to turn Gray scale mode on/off for icons inside the section. Gray scale mode displays icons using shades of gray.
Policy links > Policy settingsTo add store policies, like Refund and Data privacy policies, follow the policy settings link to the Policies area of your store's Admin page. Refer to Shopify help: Adding store policies.
Policy links > Show policy linksSelect the Show policy links checkbox to show/hide links inside the section to your saved store policies. Refer to Shopify help: Adding store policies.
Color > Color schemeUse the Change dropdown to set the section's color scheme to Scheme 1 or Scheme 2. Select Edit to configure the section's current color scheme. Refer to Colors.
Color > Theme settings (link)Follow the Theme settings link to access the Theme settings > Colors menu in Theme editor.
Spacing > AboveMove the Above slider to adjust the amount of empty or "white" space displayed above the section. The slider ranges from 0x (times) to 2x.
Spacing > BelowMove the Below slider to adjust the amount of empty or "white" space displayed below the section. The slider ranges from 0x (times) to 2x.
Theme editor > Show layout grid guidelinesSelect the checkbox Show layout grid guidelines to show/hide grid guidelines in Theme editor. The grid lines can help you customize the section's layout.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS.

A default Footer section contains no blocks. To configure a block inside the section:

  1. Go to Customize theme.

    At the top of the page, use the dropdown to select the Homepage template.

  2. From the side menu, expand the Footer section menu.

  3. To configure an existing block, select the block from the side menu.

    To add a new block, select Add block, choose a block to add, and then select the block you added.

    The Footer's Add block menu in Theme editor.

    Note

    Inside the section, you can add, remove, show/ hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.

  4. Apply a block setting described in the Table: Footer blocks.

The following table describes the blocks inside the Footer section, and their corresponding settings.

To configure a block, refer to Configure a block within a Footer section.

Block nameBlock descriptionBlock setting(s)
MenuDisplay a navigation menu inside the section.
  • Use the Menu selector options to set up a menu inside the block. Refer to Set up a Footer menu block.
  • Select the Layout radio buttons to set a layout style for the block's content to Horizontal or Vertical.
  • Select the Desktop text alignment dropdown to position the block's text content to the Left, Center or Right. Alternatively, select Justify to align lines of text inside the block to the block's edges (Justified). To use the setting, set the Display radio button option to Horizontal. This setting applies to desktop display devices.
  • Select the Show menu heading checkbox to show/hide the menu's heading (title) text inside the block.
  • Select the checkbox Separate menu items with a comma to show/hide a comma as a separator for menu items inside the block.
  • Select the dropdown Layout > Block width on desktop to set the block's width. This setting applies to desktop display devices. The options are:
    • One sixth (1/6)
    • One quarter (1/4)
    • One third (1/3)
    • Five twelfths (5/12)
    • One half (1/2)
  • Select Remove block to delete the block from the section.
Rich textDisplay an area containing formatted text inside the section.
  • In the Heading box, enter text to display as a title inside the block.
  • In the Paragraph box, enter body text to display inside the block. Format the text and add links using the Text editor pane.
  • To display text from a dynamic source, select the Insert dynamic source icon, beside the Paragraph box, and then choose a metafield to add. Refer to Shopify help: Metafields.
  • Select the Text alignment dropdown to position text inside the block to the Left, Center, or Right.
  • Select the dropdown Layout > Block width on desktop to set the block's width. This setting applies to desktop display devices. The options are:
    • One sixth (1/6)
    • One quarter (1/4)
    • One third (1/3)
    • Five twelfths (5/12)
    • One half (1/2)
  • Select Remove block to delete the block from the section.
NewsletterDisplay a newsletter sign-up form inside the section. Refer to Shopify help: Add a newsletter signup.
  • In the Text box, enter text to display as body text inside the block. Format the text and add links using the Text editor pane.
  • To display body text from a dynamic source, select the Insert dynamic source icon, beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields.
  • Use the Layout > Block width on desktop options to select One sixth (1/6), One quater (1/4), One third (1/3), Five twelfths (1/12), or One half (1/2). This option specifies a width for the block on desktop display devices.
  • Select Remove block to delete the block from the section.
Social mediaDisplay links to your store's social media inside the section.
  • In the Heading box, enter text to display as a title inside the block.
  • Select the Display as radio buttons to display links to your store's social media as Icons or Text.
  • Select the Text layout radio buttons to set a layout style for the block's text to Horizontal or Vertical.
  • Select the Text alignment dropdown to position text inside the block to the Left, Center, or Right.
  • Follow the link Follow on Shop > Learn more to open the article Shopify help: Add Follow on Shop to your store. The article describes how to add the "Follow on Shop" feature to your store.
  • Select the checkbox Follow on Shop > Enable Follow on Shop to turn on/off the "Follow on Shop" feature. With this feature enabled, store visitors can follow your store on the Shop app from your storefront. To use this setting, enable Shop Pay. Refer to Shopify help: Add Follow on Shop to your store.
  • Select the dropdown Layout > Block width on desktop to set the block's width. This setting applies to desktop display devices. The options are:
    • One sixth (1/6)
    • One quarter (1/4)
    • One third (1/3)
    • Five twelfths (5/12)
    • One half (1/2)
  • Select Remove block to delete the block from the section.
SpacerDisplay an area of empty space inside the section.
  • Select the dropdown Layout > Block width on desktop to set the block's width. This setting applies to desktop display devices. The options are:
    • One twelfth (1/12)
    • One sixth (1/6)
    • One quarter (1/4)
    • One third (1/3)
    • Five twelfths (5/12)
    • One half (1/2)
  • Select Remove block to delete the block from the section.

To set up a menu inside a menu block, apply the following settings in Footer > Menu (block).

  • If the block has no menu, to select a menu, choose Select menu. Enter the name of a menu into the Search box, or pick a menu from the list, and then choose Select.

  • To edit the current menu, select the Menu link. The link opens the Navigation menu editor in Shopify admin. Use the editor to modify the menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

  • To create a new menu, select Change > Change menu, and then follow the Create menu link. The link opens the Navigation > Add menu page in Shopify admin. Use the menu editor to create a new menu, and then the select the new menu. Refer to Shopify help: Add, remove, or edit menu items in your online store.

    The menu modification options in Theme editor for the Footer section

  • To replace the current menu, select Change > Change menu. Enter the name of the replacement menu into the Search box, or pick a replacement menu from the list, and then choose Select.

  • To delete the current menu, select Change > Remove menu.