Header
Last updated
Last updated
Customize Theme → Sections → Header → Header
The header of your Shopify store plays a crucial role in providing navigation, branding, and essential information to your visitors. It's often the first element they encounter when landing on your site, making it essential to optimize for usability and aesthetics. In this section, we'll explore the various settings and customization options available for the header, empowering you to create a distinctive and user-friendly browsing experience for your customers.
The Settings overview provides an in-depth look at all the customization options available within the Header section, allowing you to tailor this critical component of your store to align with your brand identity and user preferences.
Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Make mega menu full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Make transparent on home page: Makes the Header transparent so all the text and icons are positioned over the Hero slideshow section block.
Enable sticky header: It enables or disables the setting for making the Header always visible on the top of the screen.
Logo width on desktop: Gives control over the logo width and, accordingly, the size for the desktop version. One of three possibilities is to be chosen: Small, Medium or Large.
Logo width on mobile: Gives control over the logo width and accordingly the size for the mobile version. One of three possibilities is to be chosen: Small, Medium or Large.
Logo position: Gives control over the logo position. One of three possibilities is to be chosen: Left, Center or Center with the menu below.
Color scheme: With that setting, the user can choose the color scheme of the Header. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Logo: The user can select the logo while uploading an image or SVG file.
Logo SVG Code: Here, the logo SVG code could be directly put in.
Menu: The main menu is to be chosen. The navigation menu can be created and managed through Shopify Admin menu → Online Store → Navigation.
Menu secondary: The user can choose a secondary menu on the Header section. Note: It is visible IF ONLY the Logo position is set up on 'Center with the menu below'.
Link level 1: Here, the user should write the exact Navigation submenu name so that submenu will appear as a mega menu. The navigation menu can be managed through Shopify Admin menu → Online Store → Navigation.
Card 'x': Up to 3 cards could be added.
Image: To activate the card, an image is to be chosen.
Heading: Enter a heading for the card.
Caption: Enter a caption for the card.
Link: A link can be added, so when the user clicks on the card heading, it will go to the desired link. Note: It's an optional setting. The card will appear even without providing a link.