Get a free audit

Header and navigation

Last updated Theme version 1.0.0

Press / to search. Use the arrow keys and Enter to open a result.

All guides
On this page

The top of your store is the first thing every visitor sees. In Lumina it is made of two sections: the Announcement bar and the Header. At the bottom, the Footer and the Mobile tab bar finish the job. This page explains each one.

To open them, go to Online Store > Themes > Customize. The header sections are at the top of every page in the editor, and the footer sections are at the bottom. They are the same on all pages.

Header layouts

Select the Header section, then choose a Layout:

  1. Logo center, menu below: the logo sits in the middle with the menu on a row underneath. A classic look for fashion stores.
  2. Logo start, wide search, menu below: the logo is at the start, a wide search bar fills the middle, the menu sits underneath. Good for stores with many products.
  3. Logo start, menu inline: logo and menu share one row. The most compact option.
  4. Logo center, menu in drawer: only the logo and icons show, and the menu opens in a side drawer on every screen size. Good for small catalogs and a minimal look.

Other settings in the header:

  1. Search style: Bar shows a search field, Icon shows a magnifier that opens a search popup.
  2. Sticky header: None, Always or On scroll up. On scroll up hides the header when the shopper scrolls down and brings it back as soon as they scroll up, which keeps more of the screen free on phones.
  3. Full page width: lets the header stretch to the edges of the screen.
  4. Vertical padding: 4 to 32 px.

Menu

  1. Menu: the menu shown in the header. Choose it from your Shopify menus.
  2. Secondary menu: shown at the bottom of the mobile menu. A good place for Account, Contact, Track my order.
  3. Open dropdowns on: Hover or Click.

Icons

  1. Show labels next to icons
  2. Cart icon: Bag or Cart.
  3. Show account icon
  4. Customer account menu: the menu of links shown with the account button when a customer is signed in.
  5. Show wishlist icon: shows only if wishlist is enabled in Theme settings > Product cards > Enable wishlist.
  6. Show WhatsApp contact: shows a WhatsApp link with your phone number in the header. It needs a number in Theme settings > Chat and contact > WhatsApp number.

Colors

  1. Color scheme: the header's own colors.
  2. Menus and drawers color scheme: the colors of dropdowns, mega menus and drawers.
  3. Transparent header on home page: the header sits over the first section of the home page, such as a slideshow, until the shopper scrolls. Use a light logo in Theme settings > Logo and favicon > Logo for transparent header.
  4. Transparent header color scheme: the colors used while the header is transparent.

Set up the header

  1. Open the theme editor and select the Header section.
  2. Choose a Layout and Search style.
  3. Pick your Menu and Secondary menu.
  4. Choose which icons to show.
  5. Save and preview on a phone and a desktop.

Mega menus

A mega menu is a wide dropdown that shows several columns of links and, optionally, two promotional images. It opens when a shopper points at or clicks a top level menu item.

Lumina builds a mega menu in two ways:

  • Automatically, when a top level item has second level links that themselves have third level links. The second level links become column headings and the third level links become the lists under them.
  • By adding a Mega menu block to the Header section, which also lets you add images.

Add a mega menu with images

  1. In Shopify admin, open Content > Menus > Main menu. Make sure the top level item exists, for example Women, with second level links such as Clothing and Accessories, and optionally third level links such as Dresses and Knitwear.
  2. In the theme editor, select the Header section and choose Add block, then Mega menu.
  3. In Menu item, type the title of the top level item exactly as it appears in the menu. For example, type Women. The match ignores capital letters and extra spaces, but the words must be the same. If the menu item is renamed later, update this field.
  4. Add up to two promotions. For each, set an Image 1 and Heading 1 and Link 1. For the second one use Image 2, Heading 2 and Link 2.
  5. Repeat for each top level item that should have a mega menu, one block per item.
  6. Save and point at the menu item in the preview.

Good to know

  • Top level items without a block and without third level links get a normal dropdown.
  • Every mega menu ends with a "View all" link to the top level item's page.
  • On phones, the same menu appears in the mobile drawer as nested accordions. The drawer uses the Menus and drawers color scheme.
  • Use portrait or square images of the same shape in both promotions so the menu looks tidy.
  • A menu item must have a link (for example to a collection) for the "View all" link to be useful.

Announcement bar

The Announcement bar is the thin strip above the header. Use it for shipping offers, sales and notices.

Settings

  1. Color scheme
  2. Autoplay: rotates through your messages.
  3. Change every: 3 to 12 seconds.
  4. Let shoppers close the bar: adds a close button. The bar stays closed for that visitor until you change its content.
  5. Show social links: uses the links from Theme settings > Social media.
  6. Show country and language selectors
  7. Full page width
  8. Vertical padding: 4 to 20 px.

