How can we help you?

View Categories

Mega Menu Vertical

1 min read

The ShopWell Addons includes a powerful vertical mega menu builder that allows you to display product categories, brand lists, and promotional visuals in an engaging layout. This guide will show you how to set up a Vertical Mega Menu with custom columns, background images, and dynamic category listings.

📋 What We’ll Build #

A clean, two-column Vertical Mega Menu layout with a category list on the left and a background image on the right.

🛠️ Step-by-Step Setup #

We’ll walk through setting up a vertical mega menu using a product category as an example. You can repeat the process for other menu items.

1. Access Menu Settings #

  1. Go to Appearance > Menus in your WordPress dashboard.
  2. Select the Category Menu and click Select.
  3. Locate your menu item (e.g., Sports & Entertainment) and click the Mega Menu link under it.

2. Enable and Configure Mega Menu #

  1. Under the Mega Menu tab:
    • Toggle Enable Mega Menu to ON.
    • Set Mode to Grid.
    • Set Width to Custom and enter 870px.

3. Add Columns and Content #

  1. Click Add Column twice to create two columns.
  2. Set each column width to 25% (this balances the content and reserves space 50% for a background image).
  3. Click the “+” icon inside the column to add a menu item.
  4. From the Mega Menu Item tab:
    • Select Heading to add a section title.
    • Click Add to Menu.

4. Insert Dynamic Category List #

  1. In the Mega Menu Items panel, choose Taxonomy List.
  2. Click Add to Menu to insert it into the column.
Taxonomy List Settings: #
  • Taxonomy: Product Category or Product Brand
  • Parent Category: Select a specific category (optional)
  • Order: Ascending or Descending
  • Order By: ID, Title, Menu Order, Product Counts
  • Limit: Set the number of categories to show
  • Offset: Skip a number of categories
  • Hide empty categories to show only relevant items
  • New Arrivals / Sale: Enable links to latest or discounted items

Repeat the steps for Column 2 if you’d like to display more categories or a different taxonomy.

🎨 Add Background Image for Visual Appeal #

To visually enhance your vertical menu:

  1. Switch to the Design tab.
  2. Upload a Background Image.
  3. Set your preferred Image Position (e.g., Right, Bottom).
  4. Configure the following:
    • Repeat: No Repeat
    • Attachment: Scroll
    • Size: Default or cover
  5. Add Menu Image for mobile hamburger menu.

💾 Final Step #

Click Save Changes and check your site’s front end. Your vertical mega menu is now live and functional!

✅ Tips for Better Design #

  • Use high-quality images for a more polished appearance.
  • Keep your category names short and clear for better readability.
  • Mix and match columns with different item types like Image Box, Banner, or Custom HTML.

Need more help with Mega Menus? View the full Mega Menu Guide or Contact Support anytime.