Megamenu Item

The Megamenu Item is a special element available within the Megamenu Modules section, found under Header Extensions.

It allows you to build a large, multi-column dropdown menu by adding multiple types of content blocks — such as banners, product grids, galleries, or text sections — into a single menu item. You can add as many Megamenu Items as needed to suit your store structure and navigation design.


Megamenu Item — Options Overview

Option

Description

Menu item name

Enter the name of the menu item that will display as the title of your megamenu in the store header. This should match or correspond to an existing item in your main navigation menu.

Header closed menu

This setting applies if you’re using the Closed menu header type. In this mode, additional megamenu blocks are not automatically shown, so you can enable this option to connect and display custom blocks within the closed menu layout.

Enable blocks

Toggle this option to activate additional megamenu content blocks (e.g., banners, galleries, or featured collections). When enabled, new block options appear under the current Megamenu Item.


Megamenu Item — Available Blocks

Each Megamenu Item can include multiple content blocks that help extend its functionality and visual design. These blocks are shared across the theme and may also appear in other sections, offering consistent configuration and styling options.

Block Type

Description

Banner

Displays a promotional banner inside the megamenu. You can upload an image, add overlay text, and link it to a page or collection. Useful for highlighting offers or featured categories.

Banner with text outside

Similar to the standard banner, but the text is displayed outside (below or beside) the image. This layout works well for minimalist menu designs or image-focused promotions.

Recent post

Adds a block showing the latest blog posts. You can showcase news, articles, or updates directly in your megamenu, encouraging visitors to explore your content.

Media with text

Combines an image or video with a short text description. Ideal for visual storytelling, highlighting brand messages, or showing featured products with descriptions.

Grid of products

Displays a customizable grid of selected products. Useful for promoting bestsellers or related products directly in your menu without requiring an additional page visit.

Gallery

Shows a small gallery of images inside the megamenu. Often used to display product collections, lookbooks, or seasonal visuals.

Featured Collection

Lets you select a Shopify collection to display directly in the megamenu. The products from that collection are shown automatically based on your store’s data.

Fake navigation links

This empty block is needed to organize the elements. The navigation links block duplicates the real block with links from the mega menu for sorting blocks.

Empty column

Empty column. An empty column works on a large screen. It's needed for dynamic placement of design columns.

Usage Notes

  • You can mix and arrange these blocks freely within each Megamenu Item to achieve the desired structure and layout.

  • The design, hover effects, and colors follow the general settings defined in your Header design and Theme settings.

  • Content within each block can be customized with links, images, and colors for full branding control.


Let’s take a brief look at the options available for each block:

Option

Description

Type

Determines the media type used in the banner. Options: Image or Video.

Image

Allows uploading or selecting an image to display in the banner.

Image ratio

Sets the aspect ratio of the image. Options: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9).

Roundness of the image

Controls the border radius (rounded corners). Options: Default or Custom.

Image overlay opacity

Adjusts the transparency of the color overlay applied to the image (0–100%).

Image overlay fill

Defines the overlay color applied over the image. Useful for creating contrast between the image and text.

Content

Link

Adds a clickable link to the entire banner or a specific button within it.

Heading

Sets the main title or text overlay shown on the banner.

Description

Adds supporting text or a short paragraph under the heading.

Heading after description

Changes the order of heading and description, placing the heading below the description.

Button

Adds a call-to-action (CTA) button with customizable text and link.

Settings

Heading size

Controls the size of the heading text.

Underline on hover

Adds an underline animation to text or buttons when hovered over.

Text position

Defines where the text box appears on the banner. Options: Top left, Top, Top right, Center left, Center, Center right, Bottom left, Bottom, Bottom right.

Text align

Aligns the text inside the text box. Options: Left or Center.

Description width

Sets how wide the description text can be (0–100%).

Show text box

Displays or hides the text box background for better visibility.

Colors

Heading

Defines the color of the main heading text.

Heading hover

Sets the hover color for the heading text.

Description

Defines the color of the description text.

Description hover

Sets the hover color for the description text.

Button

Sets the base color for the CTA button.

Show background

Enables or disables a background behind text elements.

Background

Selects the background color for the text area.

Background gradient

Adds a gradient background to the text box.

Border

Defines the border color and visibility for the text box.

Text

Controls the color of all text inside the banner area.

Show background on hover

Enables a separate background color when hovered over.

Background hover

Defines the hover color for the background.

Background gradient hover

Adds a gradient effect when hovered.

Border hover

Defines how the border appears on hover.

Text hover

Sets the hover color for text.

Enable shadow

Adds a drop shadow effect to the text box or banner.

Shadow

Defines the default shadow color and intensity.

Shadow hover

Sets the shadow appearance when hovered.

Box

Background

Controls the box background color behind the image or video.

Background hover

