Skip to main content

Header

This section configures the top navigation bar, including logo, cart icon, and currency/language selectors.

Section Settings​

Main Settings​

Logos​

  • Height (Desktop): Logo height on desktop (in px).
  • Height (Mobile): Logo height on mobile (in px).
  • Text color: Text color for store name (used when no logo is uploaded).
  • Text size: Font size for store name.
  • Main menu: Select the Shopify menu handle to use as the primary navigation.
  • Style: Apply a navbar styling scheme from Theme Settings → Style Schemes → Navbar Style Schema.
  • Enable desktop navigation below: Move desktop navigation to a second row beneath the logo.
  • Alignment: Horizontal alignment of desktop navigation (left, center, right).
  • Highlight link: Enter the exact name of a top-level menu item to display a highlight dot.
  • Highlight color schema: Color of the highlight indicator.
  • Dropdown style: Styling for submenu dropdowns, from Theme Settings → Style Schemes → Dropdown Style Schema.
  • Mobile show: Off-canvas mobile menu direction:
    • Left To Right
    • Right To Left
    • Top To Bottom
    • Bottom To Top
  • Enable featured products below mobile navigation: Show a product carousel under the mobile menu.

Icons Navbar​

Cart Icon​

  • Show cart icon: Toggle visibility of the cart icon.
  • Show cart quantity numbers: Display item count badge on the cart icon.
  • Cart icon: Choose icon style: Bag, Basket, or Cart.

Search Icon​

  • Enable search: Show the search icon.

    ⚠️ Note: When enabled, ensure the [Modal top bar] section is present in your theme—otherwise, the search modal won’t open.

Social Media Icons​

  • Icons: Enter social platform codes (comma-separated). Supported: 
    facebook, x, twitter, instagram, linkedin, pinterest, tiktok, whatsapp,  
    youtube, vimeo, tumblr, twitch, threads, discord, mastodon, snapchat, spotify, wechat, custom_icon
  • Size: Icon size (in px or relative units).
  • Padding: Internal spacing around each icon (in px).
  • Show labels: Display platform names below icons.
  • Labels in second line: Force labels to appear on a new line.
  • Show border: Add a border around each icon+label group.
  • Border radius: Corner roundness of the border.
  • Border padding: Spacing between border and inner content (in px).

Country/Currency/Language​

Blocks​

The Header section supports two optional blocks:

1. Mega Navigation​

Create expansive dropdown menus for top-level navigation items.

Main Settings​

  • Bind main menu link

  • Heading (optional top banner in Mega menu)

    • Heading: Title text
    • Tag: HTML tag (<h1>–<h6> or <div>)
    • Size: Font size from typography variables
    • Color schema: Text color from theme variables
    • Alignment: Text alignment

  • Text (optional description below heading)

    • Text: Rich text content
    • Size, Color schema, Alignment: Same as above

  • Sub navigation

    • Style: Layout type—tabs-horizontal, tabs-vertical, or grid
    • Tabs style: nav-tabs (standard) or nav-pills (capsule)
    • Number per row: Columns in grid layout

  • Featured images

    • Enable featured medias: Show media (image/video) in Mega menu
    • Width: Media width as percentage
    • Order: Position—left or right

Supported Child Blocks​

All child blocks share common settings:

  • Heading: Tab or grid title
  • Tag: HTML tag for heading
  • Url: Link destination

Specific block types:

Mega products​

Displays product cards. Settings follow Blocks → Subblocks of Specific Block → Product Cards.

Mega article​

Renders a single blog article. Select from your published posts.

Mega blog​

Shows recent articles from a selected blog.

Mega collection​

Displays a product collection. Configure via Blocks → Specific Page Block → List Collections Content.

Pulls structure from a Shopify admin → Content → Menus.

Mega page​

Embeds content from a selected page.

Custom media + content block.

A static block that appears below the mobile off-canvas menu.