> ## Documentation Index > Fetch the complete documentation index at: https://docs.digifist.com/llms.txt > Use this file to discover all available pages before exploring further. # Footer > Build the Olympus footer from Text column, Menu, Newsletter, Logo group, and Spacer blocks, with a bottom bar for copyright, payment icons, and the country and language selector The Footer closes every page with your brand statement, supporting menus, a newsletter signup, and the practical details customers look for last: payment methods, policies, and the country and language selector. In Olympus the footer is a grid, and each block you add spans a number of columns, so you can arrange a wide brand column next to narrow menus without touching code. Because the footer appears on every page, a clear structure here pays off across the whole store. ![Olympus footer with a text column, two menus, a newsletter block, and a bottom bar](https://mintcdn.com/digifist/RgyQeNZ9h8ZpSeAW/images/theme/olympus/footer/footer-overview.png?fit=max\&auto=format\&n=RgyQeNZ9h8ZpSeAW\&q=85\&s=e6d0f6b8c86b5e5250573e7d1b467f38) ## What this section controls * The footer grid: number of columns, spacing between them, and full-width or card container * Content blocks: Text column, Menu, Newsletter, Follow on Shop, Logo group, Spacer, and Image * Menu behavior on mobile, including collapsing menus into accordions * The bottom bar: copyright text, a secondary menu, payment icons, and the country and language selector * An optional background image with overlay, plus color scheme, width, spacing, and border ## Getting started **1. Open the Theme Customizer** From your Shopify admin, open Online Store, then Themes, and click Customize on Olympus. **2. Locate Footer** The Footer section is pre-added in the Footer group at the bottom of the left sidebar. **3. Arrange the blocks** Select a block to edit it, drag blocks to reorder them, or click Add block to add a menu, text column, or newsletter. **4. Set the column spans** Give each block a Column span so the spans add up to the Grid columns value for a full row. ![Footer section and its blocks in the Theme Customizer](https://mintcdn.com/digifist/RgyQeNZ9h8ZpSeAW/images/theme/olympus/footer/footer-location.png?fit=max\&auto=format\&n=RgyQeNZ9h8ZpSeAW\&q=85\&s=4ef9fb88621ab354035b915e602fba2e) ## Section settings ### Layout The footer lays its blocks out on a grid. Each block has a Column span that says how many grid columns it covers on desktop; blocks that do not fit the remaining space wrap to a new row, and on mobile every block stacks in a single column. The preset uses 6 columns: a Text column spanning 2, two Menus spanning 1 each, and a Newsletter spanning 2, which fills one row exactly. > **Container** > > * **Full width**: the footer background runs edge to edge. Default. > * **Card**: the footer sits inside a rounded card inset from the screen edges, using the corner style from Theme settings. Works well when the footer's color scheme differs from the page background. > **Grid columns** > > The number of columns block spans are measured against: 4 to 12. Default: 6. More columns give finer control over widths; fewer columns keep the arithmetic simple. > **Column spacing** > > The gap between blocks: 8 to 96 pixels in steps of 4. Default: 24. Larger values separate a newsletter from the menus more clearly. > **Show arrows on links** > > Adds a small arrow after each link in Menu blocks. Off by default. > **Collapse menus on mobile** > > On by default. Collapsing applies on mobile only: below 750 pixels wide the Menu blocks become expandable headings, with the first menu open and the rest closed, so a long footer stays short. Above that width every menu is always fully expanded and the setting has no effect, so desktop visitors always see the complete link lists. ### Bottom bar The bottom bar is the final row of the footer and is always shown. > **Copyright text** > > Rich text shown at the start of the bottom bar. Write \[year] in square brackets to insert the current year automatically. Default: Copyright © \[year] DigiFist. All rights reserved. Powered by Shopify. > **Show divider above bottom bar** > > Draws a hairline between the block grid and the bottom bar. Off by default. > **Bottom bar menu** > > A Shopify menu of short links, typically policies. Default: the Footer menu. Menus are created under Online Store, then Navigation. > **Show payment icons** > > Displays the payment methods enabled in your Shopify payment settings. On by default. Icons are managed by Shopify and update when you add a payment provider. > **Country and language selector** > > * **Show country and language selector**: shows a selector when your store has more than one market or language. To add a country or language, go to your markets settings. On by default. > * **Selector border**: None or Hairline. Default: None. > * **Selector corners**: Pill, Theme corners, or Square. Default: Pill. ### Media An optional image behind the whole footer. * **Image**: the background image, cropped to fill the footer. * **Mobile image**: a separate image for phones. Falls back to the main image if left empty. * **Image overlay opacity**: 0 to 100 percent of the color scheme's background color laid over the image, so text stays readable. Default: 0. Both appear once an image is selected. > [!TIP] > > With a background image, set the Newsletter block's Field and selector style to Contrast so the input stands out against the photo. ### Colors **Color scheme**: the footer's background, text, and border colors. Default: Scheme 1. Blocks inherit it unless they define their own, as the Newsletter block can. ### Common settings > **Width** > > Page, Narrow, Narrower, Fluid, or Full width. Default: Page. The background always spans the full footer; Width controls the content column. > **Top spacing and Bottom spacing** > > None, Extra small, Small, Medium, Large, or Extra large. Defaults: Medium on top and Extra small below, keeping the bottom bar close to the page end. > **Section border** > > None, Top, Bottom, or Top and bottom. Default: None. Top separates the footer from a last section that shares its color scheme. These controls behave the same on every section. See [Common settings](/themes/olympus/common-settings.md). ## Blocks Footer blocks are specific to the footer, except for Image, which is the shared theme block. Every block except Follow on Shop and Image has a **Column span** (1 to 6) that sets how many grid columns it covers on desktop. **Text column** A heading and a paragraph for your brand story, mission, or a short welcome. * **Heading**: optional title above the text. * **Heading size**: Extra small, Small, Body, or Heading 6 up to Heading 1. Default: Heading 5. * **Text**: rich text. Default: a short placeholder sentence about your brand. * **Text size**: the same scale as Heading size. Default: Body. * **Column span**: default 2. **Menu** A list of links from a Shopify menu, shown under a heading. Add one Menu block per column, for example Shop and Support. * **Menu**: the Shopify menu to display. Default: the Footer menu. * **Heading**: leave empty to use the menu's name. * **Column span**: default 1. Link arrows and mobile collapsing are controlled at the section level under Layout. **Newsletter** An email signup form connected to Shopify customer marketing. The block nests a Heading and a Text block above the form, so you edit its title and description like any other content, and it can show social media icons below. > **Form** > > * **Button label**: default Sign up. > * **Show button arrow**: adds an arrow icon to the button. Off by default. > * **Field and selector style**: Subtle or Contrast. Contrast suits dark color schemes and background images. Default: Subtle. > **Colors** > > * **Input color scheme**: turn on to pick a separate scheme for the email field. Off, the field keeps the footer's own colors. > * **Button color scheme**: turn on to pick a separate scheme for the button. Off, the button keeps the footer's own colors. > **Social media** > > * **Show social media icons**: off by default. > * Links for Facebook, Instagram, Twitter, TikTok, YouTube, Pinterest, LinkedIn, Vimeo, and Snapchat. Only filled-in links are shown, each as an icon. > **Nested blocks** > > The Newsletter accepts Heading and Text blocks. The preset includes a Heading (Join our newsletter) and a Text block. Their settings are described on the [Theme blocks](/themes/olympus/theme-blocks.md) page. * **Column span**: default 2. When the Newsletter is the first block in the footer, its content is capped to a comfortable reading width. > [!NOTE] > > Subscribers are added to your Shopify customer list with marketing consent. The success message reads Thanks for subscribing! **Follow on Shop** Shows Shopify's own Follow on Shop button, letting customers follow your store in the Shop app. The block has no settings and appears only when following is available for your store; otherwise it renders nothing. **Logo group** A small grid of partner, certification, or press logos. The group holds Logo blocks. **Logo group settings** * **Logos per row**: 2 to 4. Default: 3. * **Logo height**: 20 to 96 pixels. Default: 96. Logos scale to this height and keep their proportions. * **Column span**: default 2. **Logo block settings** * **Image**: the logo file. * **Brand name**: used for the logo's alternative text and link label. * **Link**: optional destination. The preset adds six empty Logo blocks; remove the ones you do not need. **Spacer and Image** **Spacer** is an empty block that occupies grid columns, letting you push the next block along or leave breathing room between groups. * **Column span**: default 1. * **Show on**: Both, Desktop, or Mobile. Default: Desktop, since spacers rarely make sense in a single stacked column. **Image** is the shared theme block with Image, Aspect ratio, and Image link settings. Use it for a badge, an award, or a small brand graphic. See [Theme blocks](/themes/olympus/theme-blocks.md). ## Best practices > **Make the spans add up** > > Plan spans so each row fills the grid exactly. Two menus at 1, a text column at 2, and a newsletter at 2 fill a 6-column grid. > **Keep menus short** > > Five to seven links per menu is easy to scan. Move policies to the Bottom bar menu instead of a third footer menu. > **Lead with the newsletter** > > If signups matter, place the Newsletter first. Its width is capped there so the form stays readable. > **Test with a background image** > > Raise Image overlay opacity until menu links pass a quick readability check, and switch the newsletter field to Contrast. > **Collapse menus on mobile** > > Leave Collapse menus on mobile enabled unless you have one short menu; a fully expanded footer can be longer than the page content on a phone. ## Related guides > **[Header](/themes/olympus/header/header.md)** > > Configure navigation, logo, and the country and language selector in the header. > **[Newsletter banner](/themes/olympus/sections/newsletter-banner.md)** > > A full section for email signups anywhere on a page. > **[Theme blocks](/themes/olympus/theme-blocks.md)** > > Settings for the Heading, Text, and Image blocks used inside the footer. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.