“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.

Enable sticky header
Forces the header to scroll down the page as the user scrolls down the page. See an example
Enable transparent header
Select this checkbox to make the header transparent and integrated with the top-most images. See an example
Header elements color override
If the transparent header is turned on, you can select a custom color for your store name and header controls.

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

Sticky header enabled

Enable transparent header

The transparent header removes the background from behind your logo and header controls.

Transparent header, on vs. off

The transparent header setting is ignored on mobile devices.

Ira includes three different styles you can choose from to display your navigation menu: buttons, icons or links. In addition to these styles, you can change the way the navigation menu looks by setting its colors.

Navigation style
Choose a navigation style for your store. Choose either Buttons, Icons or Links. See examples
Background color
The background color for the navigation menu, search menu and cart drawer. See an example
Border color
The color for the border between the items in the customer’s cart and the subtotal. See an example
The text color for the navigation menu, search menu and cart drawer.

For more information about how navigation works in Shopify, check out their article Menus and links.

If you’re looking for more information about creating a drop-down navigation menu (like the Shop menu on the Bright demo), see their article Create a drop-down menu.

You can choose to display your store navigation as buttons, icons or links.

Here’s what the buttons navigation style looks like:

Buttons navigation style

Here’s what the icons navigation style looks like:

Icons navigation style

Here’s what the links navigation style looks like:

Links navigation style

If you have too many items or if a customer’s screen resolution won’t allow the items to appear in one, clean line, the links navigation style will be replaced with the buttons navigation style.

The navigation background changes the color of the navigation menu.

Navigation background color

But it also changes the color of the search bar and the cart drawer.

Cart drawer background

You can preview what the navigation menu, the search bar and the cart drawer would look like from your Customize theme page by selecting their icons from the top menu.

The navigation border color appears in the cart drawer. It separates the items in the customer’s cart from the subtotal and checkout button.

Navigation border color

Catalog Dropdown Menu

Populate your dropdowns with collection images like this:

Catalog dropdown menu

To enable this functionality, a little set up is required:

  1. Specify a Featured Image for each collection that you’d like to display in your menu. Shopify has a great article on how to do this.

  2. Edit your navigation to include each collection as nested items. Shopify has a great article on how to do this.

Enable catalog dropdowns
Select this option if you’d like to display collection images in your dropdown menus.
Catalog menu image
Upload a Fallback Catalog menu image to display when a link does not have an image associated with it.

Secondary menus

Secondary menus appear separate from the main navigation in your store navigation. You can put links to anything that you want in these menus.

In the image below, the store has the main navigation and one secondary menu set up.

Navigation with one secondary menu

If you want to set up a new menu, see How to create menus for more information.

Secondary menu #1
The first submenu for your store’s navigation.
Secondary menu #2
The second submenu for your store’s navigation.

The #1 and #2 menus are simply the order that the menus appear in the list. Other than that, they are interchangeable.

Customer accounts

The customer accounts menu appears below your navigation and secondary navigation menus if you’ve enabled customer accounts from your Shopify settings.

To enable or disable accounts, go to the Settings > Checkout page in your Shopify admin panel and locate the Customer Accounts section.

The Customer Accounts settings in the Shopify admin panel

You can turn accounts on, off or make them optional here.

Instead of a text logo, you can upload your own store logo as an image. If you use the transparent header setting, you can use the second upload form to add a variation of your logo to be used specifically when the header is transparent.

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
Although the maximum logo dimensions are 450px wide by 200px high, you can customize the size of your logo using this setting. You define a size in pixels (without the “px” unit).
Transparent logo image
You can upload a variation of your logo for use use with the transparent header setting.
Max width Max height
450 pixels 200 pixels

This version of the logo is only displayed when the header is transparent, like when the slideshow is enabled.

We recommend you use a PNG with transparency. The maximum logo dimensions are 450px wide by 200px high. The uploaded file will be resized to fit within those constraints.

Promotions bar

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

Promotions bar with currency converter and social links enabled

The promotions bar also includes an optional currency converter and social links area to highlight your social media accounts.

Enable currency converter
Turn on the currency converter on the left side of the promotions bar.

You can manage the currency converter’s settings from the currency settings in your theme’s General settings.

Enable social links
Turn on social links on the right side of the promotions bar.

This displays icons that link to the social media accounts that you have enabled in the social media settings in your theme’s General settings.

The text for your promotion. This looks best if it’s just a short sentence or call to action.
Allow users to click your text to go to a link of your choice.