The Mega Menu Product Showcase is useful when you want customers to browse products directly from the header menu.
It can display:
- Collection tabs from child menu links
- Product cards from each child collection
- Product badges and prices
- A “View all” button
- An optional promo card
- An optional trust/icon badge bar
- A compact mobile version inside the Menu Drawer
STEPS:
1. Understanding How Mega Menu Product Showcase Works
The Mega Menu Product Showcase is a block inside the Header section.
Theme block type:
mega_menu_showcase
The block is matched to a top-level menu item by the Menu item setting.
For example, if your main menu has a top-level item called:
Shop
then the Menu item setting in the Mega Menu Product Showcase block must also be:
Shop
The theme then turns that menu item into a product showcase mega menu.
Important structure:
| Menu level | How it is used |
|---|---|
| Top-level menu item | The menu item that opens the showcase. |
| Child collection links | Become tabs in the showcase. |
| Products inside each child collection | Display as product cards inside each tab. |
| Child links that are not collections | Display as link groups instead of product cards. |
If both a classic Mega menu block and a Mega Menu Product Showcase block are assigned to the same menu item, the Product Showcase block takes priority.
2. Prepare the Menu Structure
Before adding the block, make sure your menu has the correct structure.
- From Shopify admin, go to Content > Menus.
- Open the menu used by the Header section.
- Add a top-level menu item.
- Add child menu items under it.
- Link each child menu item to a collection if you want it to show products.
- Click Save.
Recommended structure:
Shop
- New Arrivals
- Best Sellers
- Dresses
- Accessories
Each child collection becomes a tab.
If a child item links to a collection, the showcase displays products from that collection.
If a child item has its own nested links instead of a collection, the showcase displays those links as a list.
You may want to refer to this article which shows you How to set up Mega menu in Be Yours theme.
3. Add the Mega Menu Product Showcase Block
To add the block:
- From Shopify admin, go to Online Store > Themes.
- Find the Be Yours theme and click Customize.
- Open the Header section.
- Click Add block.
- Select Mega menu — product showcase.
- In the Menu item field, enter the exact top-level menu item name.
- Configure the product and promo settings.
- Click Save.
The Menu item value must match the top-level menu item title.
Example:
| Header menu item | Menu item setting |
|---|---|
| Shop | Shop |
| Women | Women |
| Collections | Collections |
4. Configure Product Showcase Settings
The block includes these main settings:
| Setting | Description |
|---|---|
| Menu item | The top-level menu item that should use the product showcase. |
| Products per tab | Controls how many products show inside each collection tab. |
| Image ratio | Controls the product card image ratio. |
| View all link | Sets the link for the main View all button. |
| Defer loading | Loads showcase content only when needed to improve initial page load. |
| Show in mobile menu | Shows the showcase inside the mobile Menu Drawer. |
Products per tab
This controls how many products are shown for each child collection tab.
Available range:
| Minimum | Maximum |
|---|---|
| 3 | 6 |
Image ratio
This controls the product card image ratio.
Available options:
| Option |
|---|
| Square |
| Portrait |
| Landscape |
| Wide |
View all link
If this field is empty, the View all button uses the top-level menu item link.
Defer loading
This is enabled by default. It helps reduce the initial page load because product grids in the header can be heavy.
Show in mobile menu
When enabled, the same showcase also appears inside the mobile Menu Drawer.
5. Configure the Promo Card
The Mega Menu Product Showcase can include one optional promo card.
Promo settings:
| Setting | Description |
|---|---|
| Image | Selects the promo image. |
| Image ratio | Controls the promo image ratio. |
| Heading | Adds promo heading text. |
| Description | Adds promo description text. |
| Link | Makes the promo card clickable. |
Promo image ratio options:
| Option |
|---|
| Fill |
| Square |
| Portrait |
| Landscape |
If no promo image is selected, the promo card will not display.
6. Add the Icon Trust Bar
The showcase can display a trust/icon badge bar at the bottom.
To add trust items:
- Open the Header section.
- Click Add block.
- Select Menu icon badge.
- Choose an icon.
- Add a heading.
- Add supporting text.
- Click Save.
Menu icon badge settings:
| Setting | Description |
|---|---|
| Icon | Selects the badge icon. |
| Heading | Adds the badge title. |
| Text | Adds supporting text below the heading. |
The Product Showcase displays up to 4 Menu icon badge blocks.
The same badge bar can appear in both:
- Desktop showcase mega menu
- Mobile Menu Drawer showcase
7. Product Card Behavior
Product cards in the showcase are real product cards pulled from the child collection.
Each product card can show:
| Element | Description |
|---|---|
| Product image | Uses the product featured image. |
| Product title | Links to the product page. |
| Product price | Uses the theme price rendering. |
| Product badge | Shows custom label, sold out badge, or sale badge. |
Badge priority:
| Priority | Badge source |
|---|---|
| 1 | Custom product label from theme.label metafield |
| 2 | Sold out badge |
| 3 | Sale badge |
If a product has a custom label metafield, that label is shown first.
8. Mobile Menu Drawer Behavior
When Show in mobile menu is enabled, the showcase also appears inside the mobile Menu Drawer.
On mobile, the layout is different from desktop.
| Desktop | Mobile Menu Drawer |
|---|---|
| Child collections display as tabs. | Child collections display as stacked groups. |
| Products appear inside the active tab. | Each collection group shows a compact product grid. |
| Promo card appears beside the product area. | Promo card appears below the product groups. |
| Trust bar appears at the bottom. | Trust bar appears at the bottom. |
Important:
The mobile showcase only appears when the mobile menu item title matches the Menu item setting.
If you use a separate mobile menu, make sure the matching menu item exists there too.
9. Notes and Limitations
Please note the following behavior:
- The feature is available from Be Yours version 9.2.0.
- The block is added inside the Header section.
- The block must be assigned to a top-level menu item by title.
- Child collection links become product tabs.
- Child links that are not collections can display as link groups.
- Product cards are pulled from the first products in each child collection.
- The number of products per tab is limited to 3–6.
- The product card badge uses the theme badge logic.
- The promo card only displays when a promo image is selected.
- The trust bar uses Menu icon badge blocks from the Header section.
- The showcase displays up to 4 icon badge items.
- If both classic Mega menu and Product Showcase are assigned to the same menu item, Product Showcase takes priority.
- The mobile version requires Show in mobile menu to be enabled.
- If a separate mobile menu is used, the matching menu item must also exist in the mobile menu.
- Defer loading is recommended because product grids inside the header can affect page load performance.
Troubleshooting
If the Mega Menu Product Showcase does not display correctly, please check the following:
- Make sure you are using Be Yours version 9.2.0 or later.
- Make sure the block has been added to the Header section.
- Make sure the Menu item setting exactly matches the top-level menu item title.
- Make sure the top-level menu item has child links.
- Make sure child menu items are linked to collections if you want product cards to display.
- Make sure the selected collections contain active products.
- Make sure the products are available on the Online Store sales channel.
- If the mobile showcase does not appear, make sure Show in mobile menu is enabled.
- If using a separate mobile menu, make sure the matching menu item exists in that mobile menu.
- If the promo card does not appear, make sure a promo image has been selected.
- If the trust bar does not appear, add at least one Menu icon badge block to the Header section.
- If product badges do not appear, check the product label metafields, sold-out status, or sale badge settings.
- Clear your browser cache and refresh the storefront.
- Make sure you are using the latest version of the Be Yours theme.
Need Further Assistance
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
Inventory Status Block Be Your Theme
How to set up Similar Products for Product Cards in Be Yours