Mega menu
A mega menu opens a large panel under a main menu item, with room for collection images, products and a promo. In Treble you build it from blocks: each Mega menu block attaches to one top-level menu item and holds columns of collections, products, links and promos.
Before you start
Create your main menu in Content > Menus.
Give each collection an image: it is used for round category images and the image showcase.
Mega menus show on desktop. Phones use the menu drawer.
How to set it up
Step 1: Add a Mega menu block to the header
- In the theme editor, click Header.
- Click Add block and choose Mega menu. Add one for each menu item that should open a panel.
Step 2: Connect it to a menu item
- Select the Mega menu block.
- In Menu item (1), type the title of the top-level item, for example
Shop. - Optional: turn on Show the menu item's links (2) to show the item's sub-links as the first column.
Step 3: Add columns
- Under the Mega menu block, click Add block and choose Collections, Links, Products or Promo.
- Set each column's Column width. The panel is a 12-column grid, so widths that add up to a full row sit side by side, for example 3/4 + 1/4.
Step 4: Build a Shop panel: categories with products
- Add a Collections block and choose the collections.
- Set Style to Categories with products (1) and the number of Products in preview (2).
- Turn on Add an all collections tile (3) for a link under the list, for example "All products".
- Keep Collection thumbnails on Collection image (4) and set Column width to 3/4 (5), then add a Promo block at 1/4.
Step 5: Build a Collections panel: image showcase
- Add a second Mega menu block with Menu item
Collections, and a Collections block at Full width. - Set Style to Image showcase and pick a Hover effect: Expand widens the card under the pointer, Zoom draws its image closer.
- Turn on Add an all collections tile for a closing card.
Step 6: Adjust the panel
- Select the Mega menu block: Width, Vertical padding, Show lines between columns and Color scheme style the panel.
- The Bottom bar adds a line of text and a link along the bottom, for example a shipping promise.
Settings reference
Mega menu
| Menu item | Title of the top-level menu item that opens this mega menu, for example Shop. |
|---|---|
| Menu links | |
| Show the menu item's links | Adds the item's sub-links as the first column. Add Links, Collections, Products or Promo blocks for the other columns. |
| Links width | Options: 1/6, 1/4, 1/3, 1/2. |
| Link columns | Options: 1, 2, 3. |
| Layout | |
| Width | Full width lines the content up with the edges of the header. Options: Page width, Wide, Full width. |
| Vertical padding | Slider. |
| Show lines between columns | Turns this on or off. |
| Color scheme | Colors from Theme settings > Colors. |
| Bottom bar | |
| Text | A short line along the bottom, for example a shipping promise. |
| Link label | |
| Link | Defaults to the menu item's link. |
Collections
| Collections | Collections to show. |
|---|---|
| Heading | |
| Typography | Options: Body, Subheading, Heading, Display. |
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Make font bolder | Turns this on or off. |
| Collection titles | |
| Typography | Theme default: the heading font in rows, the body font under tiles. Options: Heading, Display, Subheading, Body. |
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Make font bolder | Turns this on or off. |
| Layout | |
| Style | Categories with products: pointing at a collection shows its products beside the list. Image showcase: collection images in one row. Options: Categories with products, List, Image tiles, Image showcase. |
| Products in preview | Slider. |
| Tiles per row | Slider. |
| Hover effect | Options: Expand, Zoom. |
| Add an all collections tile | Turns this on or off. |
| All collections label | |
| All collections link | Defaults to the collections list page. |
| Collection thumbnails | Options: Collection image, Icon, None. |
| Icons | Icon names in collection order, e.g. headphones, earbuds, speaker, plug. A collection's custom.icon metafield wins. |
| Icon background | Turns this on or off. |
| Show product count | Turns this on or off. |
| Column width | Options: 1/4, 1/3, 1/2, 2/3, 3/4, Full. |
Products
| Heading | |
|---|---|
| Products from | Options: A collection, Products I choose. |
| Collection | Used when products come from a collection. |
| Products | Used when you choose the products. |
| Products to show | Slider. |
| Layout | Options: Cards, Compact list, One large, others listed. |
| Show view all link | Turns this on or off. |
| Column width | Options: 1/4, 1/3, 1/2, 2/3, 3/4, Full. |
Links
| Menu | A menu from Content > Menus. |
|---|---|
| Heading | |
| Typography | Options: Body, Caption, Subheading, Heading. |
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Link columns | Options: 1, 2. |
| Column width | Options: 1/6, 1/4, 1/3, 1/2. |
Promo
| Image | An image from your files. |
|---|---|
| Video | Plays muted on a loop. Replaces the image. |
| Label | |
| Heading | |
| Typography | Options: Heading, Display, Subheading, Body. |
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Font scale on mobile | Slider. |
| Make font bolder | Turns this on or off. |
| Text | |
| Typography | Options: Caption, Body, Subheading. |
| Font scale | 100% is the size of this style in Theme settings > Typography. |
| Link label | |
| Link | Where the link goes. |
| Text position | Options: Over the image, Below the image. |
| Image shape | Options: Portrait, Square, Landscape. |
| Color scheme | Colors from Theme settings > Colors. |
| Column width | Options: 1/6, 1/4, 1/3, 1/2. |
How it works
- A panel opens when the pointer rests on its menu item or the item gets keyboard focus. Moving to another item swaps the content without closing the sheet.
- Menu item matching ignores capital letters, spaces and punctuation. If nothing matches, the editor shows a dashed note instead of the panel.
- Categories with products shows the first collection's products at rest, in the collection's sort order, with color swatches (Theme settings > Product cards) and a Sale or New badge on the large product.
- On phones the menu drawer shows the menu instead.
Troubleshooting
The panel doesn't open.
Check that Menu item matches a top-level item of the menu chosen in Header > Menu.
A column says "Choose collections to show here."
The Collections block has no collections selected yet.
An image showcase card shows a placeholder.
The collection has no image. Add one in Products > Collections (square, at least 1000px).