Header Setup

Customize your store’s header to display important information, promote sales, and enhance navigation.

1. Header Section Settings

Customize your store’s header appearance, logo position, menu type, and color scheme to create a cohesive and user-friendly navigation experience.

Steps:

1. In your Shopify admin, go to Online Store > Customize to open the theme editor.

2. In the left sidebar, find the Header section.

3. Customize the following options:

   • Desktop logo position: Choose the position of your logo on desktop devices.

   • Menu: Select the primary navigation menu to display in the header (e.g., Main menu). You can click Change to select a different menu if needed.

   • Desktop menu type: Choose the style of the menu on desktop devices:

     • Dropdown: A basic dropdown menu.

     • Mega menu: A larger menu layout suitable for displaying multiple collections or links.

     • Drawer: A side-drawer style menu that slides out.

   • Text uppercase: Enable this option if you want the menu text to appear in uppercase letters.

   • Sticky header: Choose whether the header remains fixed at the top as users scroll. Options include None, On scroll up, Always.

   • Show separator line: Enable this option to add a horizontal line below the header, visually separating it from the rest of the page content.

   • Color scheme: Select a color scheme for the header to match your theme’s branding.

   • Menu color scheme: Select a color scheme specifically for the menu.

   • Social media icons: Enable Show social media icons to display social icons in the header.

   • Social and header icons color scheme: Choose a color scheme for social media and header icons.

   • Country/region selector: Enable this option to add a country or region selector to the header. To configure the available regions, go to market settings.

   • Language selector: Enable this option to add a language selector in the header. To configure languages, go to language settings

4. Once you’ve configured the header settings to your preference, click Save to apply the changes

2. Marquee Bar

The Marquee Bar allows you to add a scrolling text banner at the top of your store, ideal for highlighting promotions, free shipping, or special announcements.

Steps:

1. In your Shopify admin, go to Online Store > Customize to open the theme editor.

2. In the left sidebar, expand the Header section and select Marquee bar.

3. Click Add Marquee message to add a new message, or select the existing message to edit.

4. Customize the following settings:

   • Icon: Choose an icon from the dropdown to display alongside the message (e.g., box, star).

   • Text: Enter the message content (e.g., "Free Shipping on All Orders Over $50").

   • Link (optional): Paste a link or select a page to link the message for easy access to a promotional page.

5. To adjust the Marquee Bar appearance and behavior:

   • Color scheme: Select a color scheme that complements your theme.

   • Text uppercase: Enable if you want the text to display in uppercase.

   • Heading size: Set the size of the text (e.g., Small, Medium).

   • Scroll animation speed: Use the slider to adjust how fast the text scrolls.

   • Scroll direction: Choose whether the text scrolls Left or Right.

6. Click Save to apply all changes to the Marquee Bar.

3. Announcement Bar

The Announcement Bar is used to display static, high-priority messages across the top of your store, such as promotions, welcome messages, or shipping offers. You can also customize it to rotate multiple messages automatically.

Steps:

1. In your Shopify admin, go to Online Store > Customize to open the theme editor.

2. In the left sidebar, under Header, check if Announcement bar is already present:

   • If it’s not, click Add section, then search for and add Announcement bar.

3. Select Announcement bar to configure it:

   • Text: Enter the message you’d like to display (e.g., "Welcome to our store" or "Free Shipping on All Orders Over $50").

   • Link (optional): Add a URL or select a page or collection to link the message, allowing customers to click for more details.

4. Customize additional settings:

   • Color scheme: Choose a color scheme to match your store's theme.

   • Show separator line: Enable this option if you want to add a dividing line below the announcement for emphasis.

   • Text uppercase: Check this to display the message in uppercase text.

   • Social media icons: Enable this if you want to display social media icons within the announcement bar.

   • Announcements:

     • Auto-rotate announcements: Turn this on to rotate multiple announcement messages automatically.

     • Change every: Use the slider to set the rotation speed (e.g., every 5 seconds).

5. Click Save to apply all changes to the Announcement Bar.

4. Mega menu

Enhance your header’s Mega Menu functionality by adding specific blocks to showcase products or images within dropdown menus.

Steps:

1. In the Header section, click Add block to add a Mega Menu block.

2. Select the type of Mega Menu block you’d like to use: Mega menu products or Mega menu images.

3. For Mega menu products:

   • Enter the Parent menu item handle of the menu item under which this mega menu will display (e.g., "shop").

   • Choose up to four products to feature within this menu. This setup is ideal for showcasing specific products in the dropdown.

   • Enable Hide default menu if you prefer to hide the standard dropdown and display only the featured products.

4. For Mega menu images:

   • Enter the Parent menu item handle of the menu item under which this mega menu will display.

   • Select images to visually represent categories or products within the Mega Menu.

   • Add titles and descriptions for each image section to provide context.

   • Provide URLs to link each image or section to specific pages, collections, or products.

5. Arrange and customize the blocks as needed to create a visually rich and structured Mega Menu.

6. Once configured, click Save to apply your Mega Menu changes.