Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Ecomus - Header Group - Header sections

Annie

Written by Annie

Last updated

4168 views

On this page


There are 2 designs of Header: Header Inline and Header Menu Bottom. To know how to configure the header sections in detail, let's stick to this guideline.

You can look over some header styles in the video below:

The screenshots and videos in this document are for 'Header Inline', but you can do the same steps for 'Header Menu Bottom'.

We prioritize the top first section header to show. For example if you want to use Header Inline, you need to remove/hide 'Header Menu Bottom'. Otherwise, the options in header section will not work properly.

1. Create main menu on desktop

From Online Store > Navigation > you create a navigation for the main menu.

20.gif

Note: Shopify allows you to create a Navigation up to 3 levels, so the maximum level for a dropdown is 3.

1.1. Default menu

  • If you want to show a simple header with links and dropdowns, you can remove/hide all blocks in Header inline section.

Please check this video to know more:

  • If you want to show a Base item menu (only a link when clicking, no dropdown) => you hide the mega block in Header Inline. Follow this video:

1.2. Mega menu

There are 4 blocks for mega menu: Mega menu shop, Mega menu product, Mega menu pages, Mega menu HTML. You can look over this video:

Step 1: Add 'Mega menu' blocks

Make sure the 'Menu item title' is the same as 'menu title' in Navigation, including upper and lower case characters, spaces, etc... Otherwise, it will show the default dropdown menu from Navigation.

Please follow this video guide:

Step 2: Navigation for mega menu

In mega menu:

  • The second-level items become the column heading

  • The third-level items become the link list under heading

navigation mega.gif

Step 3: Customize mega menu

  • There are some general options: Color scheme, Submenu position, Mega menu width

Please check this video to configure them:

  • In different blocks of mega menu, you can add a Collection list/ Product list/ HTML/ Content page. Please follow this video guide:

  • To add an image collection of Mega menu collection, you add the feature image from collection.

collection image1.gif

If you want to choose another image for collection, you go to Settings > Custom data > Collection > create a 'collection metafield' with the key 'theme.featured_image_collection'. Please follow this video:

The result:

feature collection image.gif

1.3. Use label menu

You can create the label menu as the image below.

91.gif

You just need to add the [Label_name] next to Menu item you want.

92.gif

The colors are from Theme settings > Colors > Product

93.gif

2. Header options for desktop

  • Header layout and logo

  • Navigation options: you choose a main menu, position, size, font weight, etc...

  • Group icons options: Enable the icons you want

60.gif

You need to go to Theme settings > Products > enable wishlist and compare first.

If you tick "Show user" but the icon still not show, please go to Shopify Settings > Customer accounts > enable “Show login link in the header of online store and at checkout”:

account.gif

3. Header options for mobile

Still in the Header Inline/Header Menu Bottom section, you can configure mobile header.

  • Header layout and logo: you can change header min-height, logo and logo min-width.

71.gif
  • Menu mobile: you choose navigation to show in the menu. Please check this video to configure it:

  • Only click icon:

If you check on this option, you only can click icon to open the submenu.

Uncheck this option to click on both the menu heading and icon to open the submenu.

  • Color scheme, notice mobile: you choose a color scheme for mobile menu and edit the content in notice field.

2024-04-10_10-42-44.png

4. Header categories

Only Header Menu Bottom has the categories header.

81.gif

You need to create a navigation for the categories. If the menu item is collection page, it will have the thumbnail image next to the collection items.

Please follow this video to set up it:

5. Transparent header

Transparent header is only available in Header Inline and works if the first section of your page is slideshow, hero image, banner or video section. If the first section is another section, it shows the normal header instead of transparent.

6. Sticky header

Sticky header is available in both Header Inline and Header Menu Bottom.

You can look over this video to understand it.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.