With the Shopify update, all customers are allowed to add 50 blocks to a section, which means there is no longer a limitation of 16 blocks. This is why the Mega menu configuration in Kalles 4 is a bit different from Kalles 3.x.x. Let’s stick to this article to figure it out.

In Kalles 4, you must configure for Mega menu both on Header Inline and Mega Menu. Header Inline is all Header title and Mega menu is all menus inside. The separation helps us when switching the Header, we can still keep all mega menu editing inside. A Mega Item in Header Inline is linked with Mega Menu by a corresponding ID

1. Mega Menu Types

1.1. Mega Menu (Parent)

• There is a total of 16 IDs here, from #1 to #16. You just need to choose the same ID for Mega Menu and Mega Item to connect them.

1.2. Linklist (Child)

• Heading: You can enter Heading for Mega Menu here.
• Link: When your customers click on Menu, the link will work. Moreover, you can choose between open in the current or new window, or even add an icon.
• Add menu: You can add a menu that contains many submenus here.
• Width col: You can change the width of each block of a Mega Item here. The column rates are corresponding to percentages.

1.3. Link list 2 (child)

All configurations are the same as Linklist (child) above. The only different thing is the style that you can see in the below image.

1.4. Products (Child)

• Collection: You can choose a product collection for your menu.
• Product item design: There are 6 designs for you to choose from. You can also choose to show Vendor or not.
• You are allowed to change Image ratio, Image size, Image position, Product Content Align, Items per row, and Space horizontal/vertical items.
• Maximum products to show: You can choose to show how many products.
• Layout design: There are Carousel and Grid. You can choose between these two options
• Pre/Next button: You can change Visible status, Style, Shape, Color, Size for the buttons.
• Hidden buttons on mobile: Turn it on to hide the Pre/Next button on the mobile version.
• Width col: You can change the width of each block of a Mega Item here. The column rates are corresponding to percentages.

1.5. Collection (child)

• Collection: You can choose a product collection for your menu.
• Collection label: It will overwrite your Collection title. Leave it blank if you don’t want to change it. Furthermore, you can also add Subtitle, an Image for the collection.
• Collection item design: There are a total of 13 designs for you to choose from.
• Open link in: This option allows you to choose open the collection in the current window or new window.
• Color: You can change the color of Collection title, hover title, subtitle, count, and border.

Note: There is a “Connect dynamic source” at the end of each color option. This belongs to Shopify default so our theme doesn’t support that option.

• Space bottom: You can adjust it for both Desktop and Mobile versions.
• Besides, you can adjust the Border, Pading, Image Round, Image hover effect, Collection hover effect, Image Radio, Image Size, Image position.
• Link (optional): You can add a link here to overwrite your collection link. Leave it blank if you don’t want to replace it.
• Width col: You can change the width of each block of a Mega Item here. The column rates are corresponding to percentages.

1.6. Banner (Child)

• Banner ratio: There are 3 options for you to choose from, including Adapt to image, Fullscreen, and Custom height.
• Image size: These settings apply only if the image ratio is not set to ‘Adapt to image’.
• Image position: The first value is the horizontal position, and the second value is the vertical position. These settings apply only if the image ratio is not set to ‘Adapt to image’.
• Banner height: Only work when “Banner ratio” is “custom height”.
• Image item: You can upload an image for your banner here. In addition, you also can adjust Image hover effect, Banner effect when hover, Banner link and Open link in.
• Content HTML: You are allowed to freely add HTML content to your banner, especially, the content alignment can be adjusted too.
• Content position options: You can change Content vertical position, Content horizontal position, Text and Color Overlay, and Overlay opacity.
• Width col: You can change the width of each block of a Mega Item here. The column rates are corresponding to percentages.

1.7. HTML (Child)

• HTML custom: Allow you to add HTML directly here.
• Content page: You can create a page before adding it here to show.
• Width col: You can change the width of each block of a Mega Item here. The column rates are corresponding to percentages.

1.8. Blog (Child)

• Blog: You can add a blog that contains many different blogs post here.
• There are so many designs for blog posts, you can click on Post item design and pick one. Besides, you are allowed to show Categories, Tags, Short content, Author, Date, Comment, Readmore, and a Readmore icon or not.
• Date format: You can choose among many available formats.
• Image hover effect: All hovering effects will resize your images.
• Layout design: You can choose between Grid and Carousel.
• Option for Carousel layout: There are so many options for the pre/next buttons there.
• Width col: You can change the width of each block of a Mega Item here. The column rates are corresponding to percentages.

2. How to connect the Mega Menu to a Header?

There are three kinds of Header blocks including Mega Item, Dropdown, and Base Item. Please pay attention that ONLY MEGA ITEM can be used to create a Megamenu.

2.1. Mega Item (Used to build Mega Menu)

MEGA ITEM

• Heading: You can enter Heading for Mega Menu here.
• Link: When your customers click on Menu, the link will work. Moreover, you can choose between open in the current or new window, or even add an icon.
• Custom heading color: You can enable it or not. If you enable it, you can add Label, and change the Heading and Label color.

Note: There is a “Connect dynamic source” at the end of each color option. This belongs to Shopify default so our theme doesn’t support that option.

SUBMENU

• Position: There are three positions for you to choose including Start, Center, and End.
• Submenu width: You can choose Full Width, Content full width, and Custom width.
• ID (ID connect mega menu): There is a total of 16 IDs, which means that you can create 16 different 16 mega menus and connect them to Megamenu.
• Besides, you can adjust horizontal/vertical item space by pixel.

2.2. Dropdown Menu

You don’t need an ID to link with Mega Menu here because you are allowed to add only one menu in this part.

• Heading: You can enter Heading for Mega Menu here.
• Link: When your customers click on Menu, the link will work. Moreover, you can choose between opening in the current or new window or even adding an icon.
• Add menu: You can add a menu that contains many submenus here. Then, all will be shown under the drop-down type.
• Custom heading color: You can enable it or not. If you enable it, you can add Label, and change the Heading and Label color.
• Position: There are three positions for you to choose from, including Start, Center, and End.
• Submenu width: You can choose Full Width, Content full width, and Custom width.

2.3. Base item

You don’t need an ID to link with Mega Menu here because you are allowed to add only a link in this part.

• Heading: You are allowed to enter Heading here.
• Link: You can paste a random link or choose an available link (page/collection/product).
• Besides, you can add Icon, Heading color, Label, and Label color here.