Header
Last updated
Last updated
The Header on an e-commerce website enhances user experience by providing easy navigation, reinforcing branding, enabling quick search, displaying cart previews, offering contact information, showcasing promotions, and ensuring a consistent, user-friendly design across all pages
Section width
3 options for container
Stretch width: span the section width regardless of screen size.
Fix width: depends on your page content width in Theme settings -> Layout.
Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
Color scheme
Select colors from Theme settings -> Colors
Desktop logo position
2 options position logo desktop
Logo left, menu center
Logo center, menu left
Logo image
Upload your store's logo
Desktop logo width
Customize the size of the logo on desktop screens
Mobile logo width
Customize the size of the logo on mobile screens
Sticky header
3 options sticky
None: Do not display the sticky header
On scroll up: Display only on scroll up
Always: Always display
Customize your website's main menu and choose to display uppercase text for the first menu item
Addons offer additional settings for the header, including features like search, currency selector, language selector, and more. Enable the relevant checkboxes to activate them.
Media type
3 options for media type
Collection: Customize the display of collections
Banner image: Display the desired banner image
None: Do not display
Collection
Select the collection to display when you choose the "collection" type
Banner image
Choose the image to display when you select the "Banner image" type
Banner link
Customize the link to the desired page when you select the "Banner image" type
Show border
Display border
Title
Customize options for the title text
A transparent header is a see-through top section on a website or mobile app, allowing the content or background to show through instead of having a solid color background
Transparent on home page
Display as transparent only on the homepage
Logo image
Logo displayed on the transparent header
Text and icon
Customize the color of text and icons in transparent header format
Menu item
Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters
Banner position
2 options for banner position
Left
Right
Desktop menu columns
Choose the number of columns from 2 to 5
Banner image
Choose the image to display
Banner image width
Customize the size of the banner
Banner link
Customize the link to the desired page
Menu item
Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters
Desktop menu columns
Choose the number of columns from 2 to 5
Product
Select the products you want to display
Menu item
Enter the name of the level 1 menu to display the mega menu dropdown. Please distinguish between uppercase and lowercase letters
Desktop menu columns
Choose the number of columns from 2 to 5
Collection
Select the products you want to display
Collection width
Customize the size of the collection if choosing from 5 collections will automatically set the collection width to 100%
To add, remove, or edit menus in your Shopify store, please refer to:
