Header and footer

This page covers what shows on every page of your store: the announcement bar and the header at the top, the footer at the bottom, and the Popups group for apps. It also explains how a menu becomes dropdowns, a mega menu and the menu sheet on phones.

Where these settings are

Go to Online Store > Themes > Customize. Besides the sections of the page you are viewing, the sidebar lists three groups: Header, Footer and Popups. A change in a group applies to every page. The password page and the gift card page are the exceptions: they show none of the three groups.

The Header group holds the Announcement bar and the Header. You can also add the Apps and Custom Liquid sections to it. The Header can be in its group once, and so can the Footer; if you remove one, add it back with Add section.

Announcement bar

A slim bar above the header. Each message is an Announcement block; the bar takes up to 10.

1. Select Announcement bar, then Add block.
2. Enter the Text. You can make words bold or italic, or link a few words.
3. To make the whole message a link, set Link. If the text already has a link of its own, that link is kept and Link is ignored.

Style has two choices:

• Rotate shows one announcement at a time, with previous and next arrows. Change every sets how long each one stays (3 to 10 seconds).
• Ticker runs all announcements as one continuous line. Its speed is fixed, so Change every does not apply. It runs with a single announcement too: the theme repeats the messages until the line fills the bar.

Whenever the bar moves by itself, a "Pause" control shows at the end of it: in Rotate with two or more announcements, and always in Ticker. The bar also pauses while a customer points at it or moves to it with the keyboard. For customers who ask their device for reduced motion, a rotating bar starts paused and a ticker stays still. The bar does not play in the theme editor either: select an announcement block to see that message.

To remove the bar, hide the section or delete all its blocks. See all Announcement bar settings.

Header

The header is a rounded bar that floats a little inside the edges of the screen. It holds the logo, the menu and, at the end, the country and language button, search, the account button and the cart. Header inset, in Theme settings > Shape and surfaces, sets the space above the bar; at the sides, the bar lines up with the page margin. App blocks and Custom Liquid blocks that you add to the Header section show under the bar. See all Header settings.

Logo

Add the logo in Theme settings > Logo and favicon. Logo width applies on desktop and Logo width on mobile on screens narrower than 990 px. Without a logo, the header shows your store name as text; a long name is set smaller and wraps onto up to three lines.

The logo is as wide as the width you set allows and never taller than 48 px, so a wide logo works best. A square or tall logo shows narrower than the width you set.

Logo position places the logo at the Start of the bar or in the Center. With Center, the menu moves to the start of the bar on desktop.

Sticky header

Sticky behavior has three choices:

• Off: the header scrolls away with the page.
• Always: the header stays at the top of the screen.
• On scroll up: the header hides while the customer scrolls down and comes back when they scroll up. It stays in place while a menu is open.

Transparent header

With Enable transparency over the first section on, the header loses its background and sits over the first section of the page, with white text and icons. This happens only when the first section is a Slideshow, an Image banner or a Video hero. On every other page the header keeps its normal look. It also returns to its normal look when the customer scrolls or opens a menu.

A dark logo is hard to read over a photo. Add a light version as Logo for transparent header in Theme settings > Logo and favicon; it replaces the logo only while the header is transparent. Choose a first image that is dark enough at the top for white text.

Colors

Under Colors, Color scheme colors the bar. Menu color scheme colors the dropdown panels, the menu sheet, the search sheet and the country and language dialog.

Menus

The header shows the menu chosen in its Menu setting. The default is your store's main menu. You create and edit menus in Content > Menus in the Shopify admin. On desktop, a menu with more items, or longer ones, than fit on one row wraps onto further rows inside the bar.

How nested links show on desktop

The header reads three levels of links: the top-level items, the items nested under them, and the items nested under those.

• A top-level item with nothing nested under it is a plain link.
• A top-level item with nested items opens a panel as wide as the header. It opens when a customer points at it with a mouse, clicks it or presses Enter. One panel is open at a time, and the Escape key or a click outside closes it.

What the panel shows depends on how deep the menu goes:

• With two levels, the panel is a link list with a preview. It lists the nested items under the name of the top-level item. Items that link to a collection show the number of products, and the panel shows that collection's image as the customer points at each one. If the top-level item has a link of its own, a "View all" link to it, such as "View all Women", shows under the list.
• With three levels, the panel is a mega menu with columns. This happens as soon as one nested item has items of its own. Each second-level item is a column heading and its third-level items are listed under it. This layout has no product counts and no preview image. The top-level item itself only opens the panel, so when it has a link of its own, the same "View all" link shows under the columns.

Show product counts turns the counts on or off. The preview uses the collection's image, or the photo of its first product when the collection has no image.

Set up a mega menu

1. In the Shopify admin, go to Content > Menus and open the menu the header uses.
2. Add the items for one dropdown and drag them under the top-level item to nest them.
3. To get columns, drag a third level of items under each of those nested items.
4. Save the menu, then reload the theme editor.

Add promotions to a menu panel

A Menu promo block adds an image, a collection or a product at the end of one panel.