Changes the box background color on hover.

Media button

Background

Sets the background color of media buttons (like video play or slider arrows).

Video button, slider buttons — Icon

Controls the icon color and style for video or slider controls.

Video button, slider buttons — Background hover

Changes the background color of media buttons when hovered.

Video button, slider buttons — Icon hover

Changes the color of media button icons on hover.

Other

Image overlay color

Defines the color overlay applied over the banner image for visual enhancement or readability.


Option

Description

Image

Upload or select an image to display in the banner. This image serves as the main visual element of the block.

Image hover

Defines how the image behaves when hovered over. The hover effect depends on the theme’s general settings or selected animation style.

Image ratio

Controls the proportion of the image. Available ratios include:• Auto – keeps the original image ratio.• Portrait (3:4) – vertical image format.• Landscape (4:3) – horizontal image format.• Square (1:1) – equal width and height.• Round (1:1) – creates a circular image.• Social story (9:16) – tall format ideal for story layouts.• Widescreen (16:9) – cinematic horizontal ratio.

Roundness of the image

Adjusts the corner rounding of the image.• Default – uses theme defaults.• Custom – allows manual customization of border radius.

Content

Defines the textual and interactive content displayed outside the banner image (such as headings, links, and buttons).

Link

Adds a clickable URL to the banner, making the image or button link to a page, product, or collection.

Heading

Sets the main title text displayed with the banner. Used to highlight key information or messages.

Description

Optional text field for adding a short description or supporting information below the heading.

Button

Adds a call-to-action button below the text. You can customize its link and style in this section.

Settings

A group of options controlling text size, alignment, and style.

Heading size

Adjusts the font size of the heading. Available sizes: Extra Large, Large, Medium, Small, Extra Small.

Underline on hover

When enabled, underlines the text when the user hovers over the heading or link.

Text align

Aligns text horizontally relative to the banner content. Options: Left or Center.

Colors

Manages color customization for text, links, backgrounds, and hover states.

Link

Sets the base color of any links displayed in the banner.

Link hover

Defines the color of the link when hovered.

Description

Sets the color of the description text.

Button

Defines the default color styling of the call-to-action button.

Show background

Enables a background behind the text area for better contrast and visibility.

Background

Selects a solid background color for the text container.

Background gradient

Applies a gradient color transition to the background area.

Border

Adds a border around the text container; you can customize its color and width.

Text

Sets the main text color for headings and descriptions.

Show background on hover

Enables a background color effect that appears only when the user hovers over the banner.

Background hover

Defines the hover-state color of the background.

Background gradient hover

Applies a gradient background when hovered.

Border hover

Defines the border color when hovered.

Text hover

Changes the text color when hovered.

Enable shadow

Adds a drop shadow to the banner container or image, enhancing depth and contrast.

Shadow

Defines the shadow color and intensity for the banner’s normal state.

Shadow hover

Specifies the shadow style when the banner is hovered over, typically used to highlight interactivity.


Recent Post

Option

Description

Heading

Allows you to set a custom heading title for the recent posts section. This title will be displayed above the posts.

Recent post

Defines that this block will display the most recent articles from a selected blog.

Number of columns (1–3)

Controls how many posts are displayed per row. Choose between 1, 2, or 3 columns depending on layout preference.

Blog

Selects which blog to display posts from. You can choose from any of the blogs available in your Shopify admin.

Blog posts

Specifies the number of recent posts to display from the selected blog.

Align text relative to image (Top, Center)

Adjusts the vertical positioning of the text in relation to the featured image. Use Top for alignment above the image or Center for alignment centered next to it.

Image ratio

Determines the shape and proportion of post images. Options include: • Auto – maintains the original image ratio • Portrait (3:4) – vertical orientation • Landscape (4:3) – horizontal orientation • Square (1:1) – equal width and height • Round (1:1) – circular crop • Social story (9:16) – tall, mobile-oriented format • Widescreen (16:9) – wide display format

Show featured image

Toggles the visibility of the blog post’s featured image. Disable to display text only.

Roundness of the image (Default, Custom)

Adjusts the image’s border radius. Default uses the theme’s standard style, while Custom allows manual adjustment of corner roundness.

Truncate post heading

Shortens long post titles automatically to fit within a single line or limited space.

Underline on hover

Adds an underline effect to the post title when hovered, improving interactivity.

Show tags

Displays the tags assigned to each post, if available. Useful for indicating post categories or topics.

Show date

Shows the publication date of each post.

Show author

Displays the author’s name associated with each blog post.

Show comment count

Displays the number of comments for each post, if commenting is enabled in your blog settings.

Excerpt (Hide/Show)

Controls whether a short excerpt from the post content is displayed beneath the title.

Show truncated content

Limits the excerpt length to prevent overly long text from appearing.

Colors — Heading

