It’s easy to edit or create a mega menu from scratch in Shoptimizer. Mega menus can be a great way to show nested categories and featured products in larger stores.
Appearance – Menus
Go to Appearance – Menus and click on ‘Screen Options‘ at the top.
Ensure that CSS Classes is ticked.
For the menu item you want to turn into a mega down, add the class full-width to the CSS Classes field. In this case, we’re adding it to the Men category.
Nest the sub categories under it, like the screenshot above. Each top level link will be in its own column. We can also add featured products to the dropdown – this is a nice way to showcase certain items within a top level category.
This is done by first adding a Custom Link to the menu.
Replace the Link Text with the item shortcode – it will look like this: and the CSS Classes field with: menu-item-product.
You can leave the URL hashed out with the # symbol.
The product id is unique to each product. To find out what id your featured product should have – go to the Products section in WooCommerce and hover over an item – and viola, the id will be revealed. Use this id in your menu label and the item should appear within the mega dropdown.
- Within the mega dropdown, to add a dividing line, use the class divider
- To highlight a link within the mega dropdown, use the class highlight
- Within the mega dropdown, to create a heading within an existing column, use the class heading
- To create a little bubble of text, wrap it in strong tags, like so. <strong>NEW</strong>
- If you want a mobile menu area to be expanded initially, add this additional class dropdown-open
Shoptimizer - find out more
The fast WooCommerce theme built for speed and conversions.