Skip to main content

: Header Settings

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Header

Recommended reading

In this section...

 

Customer Bar

The customer bar contains some of the more important features of a successful e-commerce store, and contains links that every customer will look for:

  • Search
  • Cart
  • Account
  • Language translation
  • Currency conversion

When the main navigation gets too long, or the store is viewed on a mobile device, these options move to the same row as the logo.

 

Enable search

Add a search bar or pop up to your Header. The search can be customized in Theme Settings > Search

 

Enable search popup

The search bar can be presented as a static input or in an overlay similar to the pop ups. All search results will appear in the overlay

 

Cart icon

Choose between a bag or a shopping cart icon

 

Enable cart dropdown

When items are in the cart, the dropdown is always available when hovered over on desktop or clicked on mobile. When this option is enabled, the cart dropdown will appear when an item is placed in the cart

 

Show cart dropdown free shipping messaging

The free shipping message is set up in Theme Settings > General.  Enable the message to be displayed in the cart dropdown

 

Show cart dropdown checkout button

Enable the checkout button in the cart dropdown. Consider disabling if you require the user to visit the cart before checking out

 

Enable language selector

If this is enabled and there is more than one published language file in your store, the current language will reveal a dropdown of all the available languages. It is recommended to thoroughly review the guidelines outlined in the Shopify help document.

  • When adding a new language in the admin via Settings > Store languages, a new language file will only be added to the published theme
  • Only theme content found in the language files will be translated. This includes elements like the add to cart buttons, default section text & checkout text
  • To translate content such as product or collection descriptions, install a translations app that's compatible with selling in multiple languages.

Avenue has language files for the following:

  • Arabic
  • Chinese - Traditional
  • English
  • French
  • German
  • Hebrew
  • Italian
  • Polish
  • Russian
  • Swedish
  • Spanish

The theme files only affects text for buttons and labels. In order to translate content like pages & descriptions, you will need an app & Translation Lab is recommend.

 

Enable country/region selector

If this is enabled and there is more than one currency accepted in your store, the current country code & currency symbol will reveal a dropdown of all the accepted countries & currencies. Learn more about selling in multiple currencies and how to set it up.

NOTE: Even though prices are displayed in different currencies, orders will still be processed in your store's currency.

 

Show border

Display a border to separate the Customer Bar

 

Avenue will accommodate wide or tall logos, but a landscape format is recommended.

 

Image

When possible, it is always best practice to use an SVG or PNG file for your logos. JPEG may reduce file size, but they will also reduce clarity and you want your brand looking sharp.

It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp. The overall height of your logo will determine the height of your Header Navigation to the right

 

Max logo width

The slider provides a minimum of 40px wide to a max of 250px with 10px steps in between

 

Detailed instructions & guides are available on the Header Navigation page

 

Menu

Choose the menu for your header. By default, the 'Main Menu' will be selected, but any menu can be created and used here.

 

Link size

The slider provides a font size of 14px, 16px, 18px, 20px or 22px. The default size is 14px

 

Uppercase headings

Set the 2nd level headers to be uppercased

 

Position

The menu can appear next to the logo, centered, or to the far right of the section

 

Enable sticky header

Pin the navigation bar to the top of the page when scrolling

 

Show image

The 'Mega' menu contains a single image that corresponds to the first level menu item if it is linked to a collection. If you do not want to display an image, simply uncheck 'Show image'

 

Show first product image

If the menu item is a collection, it will display the available collection image first.  If no image is available, it will use the first product image.  You can override this by checking 'Use first product image'.

 

Show border

Display a border to separate the Announcement Bar

 

Promotion Content Blocks

Access content blocks using black arrow next 'Header'.

You can add up to 2 promotions to the Header Customer Bar in addition to the text options available in the Header Announcement Bar.  This is prime real estate to help your customers find what they are looking for quickly.  A few suggestions:

  • Contact page link
  • Phone number
  • Returns policy link
  • Store locations link
  • Links to partner sites
  • Deals & specials

Text

Up to 2 text blocks can be added and basic formatting including bold, italic & links can be added

 

Free Shipping Content Block

Access content blocks using black arrow next 'Header'.

The free shipping message is set up in Theme Settings > General

 

* NOTE: May not be available on all sections, blocks or templates