The bar is made of blocks. You can add up to 8 in total.

  • Message: some Text, an optional Link and an optional Icon.
  • Countdown: a timer to a date. Set the End date (format YYYY-MM-DD, in your store time zone) and End time. Add Text after the timer ends so the bar still makes sense after the sale. An optional Link and Link label turn it into a call to action. You can add up to 2.
  • Discount code: shows your Text and a Code that shoppers can copy with one click.

Add a rotating message

  1. Select the Announcement bar section.
  2. Choose Add block and pick Message.
  3. Type the Text, add a Link if wanted, and pick an Icon.
  4. Add another block for each additional message and turn on Autoplay.

Good to know

  • Keep messages short. They need to be read in a few seconds, on a phone.
  • A message with a link makes the whole message clickable.
  • The announcement bar is not sticky on purpose. Two sticky bars would use too much of a phone screen.
  • To remove the bar, delete the section or all its blocks.

Mobile tab bar

The Mobile tab bar is an app style bar fixed to the bottom of the screen on phones and small tablets. It is hidden on desktop. It lives in the footer area of the editor.

Settings: Color scheme and Show labels.

Each tab is a Tab block. You can add up to 5 tabs. For each tab choose an Action:

  1. Home
  2. Open menu
  3. Search
  4. Cart
  5. Account
  6. Wishlist
  7. WhatsApp chat
  8. Custom link, with a Link

You can also set a Label (leave it empty to use the default name), choose an Icon (Automatic picks the right one for the action) and turn on Raised center style to make the tab stand out. Use the raised style on one tab only, ideally the middle one.

Set up the tab bar

  1. Select the Mobile tab bar section in the footer group.
  2. Remove the tabs you do not want, or choose Add block then Tab.
  3. Set the Action of each tab and drag the tabs into the order you want.
  4. Preview at phone width.

Good to know

  • Four or five tabs work best. More are hard to tap.
  • The WhatsApp tab needs your number in Theme settings > Chat and contact.
  • If the floating chat button is also on, the two can compete for space. Use one or the other. See WhatsApp and chat.

Country and language selectors

Lumina can show a country (and currency) selector and a language selector in three places: the Header, the Announcement bar and the Footer. Each has a Show country and language selectors setting. The header and footer also have Show country selector and Show language selector, so you can show one without the other.

The selectors only appear if your store offers more than one country or language. Set that up in Shopify admin:

  1. Languages: Settings > Languages. Add a language and publish it for the markets that should see it.
  2. Countries and currencies: Settings > Markets. Add the markets you sell to.

Good to know

  • A country selector appears only when your store sells to more than one country, and a language selector only when more than one language is published.
  • Extra currencies need a payment provider that supports them. This is a Shopify rule.
  • Translating your products, pages and menus is covered in Languages and right-to-left.

Customer accounts

The account button in the header uses Shopify's customer accounts, so shoppers sign in through Shopify's own secure sign in. You do not build any pages for it.

  1. Check Settings > Customer accounts in your Shopify admin and make sure customer accounts are turned on.
  2. In the Header section, keep Show account icon on.
  3. Choose a Customer account menu. Its links appear with the account button once a customer is signed in.

On phones, the Mobile tab bar can show an Account tab too.

The Footer section is made of blocks you can reorder: Logo and text, Menu (add as many as you like), Text, Contact, Newsletter, Image, and apps. It holds up to 6 blocks.

Bottom bar settings: Show country and language selectors, Show payment icons, Show Follow on Shop, Show policy links and Show "Powered by Shopify".

Notes

  • The Contact block shows the address, phone, WhatsApp and email you entered in Theme settings > Chat and contact. You can add Opening hours in the block.
  • The Newsletter block adds subscribers to your customer list with email marketing accepted.
  • Show Follow on Shop only shows when the Shop channel is installed and Shop Pay is active.
  • Show payment icons shows the payment methods your store accepts.

Good to know

  • Changes to the header and footer apply to every page.
  • Menus are edited in Content > Menus, not in the theme editor. Rename a link there and it updates everywhere, except in a Mega menu block, which matches by title and needs the same rename.
  • Check your menus on a phone as well as a desktop. Long menu titles wrap and can crowd the header.

Logo text and the editorial menu

When no logo image is set, the header shows text. Change it with Logo text (leave it empty to use the store name) and choose Logo text style: Heading font, or Spaced capitals for a wordmark such as L U M I N A.

Menu drawer style sets the menu that opens on phones (and on computers in the drawer layout). List is the classic menu. Editorial shows the main links in large type that rise in one after another, with up to two photo links underneath: set Menu photo 1 and Menu photo 2, each with a label and a link, for example Women and Men.

Over a full screen opening (Header > Transparent header on home page), choose Sticky header: On scroll up: the header floats over the film, hides completely while shoppers read down, and returns as soon as they scroll up.

Still stuck? Contact support