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

Fine-tune your store’s header settings. You can make your header area sticky, transparent, and compact, add your logo and add a special promotional message to grab your customers’s attention. You can also configure your store’s mega navigation menus from this section.

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 checkbox to enable the announcement bar.
Announcement text
The text for your announcement. This looks best if it’s just a short sentence or a call to action.
Announcement link
The link for your announcement. Paste any URL or choose a link to a specific page in your store.

You can see the announcement bar enabled in the following image:

Store header with announcement bar enabled

You can choose to use a custom logo and navigation menu in your store’s header.

Logo image
An upload form that takes a logo file.
Max width Max height
450 pixels 200 pixels

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

Custom logo width
You can set the displayed logo width to be anywhere between 50 pixels and 450 pixels.
Main menu
Choose a navigation menu that should be displayed in your site’s header.

You can choose any menu you have configured in your Shopify dashboard’s Navigation section. See Shopify’s Menus and links article for more information.

Transparent header

You can set your header area to be transparent on the home page. The transparent header is only visible when your first home page section is a slideshow.

The following image compares Context’s header with the transparent header:

Context's header (left) and transparent header (right)

The transparent header is only displayed on the home page. On other pages, the header uses Context’s standard color settings. See Colors to learn more.

Transparent header
Select this checkbox to enable header transparency.
Text color
If the transparent header is enabled, you can choose a custom text color that looks good with the home page content being displayed underneath the header.
Border color
If the transparent header is enabled, you can choose a custom border color that looks good with the home page content being 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.

Search bar quick links
Choose a navigation menu that should be displayed when the search bar is activated. See an example

You can choose any menu you have configured in your Shopify dashboard’s Navigation section. See Shopify’s Menus and links article for more information.

A search bar is activated when the magnifying lens icon is clicked.

On larger screens (like tablets, laptops and desktops), a list of quick links can be displayed. You can set a menu of links using the Search bar quick links setting.

Content

You can add multiple mega navigation menus to the header’s main menu. Use the Add mega navigation menu button to add one.

On larger screens (like tablets, laptops and desktops), the mega navigation menu looks like this:

Mega navigation menu

On mobile devices, the mega navigation menu is displayed as collapsable sub-menus:

Mobile mega navigation menu, uncollapsed

Each mega navigation menu requires you to set up a corresponding menu in your Shopify dashboard’s Navigation section. See Shopify’s Set up drop-down menus in your online store article for more information.

Dropdown parent link
Add the text of one of your main menu items.

Context will look for sub-menus within this item to populate the mega navigation menu. Learn more

Mega menu featured image
You can add a featured image to the mega navigation menu. It is displayed to the right of the sub-menus.
Featured image heading
Add heading text that appears underneath the mega navigation featured image.
Featured image link text
Add link text that appears underneath the mega navigation featured image.
Featured image link
Paste a URL or add a link to another page on your site.

Mega menu

Building a mega navigation requires you to make changes to your main menu from your Shopify dashboard’s Navigation section.

To make full use of the mega navigation menu, you should set up an menu item that includes up to three sub-menus.

For example, Context’s Chic demo theme has three sub-menus under the “Shop” menu item. The three sub-menus are “Collections”, “Type” and “Everything”, which each have four to five menu items inside of them.

Here is what Chic’s main menu configuration looks like:

Shopify Navigation setup screen, showing the configured menu for Context Chic demo preset