Suruchi Shopify Theme
Try suruchiDemos
  • What is Suruchi theme?
  • CHANGE LOG
  • Support Policy
  • Refund Policy
  • Getting Started
    • Purchase code Verify
    • How to install Suruchi Theme?
    • How to set up your store as a Suruchi demo?
    • How to update Suruchi Theme?
  • Header Group
    • What is a header group?
    • Announcement bar
    • Header
    • Menu
      • How to create menu?
      • How to add a dropdown menu
      • How to add a mega menu (Promo banner)
      • How to add a mega menu (Collections)
      • How to add a mega menu (Products)
      • How to add a mega menu (Banner)
  • Footer Group
    • What is a footer group?
    • Footer
    • Mobile navigation bar
    • Popup
  • Theme Sections
    • How to add a section?
    • Slideshow
    • Featured collection
    • Collection list
    • Before/after image slider
    • Scrolling text
    • Shop the lookbook slider
    • Advanced Search Filter
    • Shop the look
    • Lookbook
    • Banner list
    • Product tabs
    • Featured product
    • Gallery
    • FAQ / Collapsible content
    • Image banner
    • Image with text
    • Multicolumn
    • Featured promotion
    • Video
    • Video hero
    • Testimonial
    • Text with banner masonry
    • Text with banner grid
    • Tiktok
    • Logo list
    • Image with biography
    • Google map
    • Counter up
    • Countdown banner
    • Contact info with map
    • Collection product banner
    • Contact form
    • Email signup
    • Rich text
    • Blog list
    • Welcome video
    • Page
  • Theme Settings
    • General
      • How to enable RTL Layout
    • Layout
    • Colors
    • Typography
    • Product card
    • Color swatches
    • Quick shop
    • Wishlist page
    • Social media
    • Cart
    • Search
    • Customer/account
    • Checkout
    • Custom css
  • Collections & Products
    • Product page
      • Create a product template
      • Page sections
        • Page title banner
        • Product template
        • Product recommendations
        • Product Tabs
        • Recently Viewed Product
    • Products
      • Add local pickup to your store
      • Add product to your store
      • How to add a unique tab on the product page
      • Add a countdown timer to the product
      • Show a custom badge to your product
      • Show a Marquee badge to your product
      • Add a product short description using a metafield
      • How to add a size guide popup for the individual product?
    • Collection page
      • Add Collections
      • Create a collection template
      • Page sections
        • Page title banner
        • Collection banner
        • Product grid
    • Collection list page
      • Add Collections
      • Page sections
        • Collection page title banner
        • Collection list section
  • Other Pages
    • Create a page
    • Create a page template
    • Blogs
      • Add blog post
      • Blog page
    • Blog posts / Article
    • Cart page
    • Search page
    • 404 page
    • Password page
    • Wishlist page
    • Compare page
  • Language & Countries/Regions
    • How to enable the COUNTRY/REGION of your store?
    • How to enable LANGUAGE of your store?
    • How to edit default theme content
    • How to translate theme for multiple languages
  • General Topics / FAQ
    • How to add a collection to your store?
    • How to enable free shipping bar
    • How to enable the pre-order product to your store
    • How to add product reviews to your store
    • How to add Complementary products
    • Add a gift wrap option to your cart
    • How to add a product to your store?
    • Add Shopify 2.0 storefront product filtering
    • Add recommended products to your store
    • Set up local pickup
    • How to enable a customer account?
Powered by GitBook
On this page
  • Block settings
  • Product column width
  • PRODUCT GRID SETTINGS
  • Product card settings
  • Video Tutorials
  1. Header Group
  2. Menu

How to add a mega menu (Products)

A full guide for to display mega menu (Products) to your store.

PreviousHow to add a mega menu (Collections)NextHow to add a mega menu (Banner)

Last updated 1 month ago

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

Settings
Description

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

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)

Product column width

PRODUCT GRID SETTINGS

Settings
Description

Enable slider

You can display product slider or grid.

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 card settings

Settings
Description

Card style

  • Style 1: All action buttons will always be displayed if you select this

  • Style 2: All action buttons will appear on hover when you select it

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 cart button

For particular sections, you can show or hide the cart button.

Show quick view

For particular sections, you can show or hide the quick view.

Show compare button

For particular sections, you can show or hide the compare button.

Show wishlist button

For particular sections, you can show or hide the wishlist button.

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.

Video Tutorials