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.
Section width
Select the section width from the dropdown menu:
Page width
Customized width
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
Classic
(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:
None
On scroll up
Always
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:
XX-Small
X-Small
Small
Medium
Large
X-Large
XX-Large
XXX-Large
Text transform
Select the font style transform of the menu lv-1:
Lowercase
Capitalize
Uppercase
Transparent header
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
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:
Top left
Top center
Top center (Special)
Middle left
Middle center
Middle right
(This setting only applies for Header layout style: Classic)
Desktop block alignment
Aligns the logo within the block:
Left - Aligns the logo to the left of the block.
Center - Aligns the logo to the center of the block.
Right - Aligns the logo to the right of the block.
(This setting only applies for Header layout style: Classic)
Navigation
Menu
Desktop menu alignment
Select the desktop menu alignment on the header from the dropdown menu:
Left
Center
Right
(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:
Lowercase
Capitalize
Uppercase
Hover effect
Select the hover effect link from the dropdown menu:
Line
Dot
Border
Function group
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:
Default (icon)
Default (text)
Special
Classic
Modern
Dreamy
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:
Left
Center
Right
Mobile layout
Mobile logo position
Select the preferred mobile logo position on the header from the dropdown menu:
Center
Left
Section padding
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