Header and footer

The header and the footer appear on every page of your store. In the theme editor they sit at the top and bottom of the sidebar as two section groups, Header and Footer. Anything you change there changes on every page at once.

What the header and footer groups hold

To move a section inside a group, drag it by the handle next to its name in the sidebar. To hide a section without deleting its settings, select the eye icon next to its name.

Announcement bar

A slim bar above the header for short news, such as a shipping cutoff or a store event. Each message is an Announcement block. A bar holds up to 5 announcements.

Each Announcement block has:

• Text: the message, 100 characters max.
• Link: where the message leads. Optional.
• Link label: a short link shown after the text, such as "Learn more". Shows once you add a link. Leave it empty to link the whole text.

With two or more announcements, the bar shows arrows to move between them. An announcement without text is not shown. A bar without any announcement is not shown in your store; in the theme editor it shows the hint "Add an announcement block to show this bar."

To put the bar below the header, drag Announcement bar under Header in the sidebar.

Header

The header is a raised panel with your logo, the main menu, a Contents button, search, the customer account and the cart with its total. The logo and its width are set in theme settings, under Logo and favicon. See Theme settings.

Header settings

You edit the menus themselves in your Shopify admin, under Content > Menus.

How the main menu shows on wide screens

On a computer, the top-level items of your main menu sit in one row next to the logo.

• An item with sub-items shows a small arrow. Selecting it opens Contents at that item.
• An item without sub-items is a plain link.
• If the row runs out of room, the items that do not fit are left out of the row. They are still in Contents, so nothing becomes unreachable.

On tablets and phones, below 990px wide, the row is replaced by a Contents button and a search button on one side of the logo, and the account and cart on the other.

Contents

Contents opens your whole main menu at once. On screens 990px and wider it opens a panel under the header with one column per menu level: select an item in the first column and its sub-items open in the next. When the open item has Menu promo blocks, they appear in a last column; an item without promos shows no promo column. On tablets and phones, below 990px wide, Contents opens a side panel that shows one level at a time, with the path back at the top. Its bottom rows show:

• your Menu promo for the open item, one at a time,
• Sign in or Account, when customer accounts are turned on,
• the country or region and the language selectors, when your store sells in two or more countries or regions or is published in two or more languages.

When the Contents button shows:

• On a computer, if your main menu has sub-items or the header has a Menu promo block, the button is always there.
• On a computer, if your main menu has a single level and no promos, the row already shows every item, so the button is hidden while all items fit. It comes back as soon as one item no longer fits in the row.
• On tablets and phones, and in the sticky bar described below, the button is always there, because the header row does not show menu items there.

If Main menu has no links, the header shows no Contents button in your store. In the theme editor, Contents shows the hint "Choose a menu in the section settings to fill Contents."

Menu promo blocks

A Menu promo shows a product or an image next to the sub-items of one top-level menu item, inside Contents. Each item shows up to 2 promos in the wide panel and 1 in the side panel on tablets and phones. The header holds up to 24 blocks.

To add a promo:

1. In the sidebar, under Header, select Add block, then Menu promo.
2. In Menu item, enter the name of a top-level menu item that has sub-items, written as it appears in the menu.
3. Choose a Product. The promo shows the product's image, title and price, and links to the product.
4. Or, instead of a product, add an Image, a Heading and a Link. These settings show only while Product is empty.

A promo whose Menu item does not match a top-level item with sub-items is hidden. In the theme editor, Contents then shows the hint "This promo is hidden until Menu item matches a top-level item with sub-items in your menu." A promo without a product or an image shows a placeholder image.

Customer account

When customer accounts are turned on in your Shopify admin, under Settings > Customer accounts, the header shows an account button. Signed-out customers see a person icon that lets them sign in. Signed-in customers see their avatar, which opens Shopify's account menu with the links from Customer account menu. When customer accounts are turned off, the button is not shown.

Search and cart

The search button opens search suggestions as the customer types. Before they type, search shows your Popular links. Once something is in the cart, the cart button shows the number of items and, on screens 990px and wider, the cart total. Whether the cart opens as a side panel or a page is set by Cart type in theme settings. See Cart.

Sticky header

Whether the header follows the customer down the page is set in theme settings, under Header behavior > Sticky header.

The contextual bar shows:

• Product page: the product name, the chosen variant, its price and Add to cart. On phones, below 750px wide, the bar sits at the bottom of the screen and appears only after the product's own buy buttons scroll out of view.
• Collection page: the collection name and a Filter button with the number of filters in use, when the collection has filters.
• Blog post: the post title, the reading time and a reading progress line.
• Cart page: "Your cart", the number of items, the subtotal and Check out. The bar is not shown while the cart is empty.
• Regular pages: the page title.

The bar also holds the Contents, search and cart buttons, so customers can move around without scrolling back up. On the cart page it holds only Contents.

Footer

The footer has up to four columns at the top, an optional email signup form beside them, a bottom bar with selectors and icons, and a line with the copyright and your policy links. Behind it, in large letters, stands a background word.

Footer blocks

The footer holds up to 5 blocks and shows the first four columns. Menu, Text and Custom Liquid blocks are columns; Email signup is not. An empty column, such as a menu without links or a text block without heading and text, is not shown in your store and does not take one of the four places. In the theme editor it shows a short hint in its place. If you add more than four filled columns, the editor shows "The footer shows the first four columns. Remove a column to show another."

After you install Loco, the footer group also has an Email signup section above the footer. If you add the Email signup block to the footer, remove that section so the form appears once. Subscribers from either form appear in your Shopify admin, under Customers, with the tag newsletter.

Bottom bar

Social media icons: Loco shows icons for Facebook, Instagram, X, TikTok, Pinterest, YouTube, Snapchat, Tumblr, Vimeo, Threads and LinkedIn, in that order. A network shows only after you add its link. Each icon opens in a new window.

Country and language selectors: you add countries, regions and currencies in your Shopify admin, under Settings > Markets, and languages under Settings > Languages. Until your store has more than one, the selectors are not shown even when the settings are on. See Languages, translations and right-to-left.

Appearance

What the footer adds on its own

• A copyright line with the current year and your store name, and the "Powered by Shopify" link.
• Links to the policies you fill in, in your Shopify admin, under Settings > Policies.

Loco also adds a Back to top button in the lower corner of every page, even without the footer. It appears after the customer scrolls two screens down.