1. Select Header, then Add block and choose Menu promo.
2. In Menu item, type the name of the top-level menu item, as it is written in the menu. Capital letters do not matter.
3. Choose the Type:
   • Image uses Image, with an optional Heading and Link.
   • Collection uses Collection. It shows the collection's image and links to it. Heading replaces the collection's title.
   • Product uses Product and shows a small product card.

The Collection and Product pickers are always visible; the theme uses only the one that matches Type. A promo shows only when its menu item has a dropdown, and only on desktop. Several promos can name the same menu item; they stack in one column. Selecting a promo block in the editor opens its panel so you can check it.

The menu on phones and tablets

On screens narrower than 990 px, the menu button opens the menu sheet. An item with nested links opens a new level with a back button, down to the third level. Each level ends with a "View all" link when its parent item has a link of its own. With Show product counts on, second-level links to collections show their counts.

Under the top-level items, the sheet shows up to six round collection images. The theme takes them from the second-level items that link to a collection with an image. The bottom of the sheet holds the sign-in link and the country and language button.

Search

The search icon opens a sheet at the top of the screen.

• Before the customer types, the sheet shows popular searches as chips, if you set a menu for them.
• While the customer types, the sheet suggests search terms, products, collections, pages and blog posts, up to four of each, with a button that opens the full results.

The settings are in Theme settings > Search behavior. Enable search suggestions turns the suggestions on or off; when it is off, pressing Enter opens the search results page. Show vendor and Show price add those details to suggested products.

To set up popular searches:

1. In Content > Menus, create a menu and add one item for each chip. The item's name is the text on the chip, and its link can go to a collection, a product, a page or a search you ran on your store.
2. In Theme settings > Search behavior, choose that menu as Popular searches menu.

The same chips show on the 404 page. For the results page, see Collection pages and search.

Account button

The account button shows when customer accounts are turned on for your store. It is Shopify's own account component: visitors use it to sign in, and signed-in customers get a menu of account links. That menu is the one Shopify names "Customer account main menu" in Content > Menus; the header's Menu setting does not change it. On phones and tablets, the menu sheet also has a sign-in link. See Customer accounts.

Country and language selector

Show country/region selector and Show language selector add a button to the header. It shows the currency code, for example USD, or the language code when the country selector is off. It opens a dialog with the two lists and an "Update" button; nothing changes until the customer presses it.

The button shows only when there is a choice to make: more than one country or region in Settings > Markets, or more than one published language in Settings > Languages. On screens narrower than 990 px it moves to the bottom of the menu sheet. See Languages and markets.

Cart button

The cart button shows the number of items in the cart, up to "99+". It opens the cart drawer when Cart type in Theme settings > Cart is Drawer, and goes to the cart page otherwise. See Cart.

Footer

The footer is one rounded card. Its Color scheme setting, at the end of the section's settings, colors the whole card. See all Footer settings.

Footer blocks

The top of the footer holds blocks that you add, remove and reorder:

• Email signup: a heading, text and an email field. A customer who signs up is added to your customers in Shopify as an email subscriber, with the tag newsletter. No app is needed. Show consent text adds a line about marketing emails under the field.
• Menu: a list of links with a heading. Heading replaces the menu's name. It shows the first level of the menu only, so add one Menu block for each column of links.
• Text, Image and Custom Liquid: free content, such as an address, a badge or a snippet.
• App blocks.

On desktop the blocks sit side by side, and the email signup is wider than the others. On phones, menus sit two to a row and the other blocks take the full width. See Blocks for each block's settings.

Social links and Follow on Shop

Show social media icons adds a row of icons for the accounts you enter in Theme settings > Social media: Instagram, TikTok, Facebook, Pinterest, YouTube, X, Threads, Snapchat, Tumblr and Vimeo. Enter the full address of each profile, starting with https://. The fields start empty, and an empty field shows no icon.

Show Follow on Shop adds Shopify's Follow on Shop button. It shows only when your store offers it, which requires Shop Pay.

Country and language selectors

Show country/region selector and Show language selector add the two lists to the bottom of the footer. They follow the same rule as the header: a list shows only when there is more than one choice. An "Update" button appears once the customer changes a selection.

Payment icons, policies and the Shopify link

• Show payment icons shows an icon for each payment method your store accepts.
• Show policy links lists the policies you added in Settings > Policies.
• The copyright line, with the year and your store name, always shows.
• The "Powered by Shopify" link always shows. The theme has no setting for it, because the text comes from Shopify; Shopify's help center explains how to edit it.

More sections in the footer group

You can add other sections to the Footer group, above or below the footer, and they show on every page: Apps, Collapsible content, Columns, Custom Liquid, Image with text, Logo list, Map, Newsletter, Rich text and Testimonials. See Sections.

Popups group

The Popups group is empty when you install the theme. It loads at the very end of every page and accepts two sections: Apps and Custom Liquid. Use it for an app block that must be on every page without belonging to the header or the footer, such as a popup from an app. The theme does not include a popup section of its own.