Header
The header settings make it possible for you to fully customize the header of the theme. Upload your logo, mega menu, search bar etc.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
From the side menu, select Header. Configure the Header in the setting on the side with the following settings.
| Setting | Description |
|---|---|
Section width | Select the section width from the dropdown menu:
|
Customize width | Determines the width of the section when you choose "Customized width" option. Can be from 1000px to 1800px, increasing arithmetically of 50px (pixel). |
Layout style | Select the style of the header:
(Special style applies to the homepage: 'Beauty Blossom' for the specific logo position. When using this style, you cannot move the logo position) |
Show separator line | Displays a line at the bottom to visually separate this section from the other sections. |
Sticky header | Header shows on the screen:
|
Color scheme | Select a color scheme to set the text and background colors for the section |
Text size | The size of the menu lv-1 text:
|
Text transform | Select the font style transform of the menu lv-1:
|
Transparent header
| Setting | Description |
|---|---|
Enable transparent header on homepage | Enable/disable checkbox (Use the same dimensions as main logo) |
Logo image | Uses this logo on the pages which transparent header is enabled. (If no logo is set here it will use the default logo image instead) |
Saturation for header | Determines the saturation for header. Can be from 0% to 100%, in 10% arithmetic increments |
Text (Color) | Set the color for the text |
Saturation for sticky header | Determines the saturation for sticky header. Can be from 0% to 100%, in 10% arithmetic increments |
Logo
| Setting | Description |
|---|---|
Logo image | The logo for your store. Use the logo selector option to set up an image to use as a logo inside the Header. The recommended image dimensions are 130x30px (pixels). |
Custom logo width | Set a size for the logo image between 50px and 300px (pixels). |
Desktop logo position | Select the preferred logo position on the header from the dropdown menu:
(This setting only applies for Header layout style: Classic) |
Desktop block alignment | Aligns the logo within the block:
(This setting only applies for Header layout style: Classic) |
Navigation
| Setting | Description |
|---|---|
Menu | |
Desktop menu alignment | Select the desktop menu alignment on the header from the dropdown menu:
(Menu alignment is automatically aligned to left on mobile and when the logo position option of "Middle center" is selected) |
Grid between | Determine the gap between menu lv-1 in the section. |
Text transform | Select the font style transform of the menu lv-2 and menu lv-3:
|
Hover effect | Select the hover effect link from the dropdown menu:
|
Function group
| Setting | Description |
|---|---|
Use custom button | Enable/disable checkbox |
Button label | The text that displays on the button (Leave the label blank to hide the button) |
Button link | Set the link, for example the customer service page |
Icon style | Select the icon style on the header from the dropdown menu:
|
Enable search 'Desktop/Mobile' | Enable/disable checkbox |
Enable account 'Desktop/Mobile' | Enable/disable checkbox |
Enable cart 'Desktop/Mobile' | Enable/disable checkbox |
Enable wishlist 'Desktop/Mobile' | Enable/disable checkbox |
Country/region selector 'Desktop/Mobile' | 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. |
Language selector 'Desktop/Mobile' | 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. |
Desktop block alignment | Align the function group in the block with the Desktop screen:
|
Mobile layout
| Setting | Description |
|---|---|
Mobile logo position | Select the preferred mobile logo position on the header from the dropdown menu:
|
Section padding
| Setting | Description |
|---|---|
Top padding | Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Bottom padding | Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel). |
Last updated