Configure mega menu

Woodstock displays drop-down menus in two formats: simple menus and mega menus. There are 2 scenarios where the mega menu dropdown will be used::
- If a first-level menu item has at least 4 second-level menu items with subitems, the mega menu drop-down will be used.
- Added at least 1 mega menu block to the level 1 menu.
To add a mega menu block into the first-level menu item:
From the Theme Editor page, open the Header section. Click the Add Block button, then click one of Mega menu promotion, Mega menu product brand, Mega menu product type.

In each block, there are always 3 important fields:

- Mega menu trigger: enter the name of the first-level menu item that you want to add the block to the dropdown. Please note that the name entered in this field must match the name of one of the first-level menu items (case insensitive).

- Mega menu name: enter the name for the block. This will help you find the block in Theme Settings easily. It will not be shown at the storefront.

- Position: Set the position you want to insert the block to the dropdown. First or last.

1. Mega menu promotion block

This block helps you show a promotion banner in the dropdown.

Setting	Description
Image	Pick or upload an image.
Image ratio	The image ratio for the image: Adapt to image (default) - Uses the aspect ratio of the images. This prevents the images from being cropped. Portrait - Crops the images to use a 2:3 ratio. Square - Crops the images to use a 1:1 ratio. Landscape - Crops the images to use a 3:2 ratio.
Caption	The text of the caption.
Heading	The text of the heading.
Subheading	The text of the subheading.
Button label	The text of the button.
Button style	Display the button as a solid button, outline button or a link.
Text alignment	Align all texts in Left, Center, or Right.
Text position	Set the place to put texts. Only works if the OVERLAY TEXT ON IMAGE setting is enabled.
Link	The URL that you want the promotion block to link to.
OVERLAY TEXT ON IMAGE
Enable	Tick the checkbox to display text over the image. Otherwise, the text is displayed below the image.
Overlay opacity	Adjust the opacity/transparency of the overlay.
Color scheme	A set of colors that you can apply to this block. Learn more about color schemes.

2. Mega menu product brand

This block helps you show a list of product vendors. You can insert the image for each vendor.

Setting	Description
Label	The text for the block's heading.
Image ratio	Display the brand image in circle of square.
BRAND ITEM SETTINGS
Brand name	Enter the name of the brand. Please ensure the name must match one of available product vendors. The theme will generate a link to the collection vendor page base on your input. Example: /collections/vendors?q=<brand_name>
Brand image	Pick or upload an image to display it as the brand's logo.

3. Mega menu product type

This block helps you show a list of product types. You can insert the image for each product type.

Setting	Description
Label	The text for the block's heading.
Image ratio	Display the image in circle of square.
PRODUCT TYPE ITEM SETTINGS
Name	Enter the name of the product type. Please ensure the name must match one of available product types. The theme will generate a link to the collection types page base on your input. Example: /collections/types?q=<name>
Image	Pick or upload an image.

4. Mega menu badge:

This badge is shown on the right of the menu. Example: Below is the "Sale" badge on the "Watch" menu

From the Customize theme, click Header on the left sidebar, then click "Add block" and choose "Menu badge". On the right sidebar, fill out all the fields to add the badge.