Before you start
- From your Shopify admin, go to Online Store > Themes.
- Next to the theme you want to edit, click Customize.
- In the section list, click Header to open its settings.
Everything below applies inside this Header section.
Header Settings
| Settings | Description |
|---|---|
| Logo Position | On desktop, choose how your logo and menu are positioned in the header: Left — Classic layout with the logo on the left and menu beside it. Center — Logo centered, menu aligned to the left. Top — Logo on top, with the navigation menu placed below it. Menu Center — Logo on one side, with the navigation menu centered. |
| Logo | Upload your store logo through Section Settings > Logo Logo appears on all pages by default |
| Logo Width | Adjusts the desktop logo width for better branding visibility and responsive layout control. |
| Logo Width – Mobile | Allows separate logo sizing for mobile devices to improve responsiveness. |
| Main Menu | Select the Shopify navigation menu displayed inside the header section. |
| Menu Type | Controls how navigation links appear. Inline displays links directly in the header, while Drawer shows them inside a slide-out menu. |
| Mobile Menu Icon Position | Controls the placement of the mobile menu icon. Available positions are Left and Right. |
| Enable First Level Links Dropdown Arrow | Displays dropdown indicators beside menu items that contain submenus. |
| Enable Search | Enables the search icon and search functionality inside the header. Search box – Displays a visible search bar directly in the header. Search popup – Opens a popup drawer when the search icon is clicked. |
| Show cart icon | Enable/disable cart access (disabling removes cart functionality) |
| Show user icon | Toggle account/login icon visibility |
| Enable Bottom Line | Displays a bottom border line below the header section. |
| Enable Sticky Header | Keeps the header visible while scrolling through the page. |
| Sticky Mode | Controls sticky header behavior such as Always Visible, Visible on Scroll Up, or Visible on Scroll Down. |
| Transparent Header | Controls where the transparent header appears. Choose one or combine options depending on what your theme supports: Homepage only Product pages Collection pages Search result pages Entire website |
| Transparent Logo | Upload a separate logo version optimized for transparent header layouts. |
| Links and Text Color | Controls menu links and icon colors while the transparent header is enabled. |
| Margin Bottom | Controls spacing below the header section. |
| Color Scheme | Selects the overall header color scheme. |
| Menu Color | Controls navigation menu color styling independently from the header. |
| Transparent Header Text Color | Controls text and icon color when the transparent header is active. |
| Sticky Header Background | Controls sticky header background color during scroll. |
| Sticky Header Text Color | Controls sticky header text and icon colors during sticky mode. |
| Desktop Padding | Adjusts top and bottom spacing for desktop devices. |
| Tablet Padding | Adjusts top and bottom spacing for tablet devices. |
| Mobile Padding | Adjusts top and bottom spacing for mobile devices. |
Mega Menu Settings
| Settings | Description |
|---|---|
| Link Position in Main Menu | Assigns the mega menu content block to a specific main menu item. |
| Promotion Image | Upload promotional images displayed inside the mega menu dropdown. |
| Hover Image | Upload an alternate image displayed when hovering over the promotional image. |
| Image Ratio | Controls image aspect ratio such as Portrait, Landscape, or Square. |
| Image Link | Assigns a destination URL to the promotional image. |
| Title | Adds promotional image heading text inside the mega menu. |
| Heading Size | Controls the title heading size from H1 to H5. |
| Title Position | Controls whether the title appears at the top or bottom of the image block. |
| Text Content | Adds promotional description or marketing text below the title. |
| Product List | Displays selected featured products inside the mega menu dropdown. |
| Maximum Products to Show | Controls how many featured products appear in the mega menu. |
| Enable Quick Add | Enables quick add-to-cart functionality directly from the mega menu. |
| Button Style | Controls quick add button appearance such as Primary or Secondary style. |
| Button Type | Controls button appearance including Icon Only or Icon & Text styles. |
Promotion Image
Product List
Troubleshooting:
Mega menu not showing images or products? Confirm the mega menu block is correctly linked to a main menu item under Link Position in Main Menu — it won’t display until it’s assigned.
Transparent header not applying? Some page types may need transparency enabled individually — check each relevant toggle under Transparent Header rather than assuming “entire website” covers every page type.
Changes not showing on your store? Make sure you’re editing the theme currently published as your live theme, not a draft or duplicate.