How to find these settings...
- Online Store
- Customize (Theme Editor)
- Header
Recommended reading
In this section...
Settings
Show image sizes
Displays the minimum recommended width for each image. If applicable, the height* will display after the width. Size is displayed in the Theme Customizer only, customers will not see this. * NOTE: Height is approximate, and the actual height is dependent on the individual screen. Learn more
Enable sticky header
Pin the navigation bar to the top of the page when scrolling
Layout
The header has 4 design options:
- Centered logo: A centered logo with the menu centered below it
- Menu next to logo: The logo will be left justified and the menu will be to the right
- Menu opposite the logo: The logo & the menu will be on opposite sides of the container
- Menu below logo: The logo & the menu will be left justified, with the menu directly below the logo
- Mobile: The mobile 'hamburger' menu will be left justified and the logo will be centered. This is the default layout for mobile devices
Enable search
Add a search icon to allow customers to access a live search field. Search criteria can be set in Theme Settings > Search
- None
- Icon
- Text
Mobile search location
The search input can be displayed in 1 of 3 locations:
- In mobile menu: Users will have to open the mobile menu to access search option
- Next to cart: Users will access search by clicking search icon
- Below logo: Search input is always present under under logo
Cart icon
The cart link can be displayed in 1 of 4 ways:
- Cart
- Bag
- Basket
- Text
Account link
The account link can be displayed in 1 of 2 ways:
- Icon
- Text
Mobile account location
The account link can be displayed in 1 of 2 locations:
- In mobile menu: Users will have to open the mobile menu to access account option
- Next to cart: Users will access search by clicking account icon
Customer bar
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.
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.
Text size
Set the text size with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px
Text color
Choose a custom color for the text
Text color hover
Choose a custom color for the text hover
Button text color *
Choose a custom color for the button text hover
Line color
Choose a custom color for the lines and borders
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
Background/Overlay color opacity *
When a background color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 1 to a maximum of 100%
Padding
Add padding to the top & bottom of the section. 0px is the minimum, and it steps up by 5 to a maximum of 30px
Add a bottom border
A 1px border will be added to the bottom
Logo
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
Image
The desktop logo will be displayed when the container is greater than 768px wide. It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp
Max logo width
The slider provides a minimum of 40px wide to a max of 400px with 5px steps in between
Mobile image
The desktop logo will be displayed when the container is less than 768px wide. It is recommended to use an image width double the 'Max logo width' setting to keep your logos sharp
Max mobile logo width
The slider provides a minimum of 40px wide to a max of 250px with 5px steps in between
Navigation
Customize the header menu with content blocks
Main menu
Choose the menu for your header. By default, the 'Main Menu' will be selected, but any menu can be created and used here
Font
The top level links can be displayed in 1 of 3 ways set in Theme Settings > Typography:
- Body
- Primary
- Secondary
Size
Set the menu link size with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px. NOTE: This does not affect the mega menu, promotion or contact bar
- Mobile: Screens less than 768px wide
- Desktop: Screens larger than 768px wide
Text size
Set the sub menu link size with the slider. 8px is the minimum, and it steps up by 1 to a maximum of 30px. NOTE: This does not affect the mega menu, promotion or contact bar
- Mobile: Screens less than 768px wide
- Desktop: Screens larger than 768px wide
Uppercase heading
Use uppercase fonts for the first level navigation links
Text color
Choose a custom color for the text
Text color hover
Choose a custom color for the text hover
Button text color *
Choose a custom color for the button text hover
Line color
Choose a custom color for the lines and borders
Slider color
Choose a custom color for the slider
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
Background/Overlay color opacity *
When a background color has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 1 to a maximum of 100%
Padding
Add padding to the top & bottom of the navigation. 5px is the minimum, and it steps up by 5 to a maximum of 30px
* NOTE: May not be available on all sections, blocks or templates