Defines the color of the section heading text.

Colors — Link

Defines the color of links such as post titles or tags.

Colors — Link hover

Defines the color of links when hovered.

Colors — Description

Defines the color for post excerpts or descriptions.


Usage tip: The Recent Post block is ideal for adding dynamic content to your header’s megamenu or footer area, keeping your site visually engaging and up to date with your latest blog activity.


Media with Text

Option

Description

Heading

Specifies the title or main text heading displayed above the media and text block. Useful for introducing a topic, product, or promotional section.

Media with text

Defines the type of content block that includes both media (image or icon) and text elements.

Image display

Controls whether an image is shown within the block. Options: Hide (no image displayed) or Show (image displayed).

Image ratio

Adjusts the proportion of the image. Options: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), Widescreen (16:9).

Image

Upload or select the image to display in the block. It supports theme-optimized formats and automatically scales based on the chosen ratio.

Align text relative to icon

Determines the alignment of text in relation to the image or icon. Options: Top or Center.

Media with text items

You can add up to five (5) media-with-text items. Each item includes shared configuration options such as icons, descriptions, and buttons.

Preset icon name

Select a preloaded icon from the theme’s built-in icon library. Icons can help represent categories, actions, or product types visually.

Description

Adds a short paragraph or text to describe the image or content. Ideal for marketing messages or feature highlights.

Button

Adds a customizable button below the description, which can link to internal or external pages. Useful for calls to action such as “Learn More” or “Shop Now.”

Colors — Heading

Sets the color of the heading text.

Colors — Description

Defines the color for the description text.

Colors — Text icons

Controls the color of any text-related icons used in the block.

Colors — Link

Sets the color for links within the text.

Colors — Link hover

Determines the color of links when hovered over by the cursor.

Colors — Button

Defines the base color of the button text and background.

Show background

Toggles the visibility of a background for the entire block. When enabled, you can style it further with color or gradient options.

Background

Selects the background color for the block.

Background gradient

Adds a gradient background, creating a smooth color transition effect.

Border

Controls the border color and style around the media-with-text block.

Text

Adjusts the base color of all text within the block.

Show background on hover

Enables a separate background effect when a user hovers over the block.

Background hover

Sets a specific color for the background during hover state.

Background gradient hover

Adds a gradient transition effect on hover.

Border hover

Changes the border color or effect when hovered.

Text hover

Alters the color of text when hovered over.

Enable shadow

Adds a shadow effect beneath the block to create depth.

Shadow

Defines the color and intensity of the default shadow.

Shadow hover

Configures the shadow effect when the block is hovered over — typically making it more prominent or changing its direction.

Grid of Products

Option

Description

Collection

Select the collection from which the products will be displayed in the grid. Defines the product source for the block.

Number of columns

Set the number of product columns per row. Available range: 1–3.

Link

Add a link directing users to a specific page, such as a collection or promotional section.

Link name

Specify the display text for the link (e.g., “Shop All”).

Shop all

When enabled, adds a Shop All link below the grid to navigate to the linked collection.

Products

Controls the display and styling of product cards within the grid.

Align text relative to image

Choose text placement relative to product images: Top or Center.

Image ratio

Set the aspect ratio of product images: Auto, Portrait (3:4), Landscape (4:3), Square (1:1), Round (1:1), Social story (9:16), or Widescreen (16:9).

Roundness of the image

Controls image corner rounding: Default (theme default) or Custom (manual adjustment).

Show second image on hover

Displays an alternate product image when the user hovers over the product card.

Show vendor

Displays the product vendor name on the product card.

Show price

Enables display of the product price, including sale and original values.

Truncate product name

Shortens long product titles to maintain a balanced and uniform appearance.

Enable review stars

Displays review stars from your connected review app or Shopify’s built-in product rating system.

Underline on hover

Adds an underline effect to product titles or links on hover.

Show badge “Sale”

Displays a Sale badge for discounted products.

Show badge “Sold Out”

Displays a Sold Out badge for out-of-stock products.

Show badge “Feature”

Displays a Feature badge for highlighted or featured products.

Heading color

Defines the color of the section or block heading text.

Product card color

Sets the background color of each product card.

Vendor color

Defines the color of the vendor name text.

Vendor hover color

Defines the vendor text color on hover.

Product name color

Defines the color of the product title.

Product name hover color

Sets the color of the product title when hovered.

Regular price color

Defines the color for non-discounted prices.

Sale price color

Sets the color for discounted prices.

Old price color

Defines the color for the original (crossed-out) price before discount.

Link color

Sets the color for links such as “Shop All” or text links within the block.

Link hover color

Defines the color for links when hovered.

Review stars (active)

Defines the color for filled (active) review stars.

Review stars (base)

Defines the color for empty (inactive) review stars.

Option

Description

Heading

