Maximize - Header
Maximize - Header
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. 📌 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 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, and shopping cart icon. 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. 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 > Menu > “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 to open its dropdown, you can choose between 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 amount using the Reduce logo by setting. STEP 3: Click “Save” to apply changes. 🤔 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 depends on your demand to make the header transparent on which page. STEP 3: (Optional) Some more adjustments you might need to make the transparent header fit your vibe: Upload a Transparent Logo (optional) to match the header design. Adjust the Shadow and its color for both the dark/light versions. Adjust the Text, Text link color for both dark/light versions. STEP 4: Click “Save” to apply changes. 🤔 What customization options can you give your Header? 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, and you will be able 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. 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. 📌 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
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 CTA BUTTON ON MENU Show a button on the navigation bar Need help? Contact our support team at Omni Themes Support.
