“How can I customize my theme’s header?”

Fine-tune your store’s header settings. You can make your header navigation compact or full-width, make the header sticky, add your logo and add an announcement bar to notify your customers about your latest sale.

Navigation type
Choose from one of two navigation types: Compact or Full-width.

The Compact navigation type takes your navigation menu items and puts them inside the navigation menu button at the top-left corner of each page. Customers can access the menu by selecting the menu button.

The Full-width navigation type places your navigation item below your logo.

See an example of Compact menu and Full-width.

Note: If you have lots of menu items and there isn’t enough space to display all of them, the full-width navigation setting will revert to the compact type.

Menu
Choose a menu from your navigation menus to be displayed as the header’s main menu.
Enable sticky header
Select this checkbox to force the header to scroll down the page as the user scrolls down the page. See an example
Enable newsletter icon
Select this checkbox to show the newsletter icon in the left-hand corner of the header.
Logo image
An upload form that takes a logo file.
Width Height
300 pixels*

* If your logo image is wider than 300 pixels, it will be resized.

Custom logo width (in pixels)
You can scale your logo’s size using this setting. Define a size in pixels without the “px” unit.

You can set the navigation type to either Compact or Full-width.

The compact setting hides the menu items inside a navigation menu button. To activate the menu, the user can select the navigation menu button. The button always appears as the left-most button in the header.

Compact navigation type

The full-width setting displays the menu items underneath your logo or store name.

Full-width navigation type

If you have lots of menu items and there isn’t enough space to display all of them, the full-width navigation setting will revert to the compact type.

Turning on the sticky header ensures that your customers never lose sight of your store’s logo and menus.

Transparent Header

Enable transparent header
Select this checkbox to enable header transparency. The header will be integrated with the top-most images and the background will be removed from behind your logo and header controls.
Accent color
If the transparent header is enabled, you can choose a custom color for the header elements that looks good with the content being displayed underneath the header.
Accent opacity
You can set how visible the accent color is: 0% is completely transparent, and 100% is completely visible.
Border color
If the transparent header is enabled, you can choose a custom border color that looks good with the content displayed underneath the header.

The border appears underneath the logo and navigation menu.

Border opacity
You can set how visible the header border is: 0% is completely transparent, and 100% is completely visible.
Transparent logo image
You can upload a logo image with a transparent background that is used instead of your regular logo image.
Max width Max height
450 pixels 200 pixels

If you upload an image larger than the maximum height and width, it will be resized.

Announcement Bar

The announcement bar is a great way to share coupon codes, sale information and other one-liners with customers.

Show Announcement
Select this box to show the announcement bar.
Text
The text for your notification. Make sure it’s only a short sentence or two.
Link
Allow users to click your notification bar to go a page of your choice.

You can turn it on or off and if you want to you can use it as a link to another page.

Header message enabled

It uses the same color settings as your buttons.

Transparent Announcement Bar

Text color
If the transparent header is enabled, you can choose a custom color for the announcement bar text.
Background color
You can choose a custom color for the announcement bar background. The background color will inherit the transparent header’s accent opacity settings.