Allows you to add a title to the gallery section. This title can help identify the content or collection displayed.

Number of columns (1–6)

Defines how many images are shown per row in the gallery layout. Adjusting this setting changes the gallery’s grid density and overall layout appearance.

Image ratio

Controls the proportions of the images displayed in the gallery. Available options: - Auto: Keeps the original image proportions. - Portrait (3:4): Vertical format suitable for product or lifestyle photos. - Landscape (4:3): Horizontal layout ideal for wider images. - Square (1:1): Creates uniform square images. - Round (1:1): Displays square images within a circular frame. - Social story (9:16): Tall vertical format for mobile-style stories. - Widescreen (16:9): Wide horizontal layout, ideal for banners or video-style visuals.

Roundness of the image

Adjusts the border radius of gallery images. - Default: Uses the theme’s standard corner radius. - Custom: Allows you to define a unique roundness value for a more personalized design.

Gallery items (1–18)

You can add up to 18 individual gallery items, each with identical options. Every item represents one image in the gallery.

Image

Upload or select an image for each gallery item. Recommended format: optimized .jpg or .png with appropriate dimensions for performance.

Tooltip

Optional text displayed when hovering over the image. Useful for showing short descriptions, product names, or other contextual info.

Link

Assigns a hyperlink to each gallery image. When clicked, the image can redirect visitors to a product page, collection, or any other URL.

Colors — Heading

Defines the color of the gallery’s heading text to ensure visibility and match the theme’s color scheme.

Colors — Background

Sets the background color or gradient of the gallery section for design consistency.

Colors — Text

Specifies the text color used for tooltips, captions, or other text elements within the gallery.

Option Group

Option

Description

Collection

Collection

Select the Shopify collection to display products from. Products from this collection will appear in the featured slider or grid.

Heading

Heading

Add a custom title to the section. This helps identify the featured collection visually on your storefront.

Slider Settings

Navigation

Choose how users navigate the slider. Options include: • Disable – No navigation shown. • Dots – Displays navigation dots below the slider. • Arrows – Displays left/right arrows for navigation. • Dots and arrows – Combines both navigation styles.

Products

Number of columns

Defines how many products are displayed per row. Choose between 1–3 columns depending on layout width and visual preference.

Image ratio

Sets the aspect ratio of product images. Options include: • Auto – Uses the image’s original ratio. • Portrait (3:4) – Vertical orientation. • Landscape (4:3) – Horizontal orientation. • Square (1:1) – Equal width and height. • Round (1:1) – Circular format. • Social story (9:16) – Tall format used in stories. • Widescreen (16:9) – Wide format used for banners.

Roundness of the image

Choose Default for theme-standard corners or Custom to apply custom corner rounding.

Text align

Aligns product titles, prices, and other text elements within the product card. Options: Left or Center.

Underline on hover

Adds an underline animation when hovering over product names, enhancing interactivity.

Show badge "Sale"

Displays a Sale badge on discounted products.

Show badge "Sold Out"

Displays a Sold Out badge for out-of-stock items.

Show badge "Feature"

Displays a Feature badge for highlighted products.

Show "Countdown"

Adds a countdown timer for limited-time offers. Timer settings can be defined in metafields.

Show vendor

Displays the vendor name for each product.

Show price

Shows the product price under the name.

Truncate product name

Shortens long product titles to maintain clean alignment in the grid or slider.

Enable review stars

Displays star ratings below product names (requires an active product review app).

Colors

Heading

Defines the color of the section heading text.

Product card color

Sets the background color for the entire product card.

Vendor

Color of the vendor text.

Vendor hover

Color of the vendor text when hovered over.

Product name

Color of the product title text.

Product name hover

Color of the product title when hovered over.

Regular price

Color of the standard product price.

Sale price

Color of the discounted price.

Old price

Color for the crossed-out old price, usually shown alongside sale prices.

Badges

Section heading for badge color customization.

Sale badge

Background color for the sale badge.

Sale badge text

Text color for the sale badge.

Featured badge

Background color for the featured badge.

Featured badge text

Text color for the featured badge.

Sold out badge

Background color for the sold-out badge.

Sold out badge text

Text color for the sold-out badge.

Countdown background

Background color for the countdown timer.

Countdown text

Text color for the countdown timer.

Media button

Color customization for quick-view or media buttons appearing over product images.

Slider arrows

Color of the navigation arrows in the slider.

Slider dots

Color of the navigation dots in the slider.

Review stars

Defines star colors for review display.

Stars active

Color of filled (active) stars.

Stars base

Color of unfilled (inactive) stars.

This empty block is needed to organize the elements. The navigation links block duplicates the real block with links from the mega menu for sorting blocks.


Empty column

Empty column. An empty column works on a large screen. It's needed for dynamic placement of design columns.

Last updated