Docs
Header, footer and popups

Header section

The Header section of Combine sets the logo, layout, menus, transparent header and mobile navigation shown at the top of every page.

Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.

The Header section is the store header at the top of every page: the logo, the menus, the search, account and cart icons, an optional custom link and the mobile menu drawer. It can also sit transparent over the first section of the pages you choose.

Where to find it: select Header in the Header group at the top of the theme editor sidebar. The Header section is the same on every page, so you can open it from any template.

  • Logo image is the store logo. Without one, Combine shows the store name as text.
  • Logo image maximum height sets how tall the logo can be, from 20 to 100 px.
  • Logo mobile image and Mobile logo image maximum height replace the logo on screens narrower than 768 px. Without a mobile logo, phones show the main logo.

Upload the logo at twice the height you set, so it stays sharp on high-resolution screens. See Image size recommendations.

Layout

  • Desktop layout puts the logo, menu and icons in One row, or the logo and icons in a top row with the menu in a row below (Two rows, the default).
  • Desktop menu style (one row) shows the menu links in the row (Classic (text)) or a menu icon that opens the menu drawer (Minimal (drawer)). It shows only with the One row layout.
  • Alignment puts the logo on the left or in the center.
  • Menu icons desktop style shows the labels of the search, cart and custom link icons next to them (Inline), on hover (Tooltip), or not at all (None). The account icon never shows a label.
  • Sticky header shows a copy of the header when the customer scrolls up the page, and hides it again when they scroll down.
  • Show header bottom border draws a line under the header. Show secondary header border (Two rows only) also draws a line between the two rows.
  • Hide search and Hide cart remove those icons from the header.

On screens narrower than 1024 px, the header always shows the menu icon, which opens the mobile menu drawer.

When the classic menu is too wide to fit the screen, Combine replaces it with the menu icon and the drawer, also on desktop. This happens more often in the theme editor, because its preview is narrower than a full browser window.

Customer accounts

  • The account icon shows when customer accounts are turned on in Shopify admin → Settings → Customer accounts.
  • Since Combine 3.2.0, the account icon opens Shopify's sign-in panel. Customer account menu picks the menu shown in that panel for signed-in customers. It works only with Shopify's new customer accounts.

The custom menu link adds one extra icon next to the search, account and cart icons, for example a link to your contact page or a sale collection.

  • Icon picks the icon from the list. With No icon, the custom link does not show at all.
  • Label is the text shown next to the icon or in its tooltip, depending on Menu icons desktop style.
  • Link is the page it opens. Open link in a new window opens it in a new tab.

Header blocks

The menus of the header are blocks: select Add block inside the Header section. Each block is one top-level item of the header menu, in the order of the blocks. The same blocks build the mobile menu drawer.

A regular menu from Shopify admin → Content → Menus (Select menu, default main-menu). Every top-level link of the menu becomes a header link; links with child links open a dropdown, up to three levels deep. Use it for simple navigation.

Mega menu

One header link (Menu title) that opens a full-width panel. The menu picked in Select menu fills the panel: its top-level links become column headings, with their child links listed under them.

  • Promotion 1 and Promotion 2 each add a promotion to the panel: turn on Show promotion, then add a Promotion image, a Promotion image link and a Promotion text.
  • Column width sets how wide the promotion columns are: One fourth or One third of the panel.
  • Media border radius rounds the corners of the promotion images, from 0 to 30 px.

Products

One header link (Menu title) that opens a panel of up to 12 products you pick in Products, with their images. Show more label and Show more url add a link at the end, for example to the full collection.

Collections

One header link that opens a panel of up to 12 collections you pick in Collections, with their images, plus an optional show more link.

Collection

One header link that opens a panel with the products of one Collection, up to Maximum number of products shown (1 to 12, default 6), plus an optional show more link.

Homepage

A house icon that links to the home page. You can add it once.

On mobile, the Products, Collections and Collection blocks show their items as a grid of images inside the menu drawer.

Setting up the header menu

Create the menus in Shopify admin

Open Shopify admin → Content → Menus. Edit the main menu, or create a menu for each mega menu. Nest links under other links to make dropdowns or mega menu columns.

