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:
Banner
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.
Banner with Text Outside
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.
Gallery
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.
Featured Collection
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.
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.
Last updated