Header and footer

The announcement bar, header layouts, menus with dropdowns and full-width panels, the search bar, language and country selectors, and the footer.

The header and footer are section groups: they are shared by every page and edited from any page in the theme editor. The Header group holds the announcement bar and the header; the Footer group holds the footer.

Announcement bar

A narrow bar above the header with short messages: delivery, returns, a sale. Add it with Add section in the Header group if your preset does not have one.

  • Add a Message block for each message. Style shows them one at a time (Messages take turns) or as a Scrolling ticker.
  • Count down to: a message can count down to a date and time in your store's time zone, written as 2026-12-24 18:00. The time left shows after the text, and the message hides itself when the time is up. Only with Messages take turns.
  • Text on the right: a short text shown on desktop next to the messages, for example a phone number.
  • Show a close button: lets shoppers close the bar. It stays closed for them until you change the messages.
Announcement bar – every setting and block explained

Layouts

Header › Layout arranges the header in one of three ways:

LayoutUsed byDescription
Logo left, search bar in the middleIndexThe catalog layout: logo, menu, a wide search bar and the account and cart links.
Logo centered, menu belowPosterThe logo in the middle with the menu on its own row below.
Menu left, logo centeredPetalA split header. Search opens from an icon.

On phones, the centered and split layouts put the logo in the middle of the row.

Logo and store name

The header uses the logo from Theme settings › Logo and favicon unless you upload a different one here. Show store name next to the logo adds the store name beside a logo image, in the text logo size.

Transparent header

Transparent header lays the header over a full-width Image banner, Slideshow or Video that opens the page – on the home page only or on every page, with light or dark text. The header turns solid when hovered, when a menu opens and when the page scrolls. Logo on the transparent header takes a second logo, for example a white one.

Sticky header keeps the header at the top of the screen Always, only On scroll up (it hides while scrolling down), or not at all.

Build the menu in Online Store › Navigation › Main menu, then pick it in Header › Menu.

  • Links with one level of sub-links open as a compact dropdown.
  • Links with two levels (for example Shop › Kitchen › Storage jars) open the full-width shop panel: one column per second-level link, with its sub-links underneath. Turn on Open every dropdown as the full-width panel to use the panel for every dropdown.
  • Images in full-width panels shows the image of each column's collection, product or blog post above it, as landscape, square or portrait.
  • Show product counts next to collection links adds a small product count after each collection link.
  • Show a shop all link in the panel adds a "Shop all: link title" link at the bottom of the panel, leading to the page of the top-level link.

Mobile menu

Switch to the mobile menu below sets the screen width under which the header shows the menu button and a drawer instead of the menu links: 640, 768, 990, 1024, 1280 or 1536 px, or Custom for any width. Use a larger value when your menu has many links. This width is also what Hide on mobile and Hide on desktop mean in every section.

The mobile menu shows the menu, the account link, the dark mode switch and the language and country selectors. Its colors come from Menu and search color scheme.

  • Search on desktop: a Search bar in the header or an Icon that opens the search.
  • Search bar width and Search results width: the results panel can be wider than the bar and always stays on screen.
  • Show the / key hint: shows a small / key in the bar. Pressing / anywhere in the store opens the search.
  • Show search bar below the header on mobile: puts the search field on its own row on phones.
  • Backdrop while searching: dims and/or blurs the page behind the open search.
  • Type popular searches in the placeholder: types the popular searches from Theme settings › Search in the empty field, one after the other.

Account and cart

Style shows the account and cart links as text ("Account", "Cart" with a count) or as icons. Show account and log in link hides the account link if you do not use customer accounts.

Language, country and dark mode

  • Show light and dark mode switch: the sun and moon switch. Dark mode must be on in Theme settings › Colors.
  • Show selectors next to the cart: shows the language and country selectors in the header when the store has more than one language or country.
  • Language: show the language as a name (English, Deutsch), a code (EN, CS), or hide it. Show flags adds a flag.
  • Show country and currency: adds the market selector to the header. The mobile menu and the footer always offer both.

Add languages in Settings › Languages and countries in Settings › Markets. See Languages and markets.

Header – every setting and block explained

Header blocks

Besides the menu from Online Store > Navigation, you can add blocks to the Header section to build menu items in the editor.

A single link next to the menu – plain, Highlighted or as a Button, with an optional icon and a badge such as New or −30%. The Index preset uses a Link block for Blog.

Link – every setting and block explained

A dropdown you build in the editor from Menu item, Promo card and Banner blocks. Use it for a curated menu such as "Edits" or "Gifts", with images and promo cards.

  • Attach to menu link: enter the exact title of a top-level link from your main menu, and the dropdown replaces that link. Leave it empty to add a new item at the end of the menu.
  • Keep the link's own sub-links: keeps the sub-links from Online Store > Navigation and adds your blocks next to them.
  • Links from a menu: fills the dropdown from another menu. Links with sub-links become columns; other links show as menu items with their collection image and product count.
  • Width: Compact opens under the link; Full width opens across the page with a grid of columns. Promo cards sit next to the menu items.
Dropdown – every setting and block explained

Inside a dropdown:

  • Menu item: a link with a title, an optional subtitle, image and a small tag (New, Sale).
  • Promo card: an image card. Pick a collection to link it and show its product count, or a product to show its photo and price.
  • Banner: a notice across the top or bottom of the dropdown, for delivery, a sale or opening hours.

The footer is built from blocks. Add, remove and reorder them in the Footer group.

  • Logo and text: your logo (or the store name), a short text and the social links from Theme settings › Social media.
  • Menu: a heading and a menu from Online Store > Navigation, for example Help or Shop.
  • Text: a heading and text, such as opening hours or contact details.
  • Newsletter: a signup form. Subscribers are added to your customer list in Shopify with the newsletter tag.
  • Image: a picture, for example a certification badge.
  • Custom Liquid: your own code. See Customizing code.

The bottom bar shows the copyright (your store name or Copyright name), the policy links from Settings › Policies, payment icons, the Follow on Shop button (needs Shop Pay), and the country and language selectors.

Footer – every setting and block explained