Header

Ask AI

Open in ChatGPT

Ask ChatGPT about this page

Open in Claude

Ask Claude about this page

Enable a light/dark mode toggle button via Theme Editor > Theme Settings > Theme Mode > Turn on "Enable theme mode".

👉 For more detailed guidance, visit this guide.

In order to set up logo on the Header, follow this:

STEP 1: Click Header to open its settings panel

STEP 2: Upload the logo

• Upload your logo image. If left blank, your store name will be used as the default logo.
• Upload a separate logo to display on mobile devices.
• (Optional) Upload a separate logo for dark theme mode.

STEP 3: Change logo size

Adjust the logo width for both desktop 💻 and mobile 📱.

STEP 4: (Optional) Set up logo as H1

Toggle “Assign H1 tag to logo” if you want the logo to act as the main heading (for SEO).  Turn it off if you prefer to assign the H1 tag to another element.

Tip: Each page should have only one H1. 

STEP 5: Click “Save” when done

Hamburger menu is used to hide and reveal a navigation menu. When clicked or tapped, it expands to show links or options, and collapses back to save screen space.

👉 To set up a Hamburger menu, follow this:

• Click on Header to open its settings panel.
• Toggle “Enable hamburger menu”. 
• (Optional) Toggle “Show search bar on header” (Only available when hamburger menu is ON).

The Sticky Header feature enhances your website's navigation experience by ensuring that the header remains visible as users scroll through the content. Follow the steps below to set up and customize the Sticky Header according to your preferences.

Within the Header section in Theme Editing, locate the Sticky Header settings.

You'll find a dropdown menu that allows you to select how the sticky header appears on your website. You can choose from:

• Disable (None): Turn off sticky header.
• Enable: Opt for scroll-triggered sticky, always sticky, or always sticky with a reduced logo size.

The Transparent Header lets your header sit directly over the top of your page content with a see-through background, so a full-width banner or hero image runs right up behind it.

STEP 1: Open the settings

In the Theme Editor, click on the Header section and find the Transparent header settings group.

STEP 2: Choose where the transparent header applies

• Tick “Enable on homepage” to apply it to your homepage.
• Tick “Enable on collection page” to extend it to collection pages.
• Use the new Custom pages menu picker for any other pages - see Step 3.

STEP 3: Apply it to your own list of pages (new in 10.3.0)

The Custom pages setting doesn’t take a list of pages directly - it takes a menu, and applies the transparent header to whatever that menu links to. So you build the list as a navigation menu first:

• In Shopify admin, go to Content > Menus and create a new menu - for example “Transparent header pages”.
• Add one menu item linking to each page that should use the transparent header. You don’t need to show this menu anywhere on your store - it’s only used as a list.
• Back in the Theme Editor, set Custom pages to the menu you just created.
• Visit each page to confirm the transparent header applies.

STEP 4: Upload a transparent logo

Still within the Transparent header settings, find the “Logo (transparent)” option and upload the logo to use while the header is transparent. This is usually a lighter version of your logo that reads well over an image.

STEP 5: Click “Save” and preview each page.

You can choose how your dropdown menu opens when customers interact with it. Eurus offers two options: On Click or On Hover.

Step 1: 

In Shopify admin, go to the Theme Editor by clicking on Online store > Themes > Customize.

Step 2: 

Find the Header area and tap on the Header section, you will see a new panel appear,

Step 3:

Within the menu setting, you should find a setting labeled Dropdown Menu Trigger.

Step 4:

Choose how you want the menu to open:

• On click: Customers must click a menu item to expand the dropdown. If the item has a link, clicking again will navigate to that page.
• On hover: The dropdown opens when customers hover over a menu item.

Step 5:

Click Save to apply your changes.

🖥️ On desktop:

Tap on the Header section, find the Desktop header layout setting, you can choose the layout you want for the header section in the drop down list:

• Logo left, menu left
• Logo left, menu center
• Logo above, menu center
• Logo center, menu left
• Logo left, menu right

📱 On mobile:

Tap on the Header section, find the Mobile header layout setting, you can choose the layout you want for the header section in the drop down list:

• Logo center, menu left
• Logo center, menu right
• Logo left

Eurus lets you draw attention to any menu/menu level using stylish effects like sparkles, circles, or underlines. 

STEP 1:

In the Theme Editor, go to Header > click on Header section > Menu highlight settings group.

STEP 2:

Toggle on the Enable menu highlight setting.

STEP 3:

Enter the 1st-level or sub-level menu names that you want to add highlight effects into the Highlight menus. 

Some rules to notice are:

• Menu names/menu level names  MUST MATCH EXACTLY, including case and spacing. 
• Enter one menu name/menu level name per line.
• Include translations for multilingual stores.

For example, if the menu level 2’s name is "Lipstick," you must enter Lipstick, exactly as it appears in your menu.

⚠️ Note: Don’t add extra space before or after, e.g., "Lipstick" (with a trailing space), as it won't work.

STEP 4:

Choose the highlight Style you want & change the color.

Marker	Circle	Bling bling

STEP 5:

Click “Save” when done.

Make the interaction with your menu more engaging for your customers by adding a smooth sliding effect. Here's how:

Step 1: Navigate to Online Store > Themes > Customize.

Step 2: Select the Header section to open its settings panel > Animations.

Step 3: Toggle Menu item level 1 animation ON.

⚠️Note: The animation is available ONLY when you use Marker/Bling bling highlight style.

Step 4: Click Save to apply.

Showing a scrolling promotion bar on the header is a great way to highlight important messages and grab customer attention. Here’s how: 

Step 1:  In the Header group, add Scrolling promotion section.

Step 2: Set up and customize the scrolling promotion to your preference, following this detailed guide: Scrolling promotion.