Skip to main content

How to configure the Header - Desktop and Mobile

This guide will outline all the possible settings for the header sections, how they work, and any additional functionality you need to be aware of.

Some things to note

  • The theme editor can be slow to load content at times. Please wait for the progress bar within the theme to finish loading before making any changes.
  • After any setting change, don’t forget to hit save to apply your changes.

Menus currently In Use

Mega Menu Settings

  • Layout

    • Full Width Header? - determines if the header should render as the full width of the page or have a fixed width.\

  • Styling

    • Transparent Header at Homepage? - Hides the second menu on the homepage until you scroll down a bit\

  • Menu

    • Select Menu - The bottom row of menu items
    • Select Menu - An option for a third set of menus that displays inline with the second menu.
    • Select Top Menu - The top row of menu items

  • Cart Button

    • Select Button Action - Determines if cart should be a drawer or just link to a cart page\

  • Top Bar

    • Enabled? - determines if bar should be visible or not
    • Contact No. - the phone number that displays to the right of the phone icon
    • Open Time - the text content that displays to the right of the contact number
    • Topbar center text - the text content contained within the top bar\

  • Top Bar Modal

    • Enabled? - When enabled, the top bar content become a clickable link that triggers a modal open.
    • Shipping Modal Text - The text content within the modal\

  • Top Bar

    • Topbar right Text - displays text in the top row on the far right edge of the screen. Forces top bar to be left justified
    • Topbar right Text For Non Pro Users - displays text in the top row on the far right edge of the screen for logged in users ( non pro ). Forces top bar to be left justified.
    • Topbar right Text For Pro Users - displays text in the top row on the far right edge of the screen for logged in users ( pro ). Forces top bar to be left justified.
    • Background Color - sets the background color of the top header
    • Text Color = sets the font color of the top header
    • Minimum height - adjusts the min-height of the top header.
    • Font Size - adjusts the font size of the top bar\

  • New tags

    • New Span - set a set of collections to compare to the current menu items. if that collection is found in our menu, it is marked as new. (Ie. Home Improvement -> Tools & Hardware -> General Hardware is in mega menu and the collection for general hardware has been added to setting so we see “new”)


Theme Settings Related to the header

  • Select Main Logo - set the Shopify supported version of the header image
  • Select Main Logo SVG - set to url of an svg uploaded to the file manager of shopify. Used for header logo
  • Select Logo for dark backgrounds - When dark mode is toggled on, this logo is used instead of normal logo ( defaults to main logo if not set )
  • Logo width - the maximum width the logo can have in the header
  • Sticky Header? - Determines if the header follows the content as it is scroller or stays at the top of the page
  • Enable Wishlist? - Determines if the wishlist app is enabled for use. Affects the output of the heart icon in the header
  • Enable Currency Selector? - adds a currency selector next to the cart icon in the header


Mobile Navigation Section
&#xNAN;NOTE: To navigate to submenus, don’t click on the menu title. You must click on the arrow button to enter menu layer

  • Logo

    • Show Logo? - determines if a logo should be shown in the menu content
    • Select Image - select a header image for the mobile flyout menu
    • Logo Width - set the max-width of the image selected for the logo\

  • Menus ( IMPORTANT - The first menu should not be a mega menu. This can cause unexpected behavior )

    • Select Main Menu - The upper column of menu items ( white background )
    • Select Secondary Menu - The lower column of menu items ( grey background )\

  • Social Networks

    • Show Socials - determines if social icons should be visible
    • Facebook - determines if Facebook icon should show
    • Twitter - determines if Twitter icon should show
    • Instagram - determines if Instagram icon should show
    • Use Legacy Menu - Toggle this on when you want to use the uncustomized mobile menu that the theme provided by default
    • Contact No - The contact number that displays in the footer of the flyout
    • Open Time - The hours of the business that displays next to contact no in the footer