Tag Archives: Shopify mega menu

Create Sub Collection in Shopify

Shopify don’t support nested Collection, But some time you want to organize/show products in 2 or more level of categories of product. We would create a sub collection using product tag and need some more works to show data in sub category.
Define your categories and subcategories
For example you want to have this hierarchy of categories/collections
Pants
Summer
Spring
Create a collection for each top category (“Pants” this case)
Assign Product tag to each product corresponds to each sub category/collection. Use the category name (such as Summer, Spring) as product tag name.

Show sub category/collection in storefront
To show sub category in shop menu we will use Navigation. Create Navigation/Link lists for each top category that point to top collections. In think links lists we add link to each sub category. Sub category link is link with correspond product tag (using “Filter with tags” feature)

Shopify menu

How to create Multi-level menus in Shopify.

There are many designers and developers having this question. And in every free theme or instruction of Shopify, you will see that it seems to be allowed to 2 levels. Now we provide the way that creates 3- level menu (see the image below). If you want more levels, please do the same.

Shopify menu

Example: In the top menu you want to have the menu with 3 levels: Electronics (level1)-> Cell phones (level2)-> Apple, Samsung, HTC (level3).

Step 1: Go to the admin-> collections and create collections:

Electronics, Cell phones, Apple, Samsung, HTC

Step 2: Create Menu level 1: Go to the admin -> navigation -> Edit Link List -> Add another link
shopify_menu1-1024x478

Step 3. Create Menu level 2 CellPhones. Go to the admin-> navigation -> Add Link Listshopify_menu2-1024x409

Step 4. Create Menu level 3: Apple, Samsung, HTC. Go to the admin-> navigation -> Add Link List

shopify_menu

After finishing, please click on navigation you will see that menus are listed as below:
shopify_menu5-1024x413

Final Step.

We need to write the code that shows three levels. In this instruction, i’m using the launchpad theme. It is written in the file Snippets/dropdown.liquid, please replace the code by this code:

 

    {% for link in linklists.main-menu.links %} {% if linklists[link.handle] == empty %}

  • {{ link.title }}
  • {% else %}

    {% endif %} {% endfor %}

We need to write the code that shows three levels. In this instruction, i’m using the launchpad theme. It is written in the file Snippets/dropdown.liquid, please replace the code by this code