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:
-
From your Shopify admin, go to Online Store > Themes.
-
Find chord theme that you want to edit, and then click
Customize.
-
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:
|
| Section spacing |
Set the spacing of the section using the drop-down menu:
|
| 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:
|
| 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 |
