Create a Mega Menu

100 views September 12, 2019 September 12, 2019 hyun-dung 0

I. Mega Menu

Go to Sections -> Main navigation -> Add content

There are 10 type Mega menus. And you can choose one or all of them.

+ Tick on Hidden block at the end: if you want to hide any mega menus.

    • Setting

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Add sub menu: Choose menu which you want to show.

    • Product setting

__Show product: Tick on to show product.

__Conditions:

+ Automatically select products based on conditions: If you tick on here, scroll down to Automatically select products to choose showing collection and Number of product to display.

+ Manually select products: If you tick on here, scroll down to Manually select products to choose showing products.

__Show product vendor: Tick on to show product vendor.

__Use sale countdown: Countdown to the end of sale date will be shown. Make sure you have set final date of the product sale price. product.metafields.meta.countdown ( 2018/01/19 ). The countdown timer only show on the product which have beeb set nay Metafield/ Shopify FD

    • You can go to

Product Metafield

    •  to know more.

After you can choose style show for Countdown on Countdown style.

    • Design image

+ Aspect Ratio : It set aspect ratio for image. And there are 13 types

+ Image size:There 2 types

+ Image position:The first value is the horizontal position and the second value is the vertical

    • Shipping options

 

Result:

    • Setting

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Add sub menu: Choose menu which you want to show.

    • Banner setting

+ Show banner: Tick on to show banner.

+ Image: Choose image from libraries.

+ Link to: Choose the link redirect to when you click to banner.

    • Shipping options

 

Result:

    • Setting

 

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Add sub menu: Choose menu which you want to show.

__Sub menu position: You can choose showing style for menu.

+ Auto(Default)

+ Center

    • Setting

 

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Add sub menu: Choose menu which you want to show.

__Sub menu position

+ Left(Default):

+ Right:

    • Setting

 

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Collection to use: Choose collection which you want to show.

+ Number of products to display:

+ Use product vendors: Tick on to show product vendors.

+ Use sale countdown: Countdown to the end sale date will be shown. Be sure you have set final date of the product sale price. Go to Product Metafield to know more.

__Countdown style:

+ Countdown timer default

+ Countdown timer light

+ Countdown timer light 2

+ Countdown timer dark

    • Design image

+ Aspect Ratio : It set aspect ratio for image. And there are 13 types.

+ Image size:There 2 types

+ Image position:The first value is the horizontal position and the second value is the vertical

    • Slider setting

    • Banner setting

Show banner : Tick on to show banner.

Link to: When you click to banner, it redirect to page selected.

Result:

    • Setting

 

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Collection to use: Choose collection which you want to show.

+ Number of products to display:

+ Use product vendors: Tick on to show product vendors.

+ Use sale countdown: Countdown to the end sale date will be shown. Be sure you have set final date of the product sale price. Go to Product Metafield to know more.

__Countdown style:

+ Countdown timer default

+ Countdown timer light

+ Countdown timer light 2

+ Countdown timer dark

    • Design image

+ Aspect Ratio : It set aspect ratio for image. And there are 13 types.

+ Image size:There 2 types

+ Image position:The first value is the horizontal position and the second value is the vertical

    • Setting slider

Result:

    • Setting

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Blog to use: Choose collection which you want to show.

+ Number of products to display:

    • Design image

+ Aspect Ratio : It set aspect ratio for image. And there are 13 types.

+ Image size:There 2 types

+ Image position:The first value is the horizontal position and the second value is the vertical

    • Setting slider

Result:

    • Setting

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Contact info: Write code HTML.

Result:

    • Setting

 

Result:

    • Setting

+ Navigation Title: Enter the title of menu.

+ Icon: Go to The icons to get.

+ Navigation Link: When you click to menu, it redirect to the other page selected.

+ Navigation label: Enter the name of label of menu.

+ Navigation label color: set color for label.

+ Custom HTML: Write code HTML to create a drop-down menu.

Result:

Was this helpful?