Add the blocks in the order you want

In the theme editor, select Header → Add block and add the blocks: Menu for a whole menu, Mega menu, Products, Collections or Collection for single header links with a panel. Drag them to set the order.

Pick the content of each block

Select each block and pick its menu, products or collection. For a Mega menu, also write its Menu title and add the promotions.

Check desktop and mobile

Preview the store on a wide screen and on a phone. If the classic menu turns into the menu icon on desktop, shorten the menu or switch Desktop layout to Two rows.

Transparent header design

The transparent header sits over the first section of the page, with no background, its own text color and its own logo. When the customer moves the mouse over it on desktop, it shows the normal header colors. The sticky copy that appears on scroll always has the normal colors.

  • Enable transparent header turns the feature on or off for the whole store. Turning it off keeps your page choices for later.
  • Enable on homepage, Enable on regular pages, Enable on collection pages, Enable on product pages and Enable on article pages turn it on per page type (all off by default). "Regular pages" are the pages you create in Shopify admin → Online Store → Pages.
  • Enable on custom pages turns it on for single pages, products, collections, articles or blogs: write their handles, separated by commas.
  • Text sets the color of the menu links and icons over the first section.
  • Logo image and Logo mobile image replace the logo while the header is transparent. Upload them at the same size as the main logo.
  • Hide transparent header borders hides the header borders while it is transparent (on by default).
  • Pages with default header lists handles, one per line or separated by commas, where the header stays transparent but keeps the normal logo and text color. Write index for the home page.

Setting up the transparent header

Start the pages with a full-width image

Make sure the first section of each page that gets the transparent header is a full-width image, video or slideshow, for example a Flex slideshow or a Media with text overlay section.

Turn on the transparent header

Select Header and, under Transparent header design, keep Enable transparent header on.

Choose the pages

Turn on the page types you want, for example Enable on homepage. For single pages, write their handles in Enable on custom pages, for example about-us, build-your-kit.

Pick a Text color that reads well over your images, for example white over dark photos. Upload a matching Logo image and Logo mobile image.

Keep the normal logo where needed

For pages where the image is light and the normal logo reads better, write their handles in Pages with default header. Select Save and check each page in the preview.

Handles must match exactly. Since Combine 4.0.0, about no longer matches a page with the handle about-us. Find a page's handle at the end of its URL, or in the Search engine listing of the page in Shopify admin.

To show a page title over an image with the transparent header, use the custom page header of the Page template. See Regular page.

Mobile navigation

These settings change only what the mobile menu drawer shows under the menu:

  • Show language selector and Show country/region selector add the selectors. They appear only when your store has more than one language, or more than one country in its markets.
  • Show social icons adds the icons from Social theme settings.

Why does my content hide behind the transparent header?

The page's first section is not a full-width image. The transparent header always overlaps the first section, so a heading or a product grid at the top slides under it. Put a full-width image or slideshow first, or turn off the transparent header for that page type or handle.

Why is my header not transparent on a page?

A setting does not cover that page. Check that Enable transparent header is on, that the page type is turned on, or that the handle in Enable on custom pages is exactly the page's handle. Search, cart and blog listing pages are not page types here: add a blog by its handle in Enable on custom pages.

Why does the account icon not show?

Customer accounts are turned off in your store. Turn them on in Shopify admin → Settings → Customer accounts. Combine shows the account icon as soon as Shopify reports that customer accounts are on; there is no theme setting to hide it.

All Header settings

Every setting of this section, with its type and default.

Social theme settings

The Social theme settings of Combine hold your social media links and two custom icons used by the header, footer and announcement bar.

Announcement bar

The Announcement bar section of Combine shows rotating messages with links above the header, with optional language, country and social links.

On this page

LogoLayoutCustomer accountsCustom menu linkHeader blocksMenuMega menuProductsCollectionsCollectionHomepageSetting up the header menuTransparent header designSetting up the transparent headerMobile navigationWhy does my content hide behind the transparent header?Why is my header not transparent on a page?Why does the account icon not show?All Header settingsRelated pages