> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/mega-menu/manage-menu-items/manage-submenu-items/design-mega-menu-submenu.md).

# Design mega-menu submenu

Enhance your Shopify store's navigation by creating a visually appealing mega menu submenu using the Globo Mega Menu app. Follow these steps to design a customized submenu that improves user experience and showcases your products effectively.

### 🧭 Step 1: Add a Submenu to a Main Menu Item

1. Open the **Globo Mega Menu** app in your Shopify admin panel.
2. Navigate to the main menu where you want to add a submenu.
3. Click on the desired main menu item.
4. Click the **"Add Submenu"** button.

<figure><img src="/files/VFnCNP0Li5cRpCdpCTFf" alt=""><figcaption></figcaption></figure>

### 🧩 Step 2: Choose a Mega Menu Template

1. A popup window will appear.
2. Select the **"Mega menu"** tab.
3. Choose a pre-built template that suits your design preferences, or select **"Blank"** to create a new template from scratch.

<figure><img src="/files/KSaKZDxuRZCd95UJi89v" alt=""><figcaption></figcaption></figure>

### 🛠️ Step 3: Customize blocks

1. If you selected the **"Blank"** template, click the **"Add block"** button.<br>

   <figure><img src="/files/e6WxrGfSd5MxpJAd7XzP" alt=""><figcaption></figcaption></figure>
2. Choose the type of block you want to add, such as:
   * **Products**
   * **Collections**
   * **Images**
   * **Custom HTML**
   * **Contact Forms**
3. Adjust the width of each block to organize your layout:
   * The row's width is divided into 12 units.
   * <mark style="color:red;">For example, to have three equal columns, set each block's width to</mark> <mark style="color:red;"></mark><mark style="color:red;">**4**</mark> <mark style="color:red;"></mark><mark style="color:red;">(since 12 ÷ 3 = 4).</mark>
   * You can mix and match widths to create varied layouts.

<figure><img src="/files/UXn3clCQtoKmyXJW2rXx" alt=""><figcaption></figcaption></figure>

### 🧠 Tips for Effective Mega Menu Design

* **Consistency**: Maintain a consistent design across all menu items for a cohesive look.
* **Visual Hierarchy**: Use varying block sizes and types to highlight important items.
* **Responsive Design**: Ensure your mega menu looks good on all devices by previewing changes on both desktop and mobile views.
* **User Experience**: Organize items logically to help users find what they're looking for quickly.

### ✅ Final Result

By following these steps, you'll create a customized mega menu submenu that enhances your store's navigation and provides a better shopping experience for your customers.

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!