With the Charge theme, you can apply the different dropdown types of the top menu by their names. It is easy to change any top-level menu with its dropdown type by copy-paste. Specify the names of items in the Megamenu items name or Small menu items name fields. The main Dropdown menu type option will be ignored in this way for listed items.
Note: You can still use the option Dropdown menu type for most menu items and list some items to change their dropdown type separately.
To start working with menu dropdown content, go Header section - Dropdown content.
Here it is possible to:
- Enable\disable the display of dropdown content.
- Remove the dropdown menu items. It will allow you to show the Banner image only or with the Collection list together.
- Choose the alignment for items. The content will be vertically aligned creating visual interest.
- Select the image for the banner. You can choose a product image and paste the product link in the Image link field.
- Specify the title for the image.
- Insert the image link.
- Pick up collections to show in the dropdown content.
- Add the link to the collection list.
- Set the items' width.
Since the 1.7.0 Charge theme release, we added the possibility to show the product list in the dropdown menu. In the Header, you should press the Add block button and choose the Product list.
Then it will be possible for you to configure the Product list settings:
- Remove menu links to remove menu items and show the Image banner or Collection list in the dropdown.
- Select collection products.
- Set the maximum number of products to show in the block.
- Set the item's width.
- Set the index of the parent-item menu. (Top level menu)
- Add a link to the collection list.
- Switch the "View all" appearance between the Button and Text link.
- Show product price, badge, and outline border.
Now let's discuss the different dropdowns in the navigation menu available with the Charge theme.
Before you start adding, it is important to remember:
To show only a banner or some collection list in the dropdown menu content, the menu must include at least one item that could be removed using the config option Remove menu links.
Show the banner images in the dropdown content
Use the Dropdown content of the Header section that is available only for items with Megamenu dropdown type. First, you have to check the Remove menu links checkbox to remove menu links. Then choose the banner image and set set index of the parent item menu to apply this change. That's the result below.
Show only product images with links to the product pages
Show the collection list between banner images
Use the Dropdown content of the Header section. You have to use the Index of the parent-item menu. (Top level menu) field. You have to add an Image banner and select collections for a specific parent item. Then for the same parent item, you can add another Image banner. That's the result below.
or place items in the following order:
Using the advanced navigation features of the Charge theme you can create various dropdown content designs according to your store needs. For instance, you can:
Show only the collection list in the dropdown menu
Show dropdown menu links with the product images
Here you can see the header section and dropdown content in full width.
Show the collection image in the row
Since the 1.6 release, we've added the Show collection image checkbox for small menu settings. You have to enable it to get the next result.