User Guide

Search limit to:






Column menu

by Admin on Aug 25, 2025

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.