How to create a mega menu

This theme comes with mega menu support, and this instruction shows you how to setup the menu.

On this page

The look of a mega menu

In Be Yours, you can create a mega menu in which its contents are arranged in columns, like this:

The mega menu is a combination of two parts: menu items and promotions:

Setting up mega menu

  1. First, you need to setup your menu in multiple levels by using the native Shopify navigation. To learn how to create menu in multiple levels (dropdown), please check out the official Shopify documentation. Below is an example of a menu structure to accommodate the mega menu in the very first screenshot:

  2. In your theme settings, click Header (1) in the section list, navigate to the Menu setting (2) and choose the menu you just created above, then check the Enable dropdown menu setting (3):

  3. The menu should display in a simple dropdown style by now. It's just because we have not setup the promotions part yet. If you just like this dropdown style and have no use for promotions part, it's all done here. To continue setting up the promotions, click Add Mega menu to add a Mega menu block:

  4. In the Menu item setting, just type the name of the menu item that contains the mega-menu. Please note that the name entered in Menu item must match the name of one of the first-level menu items. Here's an example in which the mega-menu is contained within the Bags item:

  5. In the Menu item setting, you can optionally upload 2 images for 2 promotions, respectively:

Mega menu block settings

General settings

Setting Description
Mega menu Here's to type the name of the menu item that you want it to contain the mega-menu. Please note that the name entered in Menu item must match the name of one of the first-level menu items.
Make mega menu narrow Makes the container of the mega menu narrow a bit.
Show mega menu images When a second level item of navigation links to a collection with an image, this will have the image displayed above the title of the link. Here's an example:

This is because the Handbags item is linked to a collection that has image:

Promotion settings

You can optionally upload 2 images for 2 promotions. Each of them has the same settings:

Setting Description
Image The image that you want to display.
Image ratio The image ratio for the promotion:
  • Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped.
  • Square - Crops the images to use a 1:1 ratio.
  • Portrait - Crops the images to use a 2:3 ratio.
  • Landscape - Crops the images to use a 3:2 ratio.
  • Wide - Crops the images to use a 16:9 ratio.
Image focal point Choose the most important area of the image in view.
Heading The title of the promotion.
Description The paragraph text of the promotion.
Overlay text on image Texting overlays on the image instead of lying below.
Link The link that you want customers to navigate to if they click the promotion.

Need Further Assistance

If you encounter any issues or need additional help with your Be Yours theme, don't hesitate to reach out to Roartheme's support team for expert guidance.

Scan the QR code to get support within 8 hours via RoarTheme ’s Whatsapp

Back to Be Yours Support