Header Setup

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

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.

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.

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.