Header

What It Does

The Header section lets you customize this area of your store.

How to Edit it

1. In the Shopify theme editor, find the Header section in the sidebar.

2. Click on it to expand its settings.

3. Adjust the settings described below to customize its appearance and behavior.

4. Click Save to apply your changes.

---

Settings

Menu

Selects which navigation menu to display.

A menu (also called a "link list") is a group of links you create under Online Store > Navigation in your Shopify admin.

Highlight menu link

Enter the exact name of a menu item to highlight it with the accent color. Leave blank to disable.

Layout (desktop)

Controls the Layout (desktop). Choose from: All elements in a single row, Two rows.

Horizontal alignment

Controls the Horizontal alignment (desktop). Choose from: Left, Center.

Horizontal alignment (mobile)

Controls the Horizontal alignment (mobile). Choose from: Left, Center.

Enable overlay header - home page

When enabled, the header overlays the top of the homepage content.

Enable overlay header - other pages

When enabled, the header overlays the top of page content on all pages except the homepage.

Customer accounts log in

Show avatar

When enabled, displays this element. Disable to hide it.

To manage customer accounts, go to your customer accounts settings.

Logo

Image

Upload logo.

Width

Controls the width of logo.

Localization on mobile drawer

Show language selector

When enabled, displays this element. Disable to hide it.

Show currency / country selector

When enabled, displays this element. Disable to hide it.

To learn how to add languages and currencies to your store, click here.

Customer accounts log in on mobile drawer

Show avatar

When enabled, displays this element. Disable to hide it.

To manage customer accounts, go to your customer accounts settings.

Appearance

Margin

Adds space around the outside of this element.

Border radius

Rounds the corners of the header.

Minimum header height

Controls the minimum height of the header.

Enable drop shadow

When enabled, shows drop shadow on header. Disable to hide it.

Background transparency

Controls how see-through this element is.

Color scheme

Applies a predefined color scheme to this element.

Color schemes are sets of coordinated colors you define under Theme settings > Colors. Choosing a scheme applies its background, text, and accent colors.

Dropdown/mega menus color scheme

Applies a predefined color scheme to the header dropdown menu/mega menus.

On scroll up

Sticky header

Choose when the header should stay fixed at the top. Choose from: Always sticky, Sticky only when scrolling up, Not sticky.

Enable drop shadow

When enabled, a drop shadow is displayed on the header when scrolling. Disable it to hide the shadow.

Background transparency

Controls how transparent the header appears when scrolling.

Color scheme

Applies a predefined color scheme to the header when scrolling.

---

Supported Blocks

Collections grid (mega menu)

See the child document for full settings: Collections grid (mega menu)

Image grid (mega menu)

See the child document for full settings: Image grid (mega menu)

Hover split (mega menu)

See the child document for full settings: Hover split (mega menu)

Desktop drawer menu

See the child document for full settings: Desktop drawer menu