Skip to main content

Header

  • Updated
header2.jpgheader.jpg

Overview

The Chord theme includes a highly customizable Header feature. It appears on every page to promote your company's brand and provide helpful links, tools, and more.

Guidelines

Customize header

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find chord theme that you want to edit, and then click Customize.
  3. In the Left-hand side of your screen, click the Header.

Section settings

Setting Description
Section width Set the width of the section using the drop-down menu:
  • Grid
  • Full width
Section spacing Set the spacing of the section using the drop-down menu:
  • Medium
  • Large
Enable sticky header Redisplays the header when the customer scrolls back up. Disappears when the customer scrolls down.
Show line separator Displays a line to visually separate the header from the page's content.
Show search icon Checked to show search icon.
Show cart icon Checked to show cart icon.
Background color The background color for header.
Heading and icons color Set the text and icon color for header.
Logo image The logo image of header. Click Select Image to view your media library, or click the Change button to change or remove the image.
Edit alt text Add a brief description to improve SEO and to describe the media for customers using screen readers.
Desktop logo position Where the logo displays in the header when a customer views the site on a large screen. The position of the logo is automatically optimized for mobile.
  • Middle left - Displays the logo inline with the main menu, centered vertically and aligned to the left.
  • Middle center - Displays the logo inline with the main menu, centered the logo, and aligns menu items to the left.
  • Top center - Displays the logo above the main menu, and aligns the logo and menu items in the center.
Logo width The width of the logo. Can be any multiple of 5, from 50 px to 350 px. The default is 140 px.
Mobile logo width The width of the logo on mobile. Can be any multiple of 5, from 50 px to 350 px. The default is 140 px
Main menu The menu to use as your main menu. Click Change to select a different menu. Visible when the Desktop logo setting is set to Top Center.
Main menu font size Set the font size of the Main menu using the drop-down menu:
  • Small
  • Medium
  • Large
Top left menu The menu to use as your top left menu when Desktop logo position is Top Center. Click Change to select a different menu
Enable country/region selector Adds a selector where a customer can choose the countries and regions that you've enabled in your payment settings, so that customers can view your product prices in the currency of their choice.
Enable language selector Adds a selector where a customer can choose the countries and regions that you've enabled in your language settings, so that customers can browse your store in the language of their choice.

Mega menu block

Setting Description
Link title The link title of the main menu which you want make it as a mega menu.

Mega menu image block

Setting Description
Link title The link title of the main menu which you want put the image below
Image The image display under mega menu.
Edit alt text Add a brief image description to improve SEO and to describe the image for customers using screen readers.
Heading The title for the block
Subheading The subheading for the block
Link The URL that you want the image to link to

Related articles