How to add a mega menu (Products)
A full guide for to display mega menu (Products) to your store.
The appearance of the mega menu (Products)
Go to the Customizer
Click on the Add block inside the Header
Add the "Mega menu (Products)" block
Copy the name of the menu item to which you want to add a mega menu.
Block settings
Menu item
Enter the name of the menu item to which you want to add a mega menu.
Products
Select the products you want to display in the Mega Menu
Heading
You can add a heading to the product column
Layout settings
Enable slider
You can display product slider or grid.
Product column width
One-third width of a column (If you want to display the product width at one-third, then you should select it). By default, it is selected
Half width of column(If you want to display half-width mega menu items and half-width products, then you should select it)
Full width of column (If you want to display only products in full width without mega menu items, then you should select it)
Number of columns on desktop
There is an option to control the product column for the desktop device.
Number of columns on laptop
There is an option to control the product column for the laptop device.
Product column width
Product card settings
Image ratio
Adapt to image: Uses the aspect ratio of the collection images is cropped.
Portrait: uses a 2:3 cropping ratio to the images.
Square: uses a 1:1 cropping ratio to the images.
Landscape: uses a 3:2 cropping ratio to the images.
Show second image on hover
Shows the second product image when a customer moves their mouse over the first image.
Show badges
For particular sections, you can show or hide product badges.
Show title
For particular sections, you can show or hide the title.
Show price
For particular sections, you can show or hide the wishlist price.
Show vendor
For particular sections, you can show or hide the wishlist vendor.
Show product rating
You can display show/hide product ratings for specific sections.
Enable quick add button
For particular sections, you can show or hide the cart button.
Quick add button display
Static
Hover
Always static on mobile
Quick add button style
Icon button
Text button
Text with icon button
Except for the "Icon button", all buttons are always displayed below the product card on mobile See more of the display
Make button full width
You can display the "Cart button" in full width.
Show "quick add button" below product card
Enabling this option will make the "quick add button" always static and occupy full width.
"Quick add button" position on desktop
You can change the "Quick add button" position on the "Product card" -
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right
It works, unless you enable the option "Show quick add button below product card"
Show pre-order button
You may want to allow customers to purchase out-of-stock items. Learn more
Show countdown
To display the countdown timer, you need to enable it. Learn more
Enable color swatches
To display color swatches, you need to enable it. Learn more
Show marquee
To display the marquee, you need to enable it. Learn more
Marquee display
Always static
Hide on hover
Always static on mobile You must follow the instructions to display the marquee on the product card. Learn more
Round corner
You can enable/disable the round corner of the product card
Card spacing
You can add padding inside of the product card by enabling this setting.
Product card color scheme
You can add a color scheme to the product card.
Inventory status
You can enable or disable it.
Low inventory threshold
You can show a " low inventory stock" message for your customer. Just add a low inventory threshold
Show inventory count
You can show/hide inventory stock count numbers.
Show always status
You can always show the inventory status for all the product cards.
If you disable the option, the inventory status will be displayed based on the quantity of the specific product inventory.
Minimum number of quantity
You can set "Minimum number of quantity" to show inventory status.
It works until you enable "Show always "
Color settings
You can add color to different statuses of inventory stock.
In stock
Out of stock
Low stock
Continue selling (You may want to allow customers to purchase out-of-stock items. Learn more )
Quick add button style on the product card
Last updated