Header

The header is the first section of your site that visitors see. It houses your logo, primary navigation, and key icons (search, account, cart). A well-configured header ensures brand consistency, easy navigation, and smooth user interaction—whether it’s static, sticky on scroll, or transparent over your hero image.

1. Spacing

Top Padding (9) Controls the space above the header content. Increasing this pushes the logo and menu down, creating breathing room.

Bottom Padding (9) Controls the space below the header content. Adjust as needed to balance header height.

2. Color Scheme

Scheme 1 Selects the overall palette used for header background, text, and icons. Schemes are predefined light, dark, or custom color sets.

3. Menu Configuration

  • Mega Menu Selection: Main menu Choose which menu in Shopify’s navigation will display full-width or multi-column dropdowns.

  • Capitalize First Letter Automatically converts the first character of each menu item to uppercase for consistent styling.

4. Appearance & Layout

Section Width: Fluid Container When set to “Fluid,” the header stretches edge to edge. A “Fixed” container would limit it to a centered column.

Logo Alignment: Align Left & Logo Alignment: Align Center Positions the logo at the left edge of the header. If you change this, remember to adjust the menu’s horizontal position below.

Logo Hover Animation: None Defines any hover effect on the logo. Disabled for transparent headers or set to a fade/move animation when using a solid background.

5. Header Bottom Border

  • Enable Bottom Border Toggles a thin line beneath the header.

  • Bottom Border Color: #E2E2E2 Sets the border’s color.

  • Hide Bottom Border on Homepage Optionally remove the border only on your front page for a cleaner hero display.

6. Navigation & Submenu Styling

  • Menu Links Font Size: 15 Controls main menu text size.

  • Menu Links Position (Horizontal): 300 Offsets the entire menu from the left (or right, depending on alignment).

  • Gap Between Menu Links: -5 Adjusts spacing between individual menu items; negative values bring them closer.

Submenu Links

  • Custom Colors Enabled Allows submenu text and hover colors to differ from the main menu.

  • Text Color: #5B5B5B / Hover Color: #1E1E1E

  • Font Weight: Normal / Font Size: 16

  • Underline on Hover / Right-move on Hover These effects give visual feedback when a user hovers over a dropdown link.

7. Dropdown Styling

  • Background Color: #FFFFFF Sets the panel’s fill color.

  • Border Radius: 22 Rounds the dropdown corners.

  • Animation Style: Fade In (or Fade In Down) Determines how the dropdown appears—either a simple fade or a drop-down effect.

8. Sticky & Transparent Headers

Sticky Header

  • Enable Sticky Header Keeps the header fixed at the top as you scroll.

  • Always Sticky

  • Sticky Behavior: Stick on Scroll Up Header hides when scrolling down and reappears when you scroll up.

Transparent Header

  • Enable on Desktop / Mobile Makes the header background see-through so underlying content shows through.

  • Transparent Menu Text Color: #FFFFFF Ensures links and icons remain visible over darker backgrounds.

  • Logo Transparent Width: 100 & Horizontal Position: 0 Adjusts logo size and placement specifically for the transparent state.

  • Menu Toggle Color (Transparent): #DFDFDF Colors the mobile menu icon when the header is transparent.

9. Menu Labels & Badges

Allows adding badges (Hot, New, Discount) next to menu items:

  • Hot – Text “HOT,” white text on #C94039

  • Fresh (New) – Text “NEW,” white text on #516CF4

  • Discount – Custom text (e.g. “-70%”), white text on #D0473E

These highlight special categories or promotions.

10. Mobile Menu Settings

  • Enable Link Redirection Tapping a parent menu item opens its link (instead of just expanding submenu).

Styling

  • Toggle Arrow Color: #2F2F2F

  • Close Icon Color: #171717

Navigation Buttons

  • Border Radius: 33 | Min Height: 34 | Min Width: 100 | Font Size: 16

Login Button

  • BG: #2488FC, Text: #EFEFEF

  • Hover BG: #000000, Hover Text: #EFEFEF

Signup Button

  • BG: #000000, Text: #F4F4F4

  • Hover BG: #EAEAEA, Hover Text: #000000

Logo & Container

  • Logo Size: 110

  • Menu Width: 80%

  • Logo Area Gradient: #F5F5F5 → #F8F8F8

11. Search Popup

  • Trending Search Font Size: 29

  • Product Price Font Size: 17

  • Price Top Position: 10

Best Selling Section Title

  • Desktop & Mobile: “Best Selling This Week”

12. Standard Bar & “View All” Buttons

  • Section Title: “Bestselling This Week” (Text Color: #474747)

View All Button

  • BG: #292929, Text: #FFFFFF, Radius: 8

  • Hover BG: #484848, Hover Text: #FFFFFF, Hover Radius: 7

13. Additional Icons

Toggle visibility of these elements in the header:

  • Account Icon

  • Search Icon

  • Wishlist Icon

  • Shopping Cart

  • Contact Us Icon

PreviousTerms and Conditions SettingsNextAnnouncement Bar Basic

Last updated