Header

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

1. Header settings

General

Setting	Description
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

Navigation

Customize your website's main menu and choose to display uppercase text for the first menu item

To add, remove, or edit menus in your Shopify store, please refer to: Editing menus

Addons

Addons offer additional settings for the header, including features like search, currency selector, language selector, and more. Enable the relevant checkboxes to activate them.

Mobile settings

Setting	Description
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

Transparent

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

Setting	Description
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

2. Block settings

Mega menu with banner image

Setting	Description
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

Mega menu with product

Setting	Description
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

Mega menu with collection

Setting	Description
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%