I am looking for a solution to implement a feature on my Shopify store, allowing customers to easily select products from dropdown menus. These dropdowns should include various options, such as size and color for the chosen product. Similar to theoodie.com’s matching bundle pages, I want customers to be able to pick one product with specific variants (like size and color) and then select another product with different variants, all on the same page.
For example, my store sells a variety of items like t-shirts, crop tops, sweaters, hoodies, cropped long sleeves, and cami crop tops. I want to create a dedicated product page for “matching products” featuring two designs, “I’m A Girl” and “I’m a Boy”. Customers should be able to choose their desired product, along with its specific size and color options for “I’m a Girl”. Additionally, on the same page, they should have the option to select another product and its corresponding variants, this time with the “I’m a Boy” design.
An example of this feature can be seen in the video I’ve attached (note that there aren’t the quick view + select size and color that I mentioned though)
Hi @Nurofen ,
I’d like to clarify your requirements to ensure I provide the most accurate solution.
Will your product page display various designs or product types such as t-shirts, crop tops, sweaters, and hoodies for customers to choose from?
Once a design is selected, customers will proceed to choose the size and color for the “I’m a girl” version. Following that, they will make a separate selection for the “I’m a boy” version with the same chosen design/ product type.
Do you offer a wide range of size and color options for each version?
How do you currently manage your products? Are “I’m a girl” and “I’m a boy” sharing the same pool of colors and sizes, or do you create distinct products for boys and girls?
1 Like
Hello,
thank you for the response!
“I’m a girl” and “I’m a boy” were just a made up example, to make it clearer I will call them product “A” and product “B”: products A are defined by products that are tagged (also, not only) with “0001” while products B are those tagged with “0002”. Both products may have 1-5 colorways as variants and 1-5 size variants for example.
Therefore, I would like a feature where I could insert an arbitrary number of special dropdown menus in my product page and given a certain condition it will populate inside of sort of “cards” of the products that respect those conditions.
So if I insert a dropdown menu (related or not with a page template for each association, ex products a-b or products d-c-f) and I add the condition: to have in their tags “0001” for dropdown product A and to have in their tags “0002” for dropdown product B.
as per selecting the product is set.
Now the problem is making the selection of color and size easy for the client.
There could be lots of ways (such as having a dynamic selector underneath the dropdown menu that updates with the association of the chosen product type, as crop tops may be in “blue” and “green” and be in sizes “S” and “L”, while maybe hoodies may have “blue” “red” “white” and sizes “L” “XL” “Xs”)
However a more pleasing and easier to understand way could be to (referring to theoodies dropdown boundle page) have color selector instead of “Full Body” button and size selector instead of “Close Up”.
Or another way (easier and better I think, that I’ve just came up with after writing the above) would be to use either product “cards” or 1 image, that has “choose product” or something like this under and clicked would open a pop up with a sort of quick view view that enables the client to see all the photos of the product page of that product and most importantly to select color and size.
Hope defined everything that was unclear
As arbitrary I mean that I can add the special dropdown as a section for example so if I want to boundle product that are tagged with “0001” and products “0002” and products “0003” and whatever I want, not just 2