Dropdown menu in main navi to product variations

New Member
8 0 0

Hi! 

I'm totally new to Shopify, trying to set up my shop and having a problem. 

Lets say I have 5 products in 8 sizes and 10 colors. In my main navigation on top, I'd like to have three drop down menus:

 

- Products (listing the 5 products)

- Size (listing all 8 sizes and if I click on one size I get a overview of all products that are available in that size)

- Color (same like size but instead for the 10 colors)

 

How do I do this? Does it depend on the theme? My current theme is "Debut". Or do I have to code it my self? Do I have to use a thrid party app? 

 

Thanks people!

0 Likes
New Member
8 0 0

p.s.

I found out how to create the drop down and how to create collections for the variants but if I click on on size, only one product is shown. But I'd like make it show all different colors on one page in that particular size. Is this somehow possible without having to create more products? (like: product 1 size XS with 10 vvariations for colors, etc..)

0 Likes
Shopify Expert
2490 417 525

Hi @Futurizer 

You can add three menu in Online store->navigation

1. Products(give link of product to each sub menu)

2. Size(open product and select particulate size so you get its url in browser with ?variant=52934994517 copy and add this in navigation link with respect to size.)

3.Color(do same as size)

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

Hi @

thanks but I dont quiet understand. 

So if i get it right, I should add a new menu item. There I have to fill in a name and a link. I name it the particular size "iPhone 8" but if I paste the "?variant=31397329056395" in the link field, its not being accepted. It just states "no results"..

 

0 Likes
Shopify Expert
2490 417 525

You need to add link with your product page like bellow:

https://shopify.com/products/product_name?variant=31397392056395

Here all thing are change base on your details 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
8 0 0

But then its a link only to that product right? What I want is this: Lets say there is one product "phone wallet". This product is available for 8 phone models (sizes) in 10 colors. So I have 1 product in 80 variants. Now if someone clicks for example on size "iPhone 8" he/she should land on a page that shows all 10 colors (showing 10 of the 80 variants).

 

Right now, when clicking on "iPhone 8" the user will land on a page with only one product and has to click on it to see the other colors. And when clicking on this one product, not even the right size (iPhone 8) is selected by default but another iPhone model. 

0 Likes