Maximize - Header
Maximize - Header
Maximize - Header
1. What is the Categories Menu? The Categories Menu is a mega menu block that presents your store's category navigation as a vertical drawer panel. Clicking the trigger in the header slides open a side drawer displaying a multi-level category tree - up to 3 levels deep - with optional collection images at each level. Unlike the Drawer menu (which is a standalone section fixed beside the logo), the Categories menu is a block that lives inside the Header section's megamenu row. It can be: Fixed to either end of the megamenu row (left or right) - so it stays in place regardless of which other mega menu items are open. This is the default behavior. Positioned inline within the megamenu - it falls into the natural order of blocks inside the Header section, sitting alongside other menu blocks. 2. When to use the Categories Menu? Your store has a large number of product categories that would overwhelm a standard horizontal navigation bar. You want an always-accessible category overview that coexists alongside your other mega menu blocks without competing for horizontal space. You want shoppers to be able to drill down through multiple category levels quickly using a familiar side drawer UI. You need to display collection images alongside category links to help customers navigate visually. 3. How to set it up? To make a Categories Menu fully yours, there are 3 processes to go through: Process 1. 🤔 Organize menu items in the Shopify admin STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click "Add menu" to build a new one from scratch STEP 3: Fill in the Name box to give your menu a name (this title won't show up on the site). STEP 4: Structure your menu: To add a menu item, click "Add menu item", enter its name, and assign a link (e.g., collection, page, product, or URL). To create nested levels, drag an item under another by holding the dot icon. The Categories menu supports up to 4 levels. STEP 5: Click "Save" when done. 🔖 Menu hierarchy example: Process 2. 🤔 Add and assign the Categories Menu block in the Theme Editor STEP 1: Go to Online Store > Themes > Customize. STEP 2: In the Theme Editor, under Header, click the Header section. STEP 3: Click "Add block", then select Categories menu. ⚠️ Note: Only 1 Categories menu block can be added per header. STEP 4: In the Menu item field, enter a label to display as text in the header navigation row (e.g., "Shop by Category"). This field is optional — if left blank, the trigger will display using the icon set in Trigger icon only. ⚠️ Note: At least one of Menu item (text) or Trigger icon (icon) should be configured for the trigger to appear meaningfully in the header. STEP 5: Find the Menu setting, click "Select", and choose the menu you created in Process 1. STEP 6: Click "Save" when done. Process 3. 🤔 Customize the Categories Menu You've finished the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To control where the Categories Menu appears in the header row: ✨ To pin it to the left or right end of the megamenu row (recommended): Go to Header section > Categories menu block > Trigger group > make sure Keep drawer menu fixed (Desktop) is toggled ON (this is the default). Then set Menu position to Left or Right to choose which end of the megamenu row the block is pinned to. When fixed, the Categories Menu trigger stays in place even while other mega menu items are open - it does not shift or overlap with the rest of the navigation. Left side: Right side: ✨ To place it inline within the megamenu: Go to Header section > Categories menu block > Trigger group > toggle Keep drawer menu fixed (Desktop) OFF. The block will now follow its position in the block order within the Header section - sitting alongside other menu blocks (Column menu, Tabbed menu, etc.) in the standard megamenu flow. ⚠️ Note: The Menu position (Left/Right) setting is only available when Keep drawer menu fixed (Desktop) is ON. 📌 3.2. To show or hide the Categories Menu on mobile: Go to Header section > Categories menu block > Visibility group > toggle Enable on mobile. ON: The category drawer is accessible on mobile devices. OFF (default): The block is hidden on mobile - only visible on desktop. 📌 3.3. To change the trigger icon: Go to Header section > Categories menu block > Trigger group > use the Trigger icon dropdown. Choose from: None - No icon; only the menu item label is shown. Hamburger - A standard three-line hamburger icon. Menu bar (default) - A menu bar icon displayed next to the label. Custom - Upload your own icon image. When selected, a Custom icon image picker appears below. 📌 3.4. To customize menu item colors: Go to Header section > Categories menu block > Menu item style group. From here you can set: Item background (light) / Item background (dark): Background color of each item in the drawer for light and dark mode. Default is Transparent. Item text (light) / Item text (dark): Text color of each item for light and dark mode. Default is Transparent (inherits from the active color scheme). ⚠️ Note: Leaving a color as Transparent will fall back to the text color defined in your theme's active color scheme. 📌 3.5. To show collection images for Level 2 menu items: ✨ To show/hide images at Level 2: Go to Header section > Categories menu block > Menu – Level 2 group > use the Show images for level 2 menu dropdown: None - No images shown. Featured image (default) - Shows the main collection image set in Shopify admin. First product image (for collection) - Shows the first product image in that collection (displays a placeholder if none exists). Collection image metafield - Shows an image from a custom metafield. See the next use case for setup steps. ⚠️ Note: This setting only applies to menu items that link to collections. ✨ To show collection images using a metafield at Level 2: ✍️ Why use metafield for collection images? You want to show a custom-designed image for the collection in the menu without changing its featured image in the admin. You want to show higher-resolution images in the menu. ✍️ How to do it? STEP 1: Create a collection metafield in Shopify admin: Go to Settings > Metafields and Metaobjects > Collections > Add definition. Give it a name, set type to File, and click Save. STEP 2: Assign an image to each collection: Go to Products > Collections, open a collection, scroll to Metafields, and upload an image in your newly created field. Click Save. STEP 3: Connect the metafield in the Theme Editor: Go to Header section > Categories menu block > Menu – Level 2 group. Set Show images for level 2 menu to Collection image metafield. In the Level 2 image metafield field, enter the key of your metafield - use only the part after custom. (e.g., enter collection_image if your full key is custom.collection_image). ⚠️ Note: The Level 2 image metafield field only appears when Show images for level 2 menu is set to Collection image metafield. If left blank, no image will be shown. ⚠️ Note (v1.6.0 update): When Level 2 collection images are enabled, they are now automatically hyperlinked to their corresponding collection pages - no additional setup needed. Clicking an image in the menu will redirect customers to that collection. These images will also follow the Image hover animation configured in Theme Settings > Animation. 📌 3.6. To show collection images and adjust the layout for Level 3 menu items: ✨ To show/hide images at Level 3: Go to Header section > Categories menu block > Menu – Level 3 group > use the Show images for level 3 menu dropdown. Options and metafield setup are the same as Level 2 - see section 3.5 above for the metafield guide. ⚠️ Note (v1.6.0 update): When Level 3 collection images are enabled, they are now automatically hyperlinked to their corresponding collection pages - no additional setup needed. Clicking an image in the menu will redirect customers to that collection. These images will also follow the Image hover animation configured in Theme Settings > Animation. ✨ To change how images are positioned at Level 3: Go to Header section > Categories menu block > Menu – Level 3 group > use Image position (visible when images are enabled): Above menu - The collection image appears above the list of Level 3 links. Next to menu - The collection image appears beside the menu links. ✨ To change the image ratio at Level 3: Go to Header section > Categories menu block > Menu – Level 3 group > choose your preferred Level 3 image ratio (visible when images are enabled): Natural, Square (1:1), Landscape (4:3) (default), Wide (16:9), Portrait (2:3), Standard (3:4). ✨ To control the number of columns at Level 3 on desktop: Go to Header section > Categories menu block > Menu – Level 3 group > drag the Max level 3 columns (Desktop) slider. Range: 1–4. Default: 4. This controls the maximum number of Level 3 items per row on desktop. ✨ To adjust the gap between Level 3 columns on desktop: Go to Header section > Categories menu block > Menu – Level 3 group > drag the Level 3 column gap (Desktop) slider. Range: 1–100px. Default: 20px. 4. Change Logs 🚩 Version 1.6.0: Collection images at Level 2 and Level 3 are now automatically hyperlinked to their corresponding collection pages and follow the Image hover animation setting in Theme Settings > Animation. 🚩 Version 1.5.0: Categories menu block first introduced as a new block option in the Header section. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is Tree Menu? The Tree Menu is a mega menu layout that displays categories and sub-categories in a clear, hierarchical structure (up to 3 levels). This menu is designed to help customers navigate complex catalogs with ease. 2. When to use Tree menu? Your categories have multiple sub-categories (2 levels or more). You want to display related products or collections together in a structured way. Your catalog is too complex for a simple dropdown menu. Customers need to browse by type, use case, or product family. 3. How to set it up? To make a Tree menu fully yours, there are 3 processes to go through: Process 1. 🤔 Organize menu items in the Shopify admin. STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click "Add menu" to build a new one from scratch. STEP 3: Fill in the Name box to give your menu a name (This title won't show up on the site) STEP 4: Structure your menu: To add a menu item, click "Add menu" item, enter its name, and assign a link to the collections. To create a nested menu, click "Add menu" item again, then drag it under another item by holding the dot icon. STEP 5: Click "Save" when done. ⚠️ Note: Only the 1st & 2nd levels of the menu in your Shopify Admin will be shown outside the store. Process 2. 🤔 Assign the created menu to the Tree menu block STEP 1: Go to Online Store > Themes > "Customize". STEP 2: In the Theme Editor, under Header, find the Header section. STEP 3: Click "Add block", then tap on the Tree menu. STEP 4: 📌 Important step: Give the main menu a title Enter the menu title in the Menu Item field. ⚠️Note: You must enter this field for your menu to appear on the site. STEP 5: Still in the Tree menu block, find the Menu setting, click "Select", then find and choose the menu you created as guided in process 1. STEP 6: Click "Save" when done. Process 3. 🤔 Customize the Tree menu You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Tree menu block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To add a label to the menu: In the Theme Editor, go to Header section > Tree menu block > Scroll down and find the Menu label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. 📌 3.3. To make the menu visible on mobile: In the Theme Editor, go to Header section > Tree menu block > Visibility settings group > Toggle Enable on mobile ON. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Blog Menu? The Blog Menu is a visually rich mega menu style that pulls in blog posts with thumbnails, titles, and short descriptions. It helps drive traffic to your educational or inspirational content straight from your main navigation. 2. When to use the Blog Menu? You publish regular blog content (e.g., tips, guides, product use cases). You want to highlight educational content directly in your store's navigation. You want to boost engagement and SEO through increased blog visibility. 3. What are the differences between Blog and Blog posts? To better understand the guide, let's distinguish: 💡 Blog: A collection of many blog posts. 💡 Blog posts: Individual articles you write and publish on your blog(s). Each post typically consists of a title, content (text, images, videos), and other elements like tags or categories. 4. How to set it up? To make a Blog menu fully yours, there are 3 processes to go through: Process 1. 🤔 Prepare your Blog in the Shopify admin. STEP 1: In your Shopify admin, go to Content > Blog posts. STEP 2: On the top right, select the "Manage blogs" button, and click "Add blog". STEP 3: Give your new blog a Title, and click Save. (For example: Featured articles) STEP 4: One more time, click on the Blog posts tab under Content. Now, find the blog posts you want to show on the menu and click to open them. STEP 5: Scroll down to the Organization section, under Blog, and choose the right blog name that you just created. STEP 6: Click "Save" when done. Process 2. 🤔 Assign the created menu to the Blog Menu block STEP 1: Go to Online Store > Themes > "Customize". STEP 2: In the Theme Editor, under Header, find the Header section. STEP 3: Click "Add block", then tap on the Blog menu. STEP 4: 📌 Important step: Give the main menu a title: Enter the menu title in the Menu Item field. ⚠️ Note: You must enter this field for your menu to appear on the site. STEP 5: Still in the Blog menu block, find the Blog setting, click "Select", then find and choose the blog you created as guided in process 1. STEP 6: Click "Save" when done. Process 3. 🤔 Customize the Blog menu You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Blog menu block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To adjust the numbers of rows/columns: In the Theme Editor, go to Header section > Blog menu block > Scroll down to find the part that says Number of columns and Number of rows → Drag to adjust or enter a number. 📌 3.3. To adjust the blog post images shown on the menu: ✨ To show/hide featured images of the blog: In the Theme Editor, go to Header section > Blog menu block > Scroll down to find the Blog post setting group > Turn on Show featured image ✨ To change the featured images ratio on the menu: In the Theme Editor, go to Header section > Blog menu block > Scroll down to find the Blog post setting group > Choose the Image ratio. 📌 3.4. To show an excerpt for the blog right on the menu: In the Theme Editor, go to Header section > Blog menu block > Scroll down to find the Blog post setting group > Turn on Show excerpt. 📌 3.5. To add a label to the menu: In the Theme Editor, go to Header section > Blog menu block > Scroll down and find the Menu Label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Drawer menu? The Drawer Menu is a mega menu layout that displays top-level menu items as horizontal tabs. Each tab contains a dedicated panel below with columns of lower-level menu items and optional media. This menu embodies Maximize's core idea in utilizing both horizontal and vertical header space, thus being perfect for megastores with multiple categories and subcategories. 2. When to use the Drawer Menu? You want customers to browse and shop without leaving the menu. Your product catalog has clear subcategories (e.g., accessories, gear types). You want to display more collections or provide detailed navigation of your store. 3. How to set it up? To make a Drawer menu fully yours, there are 3 processes to go through: Process 1. 🤔 Organize menu items in the Shopify admin STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click "Add menu" to build a new one from scratch STEP 3: Fill in the Name box to give your menu a name (this title won't show up on the site) STEP 4: Structure your menu: To add a menu item, click "Add menu item", enter its name, and assign a link (e.g., page, collection, product, or URL) To create a nested menu, click "Add menu item" again, then drag it under another item by holding the dot icon. (⚠️ Note: Each level 2 nested menu item must link to a Product. 🚨) STEP 5: Click "Save" when done. 🔖 Menu hierarchy example: Process 2. 🤔 Assign the created menu to the Drawer Menu section STEP 1: Go to Online Store > Themes > Customize. STEP 2: In the Theme Editor, under Header, click "Add section", then select Drawer menu. STEP 3: In the Drawer menu section, find the Drawer menu setting on the right-side panel, click "Select", then find and choose the menu you created as guided in process 1. STEP 4: Click "Save" when done. Process 3. 🤔 Customize the Drawer Menu You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To customize the whole main menu setting: ✨ To give the main menu a title: Go to Header group > Drawer menu section > Find the Drawer menu section on the right panel. From here, you can: STEP 1: Enter the desktop menu title into the Desktop drawer menu title field. STEP 2: Enter the mobile menu title into the Mobile drawer menu title field. ⚠️Note: The drawer menu does not need a title to appear on the site. ✨ To open the first level of the menu: Still in the Drawer menu section, locate the Desktop menu selection radio button and choose how the first level of the menu would be opened: On hover (default option): Upon hovering over the first level menu item. On click: Upon clicking on the first level menu item. ✨ To change how the drawer menu is displayed on the header Still in the Drawer menu section, locate the Drawer menu style radio button and select whether the drawer menu icon on the header is displayed as Primary or Secondary. ✨ To change the spacing between menu items Still in the Drawer menu section, adjust the Desktop block spacing (0-100px) to determine the space between the second level menu columns and the promotional banner. ✨ To manage the display of the drawer menu on mobile Go to Header group > Drawer menu section > Find the Collection Images section on the right panel. Disable/Enable the Enable drawer menu on mobile option to hide/display the drawer menu on mobile. 📌 3.2. To show collection images on the menu ✨ To show/ hide images for the first level of the menu: Go to Header group > Drawer menu section > Scroll down and find the Collection images section on the right panel. In the Show 1st-level menu images setting, you will see 4 options: None: Show no images. Featured images: Show the main image you use for that collection in the admin. First product image: Show the image of the first product in that collection. Collection image metafield: Show the image using metafield, learn more in the next use case "✨ To show collection images on the menu using metafield" ⚠️ Note: This setting only applies to the menus that link to collections. ✨ To show collection images on the menu using metafield: ✍️ Why would you need to use metafield for collection images? You want to show a designed image for the collection on the menu, without changing the featured images of that collection. You want to show higher-resolution images on the menu. ✍️ How to do it? STEP 1: Create a collection metafield: In Shopify admin, go to Settings> Custom data > Collection > Add definition. Give your metafield a name, and choose type as File. Click Save. STEP 2: Assign a value for the collection metafield: Go back to Shopify admin, and click on the Products > Collection tab. Choose a collection, and scroll down to Metafields. Upload an image in the newly created collection metafield. Click Save. STEP 3: Set up in Theme Editor: In Theme Editor (Visit it by clicking on Online store > Themes > Customize) Click on Header > Drawer menu > scroll to Collection images setting group: For Show 1st-level menu images and/or Show 2nd-level menu images, select Collection image metafield - based on which menu level you want to show images for. For the Collection image metafield field: Copy the text after "custom." of the metafield's Namespace and key. → Paste to this Collection image metafield field. Click Save. ✨ To show/ hide images for the 1st-level menus: Go to Header group > Drawer menu section > Scroll down and find the Collection images section on the right panel > choose the Show 2nd-level collection image setting to be None. ✨ Change the image's position for 2nd-level menus: Still in the Drawer menu section, find the Collection images section on the right panel > choose the Show second-level collection image setting to be Next to menu or Above menu. ✨ Change the image's ratio for 2nd-level menus: Still in the Drawer menu section, find the Collection images section on the right panel > choose the 2nd-level image ratio. ⚠️ Note (v1.6.0 update): When collection images are enabled at the 1st or 2nd level, they are now automatically hyperlinked to their corresponding collection pages — no additional setup needed. Clicking an image in the menu will redirect customers to that collection. These images will also follow the Image hover animation configured in Theme Settings > Animation. 📌 3.3. To customize a link in the 2nd-level menu: ✨ To set up a Drawer menu block in correspondence to your 2nd-level menu: ✍️ Why would you need to create a Drawer menu block? As the drawer menu may contain multiple 2nd-level menus, you may want to set up those menu's contents independently from each other. In particular, the link and promotion images can be set up differently for each 2nd-level menu ✍️ How to do it? STEP 1: Create a Drawer menu block: Go to Header group > Drawer menu section > Click "Add Block". STEP 2: Assign the newly created block a title: Click on the newly created Drawer menu block. Find the Drawer Menu setting group on the right panel. Fill in the Menu Item field with the 2nd-level menu title that you want to set up contents for. Click Save. ✨ To customize a link in the 2nd-level menu Go to Header group > Drawer menu section > Drawer menu block > find the Drawer Menu setting group on the right panel: Fill the "View all" link field with the link that you want to redirect customers to. Fill the "View all" link title field with the title that the customers see ('View all' by default) The added link is shown on the top right corner of the 2nd-level menu. 📌 3.4. To add & adjust promotion images on the 2nd-level menu: 3.4.1. To add promotion images to the 2nd-level menu: ⚠️ Note: You can add up to 2 promotion images. This guide covers Promotion 1 setting group - to add a second, repeat the same steps for Promotion 2. ✨ To set up a Drawer menu block in correspondence to your 2nd-level menu: Follow the same instructions in part 3.3. ✨ Upload an image as the promotion: Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotion 1 section on the right panel: Upload an image to the Image setting. (Optional) Upload a separate one made for Mobile image. ✨Add & adjust heading & text for the promotion: Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotion 1 section on the right panel: Enter the Heading and Text. Adjust the Text size, Text alignment. Change the Text color in light and dark version. ✨Make the text appear on the promotion images (text overlay). Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotion 1 section on the right panel: Toggle on Text overlay setting. Drag to adjust the Overlay opacity. 3.4.2. To adjust the promotion images' overall look: ✨To change the position on a large screen: Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotions section on the right panel > choose Position on large screen to be Left, Right or Bottom. ✨To change the promotion images layout to vertical or horizontal Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotions section on the right panel > choose Layout on large screens to be Horizontal or Vertical. ✨To change the promotion images' height: Go to Drawer menu section > Drawer menu block > Scroll down and find the Promotions section on the right panel: On desktop 🖥️: Drag the Desktop image height On mobile 📱: Drag the Mobile image height 4. Change Logs 🚩 Version 1.6.0: Collection images at the 1st and 2nd level are now automatically hyperlinked to their corresponding collection pages and follow the Image hover animation setting in Theme Settings > Animation. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Banner Menu? A Banner Menu is a mega menu layout where dropdown items are organized into multiple Banners. It's ideal for showcasing categories like collections, product types, or promotions in a visually clean structure. 2. When to use the Banner Menu? Grab attention with bold visuals: Ideal for showcasing seasonal campaigns, product highlights, or brand stories using large, clickable images. Turn your menu into a mini promotion area: Pair banners with text and call-to-action buttons to drive traffic directly from the navigation. Balance aesthetics and utility: Great for lifestyle or fashion brands that want their menu to feel more like a curated lookbook. Add a premium or editorial feel to your store: Use it to elevate your brand perception through strong imagery and minimal link clutter. 3. How to set it up? To make a Banner menu fully yours, there are 3 processes to go through: Process 1. 🤔 Give the main menu a title STEP 1: Go to Online Store > Themes > "Customize". STEP 2: In the Theme Editor, under Header, find the Header section. STEP 3: Click "Add block", then tap on the Banner menu. STEP 4: 📌 Important step: Give the main menu a title: Enter the menu title in the Menu Item field. ⚠️ Note: You must enter this field for your menu to appear on the site. STEP 5: Click "Save" when done. Process 2. 🤔 Add banner images STEP 1: Still in the Banner menu setting panel, find the Banner 1 setting group. STEP 2: In the Image setting, click "Select" to assign an image as the banner. STEP 3: Add the content & adjust the look: Add the content to the banner, such as Heading, Text, and Button label. Adjust the Text size, Text alignment, and Button style. STEP 4: (Optional) Make the text content appear on top of the banner images: In the Banner menu block settings, toggle on Enable text overlay. When enabled, the Heading, Text, and Button of all banners will be displayed overlaid on their images. When disabled, this content appears below the images. To control the darkness of the overlay background, drag the Overlay opacity slider inside each individual banner group. STEP 5: Click "Save" when done. ⚠️ Note: You can add up to 5 banners. This guide covers the Banner 1 setting group — to add more, repeat the same steps for Banner 2, 3, 4, and 5. Process 3. 🤔 Customize the Banner menu You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Banner menu block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To add a label to the menu: In the Theme Editor, go to Header section > Banner menu block > Scroll down and find the Menu Label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. 📌 3.3. To change the text color for the banner menu: In the Theme Editor, go to Theme Settings tab > click on Schemes > scroll to Header, and you can change the Text color. 📌 3.4. To make a banner image clickable (add a link): In the Theme Editor, go to Header section > Banner menu block > scroll down to the banner group you want to update (e.g., Banner 1). From here: STEP 1: In the Image link field, enter or search for the URL you want the banner image to link to. STEP 2: (Optional) Toggle on Open this link in a new tab if you want the link to open in a new browser tab. STEP 3: Click "Save" when done. ⚠️ Note: Once an image has a link, it will automatically follow the Image hover animation set in Theme Settings > Animation. Repeat the same steps for any other banner groups you want to link. 4. Change Logs 🚩 Version 1.6.0: Added Banner 5 group; added block-level Enable text overlay toggle (controls text overlay for all banners at once); added Image link and Open this link in a new tab settings to all banner groups (1–5). Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is Announcement bar section? The Announcement bar section stands at the top of a website, sharing key messages, promotions, or urgent information with visitors. It aims to grab attention quickly and convey important updates or special offers. 2. Section Components Section Highlight key updates, promotions, or urgent messages at the top of the site. Available blocks Used to share a custom message. Used to display a discount code. Used to highlight free shipping offers. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Locate the Header setting group. Search for "Announcement bar". Enable to display it. 4. Core Features High visibility: Positioned at the top of the site to instantly catch visitor attention. Customizable content: Easily update text, links, or promotional messages. Time-sensitive messaging: Ideal for flash sales, limited-time offers, or urgent updates. 5. Common Use Cases 🤔 How to show promotional info (Announcement, CTA button) on the announcement bar? Want to display promotional messages on the announcement bar? Here's how: STEP 1: Under the Announcement bar section, add the Announcement block. You can add up to 3 Announcement blocks. STEP 2: Add the announcement Click on the Announcement block to open its setting panel and customize these: Choose an Icon to show on the bar. Add Text you want to display. (Optional) Enter a Link to which users will be directed when clicking the announcement text. STEP 3: Add the CTA button Still in the Announcement block setting panel, customize these: In the Button label field, enter the text for a CTA button (e.g., "Shop Now", "Learn More"). Insert the destination URL for the button. Choose the button style: Primary, Secondary, Text link. STEP 4: Click "Save". 🤔 How to add a discount code to the announcement bar? Want to include a discount code in the announcement bar? Here's how: STEP 1: Under the Announcement section, add a Promo code block. STEP 2: Add the promotional message Click on the Promo code block to open its setting panel and customize these: Choose an Icon to show on the bar. Enter the promotional message in the Text field. Paste a Link that the text should link to. STEP 3: Add the coupon code Still in the Promo code block setting panel, customize these: Coupon code: Input the discount code you want to show users. Customize the coupon color. ⚠️ Note: To make the coupon code available to use, you need to set it up in your Shopify admin. Read Shopify guide for further information. STEP 4: Click "Save". 🤔 How to add a countdown timer to the announcement bar? Want to drive more sales with a countdown timer on your announcement bar? Here's how: STEP 1: Click on the Announcement or Promo code block where you want to add a countdown timer. STEP 2: Enable the countdown timer To display a countdown timer on the bar, you need to add the {count_down} variable to the Text field. STEP 3: Set up the countdown timer Still in the Countdown timer setting group, customize these configs: Timezone: Choose the timezone in which the countdown will operate. End Date/Time: Specify the date and time when the countdown should conclude. The timer will then show the remaining time from the present to the end date. STEP 4: Click "Save". 🤔 How to add a free shipping message to the announcement bar? Want to show a free shipping message on the announcement bar? Here's how: STEP 1: Under the Announcement section, add a Free shipping block. STEP 2: Click on the Free shipping block to open its setting panel and customize these: Icon: Choose an icon to display next to your free shipping message. Default message: Enter the message shown when the cart is empty (Example: "Free Shipping for all orders over $80"). Progress message: Display a dynamic message when the customer's cart value is below the free shipping threshold. Use {amount_to_fs} to automatically calculate the remaining amount. Success message: Set the message that appears when the cart qualifies for free shipping. Link: Add a URL that the free shipping message can link to (e.g., shipping policy or promo details). STEP 3: Click "Save". 🤔 How to manage the function settings of the whole Announcement bar section? Want to manage the function settings such as choosing carousel style or enabling region/language selector? Here's how: STEP 1: Click on the Announcement bar section to open its setting panel. STEP 2: You can customize these settings: Config Purpose Enable on mobile Show or hide the announcement bar on mobile devices. Selectors alignment Choose whether the country/region and language selectors (if enabled) appear on the Left or Right side of the announcement bar. Country/Region selector Turn this on to let users select their country or region (based on payment settings). Language selector Allows users to switch between languages on your store (based on language settings). Carousel style on desktop Choose how multiple announcements are shown: None, Continuous, or Slideshow. Time per scroll Set the duration (in seconds) for how long each announcement is displayed before transitioning to the next. Show navigation arrows Enable this to let users manually switch between announcements when using the Slideshow style. Enable sticky bar Keep the announcement bar fixed at the top of the screen as users scroll through the page. STEP 3: Click "Save". 🤔 What customization options can you give your Announcement bar? Option How to set it up? ✨ Change color scheme Click on the Announcement bar section, and choose the overall scheme you want to use in both light and dark mode in the Colors. ✨ Change the text size Click on the Announcement bar section, and choose the Text size to be Small, Medium, or Large. ✨ Change the text alignment Click on the Announcement bar section, find and choose the Text alignment to be Side, or Center. ✨ Change the section width / padding Click on the Announcement bar section, scroll to the Section layout group and adjust Section width or padding. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Contact menu? The Contact menu is a visually rich mega menu style that includes the contact form and your store’s location, making it easier for customers to reach out to you. 2. When to use the Contact menu? You want customers to reach you easily. You want to highlight your store’s location. You want to build trust and reduce hesitation. 3. How to set it up? To make a Contact menu fully yours, there are 2 processes to go through: Process 1. 🤔 Add the Contact menu block to the Header Go to Online Store > Themes > Customize. In the Theme Editor, under Header, find the Header section. Click Add block, then select Contact menu. 📌 Important step: Give the main menu a title. Enter the menu title in the Menu Item field. ⚠️ Note: You must enter this field for your menu to appear on the site. Click Save when done. Process 2. 🤔 Customize the Contact menu Depending on your needs, follow the corresponding guide below: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Contact menu block > enter a link in Menu item link. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To change the Google Map location: In the Theme Editor, go to Header section > Contact menu block > Scroll down to the Map setting group > Enter your store location into the Store address field. 📌 3.3. To replace the map with an image: In the Theme Editor, go to Header section > Contact menu block > Scroll down to the Map setting group > On the Image setting, click “Select” to choose your pic. 📌 3.4. To adjust the Contact form content: In the Theme Editor, go to Header section > Contact menu block > Scroll down to the Email form setting group > Then you can: Change the Heading. Add some Text as the description. 📌 3.5. To show/edit the Contact information: ✨ To show/hide the Contact information: In the Theme Editor, go to Header section > Contact menu block > Scroll down to the Contact information setting group >Toggle on the Show contact information setting. ✨ To change the Contact information: In the Theme Editor, go to Header section > Contact menu block > Scroll down to the Contact information setting group > Then you can: Change the Heading, Subheading, and fill in the Text as a description. Fill in your correct Phone number and email address. ✨ To show social icon under the Contact information In the Theme Editor, go to Header section > Contact menu block > Scroll down to the Contact information setting group >Toggle on the Enable social icons setting. 📌 3.6. To add a label to the menu: In the Theme Editor, go to Header section > Contact menu block > Scroll down and find the Menu Label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Button menu? The Button menu lets you add a standout button directly on your navigation bar, making key actions or pages highly visible and increasing click-through right from the header. 2. When to use the Button menu? You want to navigate customers to a special landing page. You want to prompt customers to take action quickly (e.g., “Shop Now,” “Subscribe,” “Book Demo”). 3. How to set it up? Go to Online Store > Themes > Customize. In the Theme Editor, under Header, select the Header section. Click Add block, then choose Button menu. 📌 Important: Give the button a label. Enter the text in the Button label field. ⚠️ Note: You must fill this field or the button won’t appear on the site. Customize the remaining settings: Button link – paste the destination URL or select a page. Button style – choose the visual style (e.g., Primary / Secondary). Show on mobile – enable if you want the button visible on mobile. Click “Save” when done. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is a Utility bar? The Utility bar is a versatile section located at the very top of your store. It provides quick access to essential links and information, such as phone numbers, email addresses, social icons, and localization options, ensuring a better user experience and faster navigation. 2. Section Components Section The main container for the quick-access links and information. Available blocks Adds a menu (created in Shopify admin) to the Utility bar for quick navigation. Displays your contact number. Provides a clickable email address for customer support. Allows customers to choose their preferred language or currency. Links to your brand's social media accounts. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Locate the Header setting group. Click "Add Section". Search for Utility bar. Click on it to add. 4. Core Features Dynamic Navigation: Add menus directly from your Shopify admin for seamless updates. Localization Support: Enable language and currency selectors to cater to global customers. Interactive Elements: Phone numbers, emails, and social icons are clickable for ease of use. Flexible Layout: Arrange blocks to prioritize the most important information. 5. Common Use Cases 🤔 How to set up the Utility bar? Don’t know where to start with your Utility bar? Let’s follow this guide: STEP 1: Add the Utility bar to the Header Under the Header setting group, add a Utility bar section. STEP 2: Decide what you want to show Depending on what you want to show, add the corresponding block. For each block, the settings might be slightly different: Block name How to set it up? Menu Click Select in Menu to assign a menu created in Shopify admin (Content > Menus > Create menu). ⚠️ Note: Only the first level of your menu will be shown on the bar. Choose the Desktop position to be Left or Right. Phone number Select an Icon (choose None if you don’t want an icon). Enter your Phone number. Choose the Desktop position to be Left or Right. Email address Select an Icon (choose None if you don’t want an icon). Enter your Email address. Choose the Desktop position to be Left or Right. Localization selectors Choose the Desktop position to be Left or Right. Turn on/off the Country/Region selector to show/hide. Turn on/off the Language selector to show/hide. Social icon Choose the Desktop position to be Left or Right. ⚠️ Note: Set up your social media links first in Theme Settings > Social media. STEP 3: Click “Save” when done. 🤔 What customization options can you give your Utility bar? For the whole Utility bar section: ✨ Change color scheme Click on the Utility bar section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the section width, add padding, or add a divider Click on the Utility bar section, locate the Desktop layout group, and you will be able to change those settings. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Product Menu? The Product Menu is a mega menu layout that displays menu items with a focus on the products. When you hover over each card, it reveals the product’s related media. 2. When to use the Product Menu? You want customers to browse and shop without leaving the menu. Your product catalog has clear subcategories (e.g., accessories, gear types). You want to highlight popular or seasonal products right in your navigation 3. How to set it up? To make a Product menu fully yours, there are 3 processes to go through: Process 1. 🤔 Organize menu items in the Shopify admin. STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click “Add menu” to build a new one from scratch. STEP 3: Fill in the Name box to give your menu a name (This title won’t show up on the site) STEP 4: Structure your menu: To add a menu item, click “Add menu” item, enter its name, and assign a link to the collections. To create a nested menu, click “Add menu” item again, then drag it under another item by holding the dot icon. (⚠️ Note: Each level 2 nested menu item must link to a Product. 🚨) STEP 5: Click “Save” when done. 🔖 Menu hierarchy example: Process 2. 🤔 Assign the created menu to the Product Menu block STEP 1: Go to Online Store > Themes > “Customize”. STEP 2: In the Theme Editor, under Header, find the Header section. STEP 3: Click “Add block”, then tap on the Product menu. STEP 4: 📌 Important step: Give the main menu a title: Enter the menu title in the Menu Item field. ⚠️Note: You must enter this field for your menu to appear on the site. STEP 5: Still in the Product menu block, find the Menu setting, click “Select”, then find and choose the menu you created as guided in process 1. STEP 6: Click “Save” when done. Process 3. 🤔 Customize the Product menu You’ve finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Product menu block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To add a label to the menu: In the Theme Editor, go to Header section > Product menu block > Scroll down and find the Menu Label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the Column Menu? A Column Menu is a mega menu layout where dropdown items are organized into multiple columns. It's ideal for showcasing categories like collections, product types, or promotions in a visually clean structure. 2. When to use the Column Menu? Group links under clear categories: Ideal for organizing multiple links (like product types or content pages) under labeled sections. Highlight many items at once without overwhelming: The column layout prevents clutter and helps users scan information quickly. Display visual promotions beside your menu: You can add eye-catching banners or images next to your menu using content blocks. Keep navigation clean for large catalogs: Great for stores with lots of categories or subcategories—customers won't get lost. 3. How to set it up? To make a Column menu fully yours, there are 3 processes to go through: Process 1. 🤔 Organize menu items in the Shopify admin. STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click "Add menu" to build a new one from scratch. STEP 3: Fill in the Name box to give your menu a name (This title won't show up on the site) STEP 4: Structure your menu: To add a menu item, click "Add menu" item, enter its name, and assign a link (e.g., page, collection, product, or URL). To create a nested menu, click "Add menu" item again, then drag it under another item by holding the dot icon. STEP 5: Click "Save" when done. 🔖 Menu hierarchy example: Process 2. 🤔 Assign the created menu to the Column Menu block STEP 1: Go to Online Store > Themes > "Customize". STEP 2: In the Theme Editor, under Header, find the Header section. STEP 3: Click "Add block", then tap on the Column menu. STEP 4: 📌 Important step: Give the main menu a title: Enter the menu title in the Menu Item field. ⚠️Note: You must enter this field for your menu to appear on the site. STEP 5: Still in the Column menu block, find the Menu setting, click "Select", then find and choose the menu you created as guided in process 1. STEP 6: Click "Save" when done. Process 3. 🤔 Customize the Column menu You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Column menu block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To add a label to the menu: In the Theme Editor, go to Header section > Column menu block > Scroll down and find the Menu Label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. 📌 3.3. To show collection images on the menu ✨ To show/ hide images for the first level of the menu: Go to Header section > Column menu block > Scroll down and find the Collection images section on the right panel. In the Show 1st-level menu images setting, you will see 4 options: None: Show no images. Featured images: Show the main image you use for that collection in the admin. First product image: Show the image of the first product in that collection. Collection image metafield: Show the image using metafield, learn more in the next use case "✨ To show collection images on the menu using metafield" ⚠️ Note: This setting only applies to the menus that link to collections. ✨ To show collection images on the menu using metafield: ✍️ Why would you need to use metafield for collection images? You want to show a designed image for the collection on the menu, without changing the featured images of that collection. You want to show higher-resolution images on the menu. ✍️ How to do it? STEP 1: Create a collection metafield: In Shopify admin, go to Settings> Custom data > Collection > Add definition. Give your metafield a name, and choose type as File. Click Save. STEP 2: Assign a value for the collection metafield: Go back to Shopify admin, and click on the Products > Collection tab. Choose a collection, and scroll down to Metafields. Upload an image in the newly created collection metafield. Click Save. STEP 3: Set up in Theme Editor: In Theme Editor (Visit it by clicking on Online store > Themes > Customize) Click on Header > Column menu > scroll to Collection images setting group: For Show 1st-level menu images and/or Show 2nd-level menu images, select Collection image metafield - based on which menu level you want to show images for. For the Collection image metafield field: Copy the text after "custom." of the metafield's Namespace and key. → Paste to this Collection image metafield field. Click Save. ✨ Change the ratio for the images on the menu: Go to Header section > Column menu block > Scroll down and find the Collection images section on the right panel > choose the 2nd-level image ratio. ⚠️ Note (v1.6.0 update): When collection images are enabled at the 1st or 2nd level, they are now automatically hyperlinked to their corresponding collection pages — no additional setup needed. Clicking an image in the menu will redirect customers to that collection. These images will also follow the Image hover animation configured in Theme Settings > Animation. 📌 3.4. To add & adjust promotion images on the menu: 3.4.1. To add promotion images to the menu: ⚠️ Note: You can add up to 2 promotion images. This guide covers Promotion 1 setting group - to add a second, repeat the same steps for Promotion 2. ✨ Upload an image as the promotion: Go to Header section > Column menu block > Scroll down and find the Promotion 1 section on the right panel: Upload an image to the Image setting. (Optional) Upload a separate one made for Mobile image. ✨Add & adjust heading & text for the promotion: Go to Header section > Column menu block > Scroll down and find the Promotion 1 section on the right panel: Enter the Heading and Text. Adjust the Text size, Text alignment. Change the Text color in light and dark version. ✨Make the text appear on the promotion images (text overlay). Go to Header section > Column menu block > Scroll down and find the Promotion 1 section on the right panel: Toggle on Text overlay setting. Drag to adjust the Overlay opacity. 3.4.2. To adjust the promotion images' overall look: ✨To change the position on large screen: Go to Header section > Column menu block > Scroll down and find the Promotions section on the right panel > choose Position on large screen to be Left, Right or Bottom. ✨To change the promotion images layout to vertical or horizontal Go to Header section > Column menu block > Scroll down and find the Promotions section on the right panel > choose Layout on large screens to be Horizontal or Vertical. ✨To change the promotion images height: Go to Header section > Column menu block > Scroll down and find the Promotions section on the right panel: On desktop 🖥️: Drag the Desktop image height On mobile 📱: Drag the Mobile image height 4. Change Logs 🚩 Version 1.6.0: Collection images at the 1st and 2nd level are now automatically hyperlinked to their corresponding collection pages and follow the Image hover animation setting in Theme Settings > Animation. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. Definitions Before setting up the drop-down menu, take a look at some terms that you need to understand. 1.1. What is a Drop-down menu? A dropdown menu is a list of options that appears when you click or tap on a button or box. It helps keep the page clean by showing only one option at first. When the user clicks it, more choices “drop down” below. 1.2. Dropdown Menu vs Mega Menu in Shopify In Shopify themes, a dropdown menu shows a simple list of links under a main menu item, while a mega menu can display a much larger layout, including multiple columns, images, and more detailed sections. 👉 Learn more in the Mega menu guide. 1.3. What are Menu items and Nested menu items? Menu item: The first level of the menu often appears on the site's navigation bar. Nested menu items: (or sub-menu items) The sub-level of the menu item. 2. How to create basic dropdown menus? To add a basic drop-down menu to your Shopify store, there are two main processes you need to go through: 🤔 Process 1: Organize menu items in Shopify admin STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click “Add menu” to build a new one from scratch. STEP 3: Set up the menu items: Click on Add menu item Enter the menu item’s name Assign a link to that menu item, it might be a specific page, collection, product, or external URL. STEP 4: Set up the nested menu items: One more time, click on the Add menu item. Hold the icon and drag the new menu item under the existing one. (Be aware of the blue line to know where your menu item will go) STEP 5: Click “Save” when done. 🤔 Process 2: Assign the created menu to the Maximize theme STEP 1: In your Shopify admin, go to Online Store > Themes > Click on Customize to open the Theme Editor. STEP 2: In the Theme Editor, on the left sidebar, under Header, click on the Header section. STEP 3: A new panel will appear, find the Main menu setting and choose the menu you have just created in Process 1 to add. STEP 4: Click “Save” when done. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is Header? The Header section is the topmost section of your Shopify store, containing key navigation elements such as the logo, menu, search bar, shopping cart icon, and account access. It ensures seamless navigation and brand recognition for visitors. 2. Section Components ⚠️ Note: This guide only focuses on the settings for the whole Header section. To understand how to set up each block (a.k.a each mega menu style), go to its specific document. Section Add a primary navigation area that appears at the top of every page. Available blocks Used to add a tab-style menu layout.→ Learn how to set up the Tabbed Menu Used to add a multi-column menu layout.→ Learn how to set up the Column Menu Used to add a menu with promotional banners.→ Learn how to set up the Banner Menu Used to add a menu that highlights specific products.→ Learn how to set up the Product Menu Used to add a menu that shows all blog posts.→ Learn how to set up the Blog Menu Used to add a menu that has a contact form & contact information inside.→ Learn how to set up the Contact Menu Used to add a call-to-action button to the menu.→ Learn how to set up the Button on Menu 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Locate the Header setting group. Click "Add Section". Search for "Header". Click on it to add. 4. Highlight features Desktop & Mobile Layouts: Customize different header layouts for desktop and mobile. Sticky Header: Keep the header fixed on scroll for better navigation. Transparent Header Option: Enable a transparent header for modern designs. 7 mega menu styles: Make the header more engaging with 7 different ways to use your mega menu. Customer Account popup: A built-in account icon that opens a popup with sign-in options and a customizable navigation menu- powered by Shopify's storefront web component. Flexible Search layout: Choose between a minimized popup or a full-screen search on desktop, and optionally show a persistent search bar on mobile instead of just an icon. 5. Common Use Cases 🤔 How to assign a menu to the header? You can display your store's menu in the header using the Main Menu setting. Here's how: STEP 1: Prepare your menu in the Shopify admin: go to Content > Menus > "Create menu". STEP 2: Click on the Header section to open its setting panel. STEP 3: Locate the Main menu setting and select the menu you want to display. STEP 4: Click "Save" to apply changes. ⚠️ Note: This will show all the menu items you have set up in Shopify Admin as a basic dropdown menu. 🤔 How to enable a sticky header? Want the header to stay visible when scrolling? Here's how: STEP 1: Click on the Header section to open its setting panel. STEP 2: Tap on the Sticky header dropdown and choose one of the following options: None – The header scrolls away with the page. On scroll up – The header reappears only when scrolling up. Always – The header stays fixed at the top. Always, reduce logo size – The header remains sticky while reducing the logo size for better visibility. Adjust the percentage using the Reduce logo by setting. STEP 3: Click "Save" to apply changes. 🤔 How to collapse the mega menu when scrolling with a sticky header? Want to keep your header sticky but save vertical space by hiding the mega menu area as customers scroll down? The Enable collapse on scrolling down setting does exactly that — the header stays visible and sticky, but its mega menu portion tucks away while scrolling. ⚠️ This setting only appears when two conditions are both met: Desktop layout Logo on side or Logo on top — not Compact Sticky header Always or Always, reduce logo size — not None or On scroll up If the toggle is not visible, check that both settings above are set to the correct values first. STEP 1: Set the Desktop layout Click on the Header section to open its settings panel. Find the Desktop layout setting and choose either Logo on side or Logo on top. STEP 2: Set the Sticky header In the same settings panel, find Sticky header and choose either Always or Always, reduce logo size. STEP 3: Enable the setting Once both conditions above are met, the Enable collapse on scrolling down toggle will appear below the Sticky header setting. Toggle it ON. STEP 4: Click "Save" when done. 🤔 How to enable a transparent header? A transparent header blends seamlessly into banners and hero images. To enable: STEP 1: Click on the Header section to open its settings panel. STEP 2: Under Transparent Header, turn on: Enable on homepage Enable on collection pages depending on which pages you want the header to be transparent. STEP 3: (Optional) Some more adjustments you might need to make the transparent header fit your vibe: Upload a Transparent Logo to match the header design. Adjust the Shadow and its color for both dark/light versions. Adjust the Text, Text link color for both dark/light versions. STEP 4: Click "Save" to apply changes. 🤔 How to set up the Customer Account popup in the header? As of v1.7.0, the header includes a built-in account icon powered by Shopify's storefront web component. When customers click it, a popup opens with sign-in options (for guests) or a navigation menu (for signed-in customers). The popup colors automatically match your header's color scheme - no extra styling needed. ⚠️ Prerequisite - New Customer Accounts only: This feature only works if your store uses New customer accounts. Legacy accounts are not supported. To check, go to Shopify Admin > Settings > Customer accounts and make sure you've upgraded. STEP 1: Enable your preferred sign-in methods (in Shopify Admin) Go to Shopify Admin > Settings > Customer accounts and look for the Authentication settings. From here, enable the sign-in methods you want to offer: Shop sign-in- automatically recognizes customers who have a Shop account and signed in on this device before. Google / Facebook- allows social sign-in if your store has connected these providers. 💡 Note: Only the methods you enable here will appear in the popup. Customers will always see the email field regardless. STEP 2: Assign a navigation menu to the popup (in Theme Editor) Click on the Header section to open its settings panel. Find the Customer account menu setting and select the menu you want to display inside the popup. The default option is Customer account main menu- a Shopify-managed menu that includes links to Orders and Profile. You can also create a custom menu in Shopify Admin > Content > Menus and assign it here to add or rearrange links. STEP 3: Click "Save" when done. 🎯 What it looks like on the storefront: Sign-out: Sign-in: 💡 Notes: The menu is visible in the popup for both signed-out and signed-in customers. Signed-out customers who click on links like Orders or Profile will be redirected to the login page first. There is no sign-out option inside the popup. Customers can sign out from their Profile page. 🤔 How to customize the Search layout on desktop? As of v1.8.0, you can choose how the search popup appears on desktop when a customer clicks the search icon. There are two options: Minimized Full Only the search bar and suggestions appear, with the rest of the page dimmed by a partial overlay. This is the new, cleaner design and is set as default. The search popup expands to cover the full screen (the previous behavior). STEP 1: Click on the Header section to open its settings panel. STEP 2: Find the Search setting group. Under Desktop search popup layout, choose either Minimized or Full. STEP 3: Click "Save" when done. 💡 Note: The Minimized layout is recommended for most stores — it keeps customers focused on the search bar without being visually overwhelming. 🤔 How to show the Search bar on mobile instead of the Search icon? By default, mobile visitors see a search icon in the header. When tapped, it opens a full-screen search. As of v1.8.0, you can switch this to show a persistent search bar directly in the header on mobile, giving customers quicker access to search. When enabled: A full search bar is always visible in the mobile header. Tapping the bar opens the search popup (new design) below it. Tapping outside the popup closes it but keeps the search bar visible. Tapping the X on the search bar closes the popup but does not hide the bar. When disabled (default): Only the search icon appears. Tapping it opens the full-screen search popup. STEP 1: Click on the Header section to open its settings panel. STEP 2: Find the Search setting group. Toggle Show search bar on mobile to ON. STEP 3: Click "Save" when done. 🤔 What customization options can you give your Header? In the Search setting group: ✨ Change the Search bar color scheme Click on the Header section and scroll down to the Search group. From here: Set Search color scheme (light) to choose which color scheme the search bar uses in light mode. Set Search color scheme (dark) to choose which color scheme the search bar uses in dark mode. 💡 Note: The Search color scheme is independent from the rest of the header's color. The header's overall color scheme (for menu, icons, etc.) is set separately in the Color group of the same section. In the Desktop layout setting group: ✨ Change the section width, add padding, or add a divider Click on the Header section, and scroll down to the Desktop layout group to change those settings. In the Mobile layout setting group: ✨ Add a logo for mobile (light/dark) Click on the Header section, and scroll down to the Mobile layout group, and you can: Upload an image to Mobile logo (light) / Mobile logo (dark). Adjust the Logo mobile width. 6. Change logs Version 1.8.0 - June 2026 New – Desktop search popup layout: A new Desktop search popup layout setting lets merchants choose between Minimized (search bar and suggestions with partial overlay — new default) and Full (full-screen popup — previous behavior). New – Show search bar on mobile: A new toggle allows merchants to show a persistent search bar in the mobile header instead of just a search icon, giving customers quicker access to search. New – Search color scheme: Search bar colors can now be configured independently via the new Search color scheme (light) and Search color scheme (dark) settings, located directly in the Header section's Search group. Version 1.7.0 - May 2026 New- Customer Account popup: The header now includes a built-in account icon powered by Shopify's shopify-account web component. Customers can sign in via passwordless, Shop, Google, or Facebook, and access a customizable navigation menu- all without leaving the storefront. Configured via the new Customer account menu setting in the Header section. Changed- Sticky header: When sticky header is enabled, a new Enable collapse on scrolling down option allows the mega menu portion to be hidden while keeping the header visible as customers scroll. 7. Support Information Need help? Contact our support team at Omni Themes Support
Maximize - Header
1. What is the Tabbed Menu? The Tabbed Menu is a mega menu layout that displays top-level menu items as horizontal tabs. When you hover over each tab, it reveals a dedicated panel below with columns of links and optional media. This style works great for stores with multiple categories and subcategories. 2. When to use the Tabbed Menu? Ideal for large catalogs with multiple product categories Useful if you want to clearly separate product groups under each tab Great for showcasing more organized navigation on desktop 3. How to set it up? To make a Tabbed menu fully yours, there are 3 processes to go through: Process 1. 🤔 Organize menu items in the Shopify admin STEP 1: In your Shopify admin, go to Content > Menus. STEP 2: From here, you can: Click on the title of the menu you want to edit Or click "Add menu" to build a new one from scratch STEP 3: Fill in the Name box to give your menu a name (this title won't show up on the site) STEP 4: Structure your menu: To add a menu item, click "Add menu item", enter its name, and assign a link (e.g., page, collection, product, or URL) To create a nested menu, drag it under another item by holding the dot icon STEP 5: Click "Save" when done. 🔖 Menu hierarchy example: Process 2. 🤔 Assign the created menu to the Tabbed Menu block STEP 1: Go to Online Store > Themes > Customize. STEP 2: In the Theme Editor, under Header, find the Header section. STEP 3: Click "Add block", then select Tabbed menu. STEP 4: 📌 Important: Enter the menu title in the Menu Item field. ⚠️ Note: You must enter this field for your menu to appear on the site. STEP 5: Still in the Tabbed menu block, find the Menu setting, click "Select", then find and choose the menu you created as guided in process 1. STEP 6: Click "Save" when done. Process 3. 🤔 Customize the Tabbed Menu You've finished with the two most important processes. However, there is still some more work to do to achieve that final result. Depending on your needs, just find the corresponding guide below and take action: 📌 3.1. To attach a link for the main menu: In Theme Editor > Header section > Tabbed menu block > Click to choose or enter a link in the Menu item link field. (Optional) Turn on the setting to open the link in a new tab. 📌 3.2. To add a label to the menu: In the Theme Editor, go to Header section > Tabbed menu block > Scroll down and find the Menu Label section on the right panel. From here, you can: STEP 1: Enter the text you want to show on the label into the Label field. STEP 2: Change the text & label color. STEP 3: Add an icon to the label, choosing one of the 3 ways: Method 1: Choose from the Icon drop-down list. Method 2: Find an icon from the Icon library, copy and enter its name into the Use another icon field. Method 3: Upload a custom icon image. STEP 4: Save when done. ⚠️ Note: Leave everything blank to remove the label. 📌 3.3. To show collection images on the menu ✨ To show/ hide images for the first level of the menu: Go to Header section > Tabbed menu block > Scroll down and find the Collection images section on the right panel. In the Show 1st-level menu images setting, you will see 4 options: None: Show no images. Featured images: Show the main image you use for that collection in the admin. First product image: Show the image of the first product in that collection. Collection image metafield: Show the image using metafield, learn more in the next use case "✨ To show collection images on the menu using metafield" ⚠️ Note: This setting only applies to the menus that link to collections. ✨ To show collection images on the menu using metafield: ✍️ Why would you need to use metafield for collection images? You want to show a designed image for the collection on the menu, without changing the featured images of that collection. You want to show higher-resolution images on the menu. ✍️ How to do it? STEP 1: Create a collection metafield: In Shopify admin, go to Settings> Custom data > Collection > Add definition. Give your metafield a name, and choose type as File. Click Save. STEP 2: Assign a value for the collection metafield: Go back to Shopify admin, and click on the Products > Collection tab. Choose a collection, and scroll down to Metafields. Upload an image in the newly created collection metafield. Click Save. STEP 3: Set up in Theme Editor: In Theme Editor (Visit it by clicking on Online store > Themes > Customize) Click on Header > Tabbed menu > scroll to Collection images setting group: For Show 1st-level menu images and/or Show 2nd-level menu images, select Collection image metafield - based on which menu level you want to show images for. For the Collection image metafield field: Copy the text after "custom." of the metafield's Namespace and key. → Paste to this Collection image metafield field. Click Save. ✨ To show/ hide images for the 2nd level of the menu: Go to Header section > Tabbed menu block > Scroll down and find the Collection images section on the right panel > choose the Show second-level collection image setting to be None. ✨ Change the image's position for 2nd-level menus: Go to Header section > Tabbed menu block > Scroll down and find the Collection images section on the right panel > choose the Show second-level collection image setting to be Next to menu or Above menu. ✨ Change the image's ratio for 2nd-level menus: Go to Header section > Tabbed menu block > Scroll down and find the Collection images section on the right panel > choose the 2nd-level image ratio. ⚠️ Note (v1.6.0 update): When collection images are enabled at the 1st or 2nd level, they are now automatically hyperlinked to their corresponding collection pages - no additional setup needed. Clicking an image in the menu will redirect customers to that collection. These images will also follow the Image hover animation configured in Theme Settings > Animation. 📌 3.4. To add & adjust promotion images on the menu: 3.4.1. To add promotion images to the menu: ⚠️ Note: You can add up to 2 promotion images. This guide covers Promotion 1 setting group - to add a second, repeat the same steps for Promotion 2. ✨ Upload an image as the promotion: Go to Header section > Tabbed menu block > Scroll down and find the Promotion 1 section on the right panel: Upload an image to the Image setting. (Optional) Upload a separate one made for Mobile image. ✨Add & adjust heading & text for the promotion: Go to Header section > Tabbed menu block > Scroll down and find the Promotion 1 section on the right panel: Enter the Heading and Text. Adjust the Text size, Text alignment. Change the Text color in light and dark version. ✨Make the text appear on the promotion images (text overlay). Go to Header section > Tabbed menu block > Scroll down and find the Promotion 1 section on the right panel: Toggle on Text overlay setting. Drag to adjust the Overlay opacity. 3.4.2. To adjust the promotion images' overall look: ✨To change the position on a large screen: Go to Header section > Tabbed menu block > Scroll down and find the Promotions section on the right panel > choose Position on large screen to be Left, Right or Bottom. ✨To change the promotion images layout to vertical or horizontal Go to Header section > Tabbed menu block > Scroll down and find the Promotions section on the right panel > choose Layout on large screens to be Horizontal or Vertical. ✨To change the promotion images' height: Go to Header section > Tabbed menu block > Scroll down and find the Promotions section on the right panel: On desktop 🖥️: Drag the Desktop image height On mobile 📱: Drag the Mobile image height 4. Change Logs Version 1.6.0: Collection images at the 1st and 2nd level are now automatically hyperlinked to their corresponding collection pages and follow the Image hover animation setting in Theme Settings > Animation. Need help? Contact our support team at Omni Themes Support.
Maximize - Header
1. What is the mega menu? A mega menu is a drop-down menu with the aid of images, banners, videos, etc. Instead of a simple dropdown, it can display multiple categories, images, and even descriptions in an organized layout. Plus, Maximize can help you break the 3-level limit of Shopify to show up to 4 menu levels on the site. 2. Choose your preferred mega menu look to start Check out the mega menu options Maximize gives you below. Choose a style and click its name to jump straight to the detailed guidance. Menu Name How it looks Use cases TABBED MENU Show the submenu in vertical or horizontal tabs COLUMN MENU The menu is shown in columns with promotional images. BANNER MENU Show up to 4 banners, with text and buttons inside a menu PRODUCT MENU Show a list of products inside a menu BLOG MENU Show blog posts inside a menu item CONTACT MENU Show a contact form, information, and a map inside a menu TREE MENU Show menu items in a hierarchical structure with text only (up to 3 levels). CTA BUTTON ON MENU Show a button on the navigation bar Need help? Contact our support team at Omni Themes Support.
