Include product options/variant drop downs from Product X & Y on Product Z page

Tourist
6 0 2

I'm currently developing a new Shopify theme for our store, and I would like to create a page where I include the product options/variants from several other products. The scenario is that we are offering "packs" that contains several products, that are also available as single items in the store.

 

  • Example Pack
    • Product 1: T-shirt (White, Large)
    • Product 2: Socks (White, Small)
    • Product 3: Briefs (White, Medium)

I would like a single page where the customers are able to select all the different options for each product in the pack.
In the above Example Pack, they would then have to choose the color and size of the t-shirt, socks and briefs (all created as their own products with variants)

 

Ideally, we would like to do this without any app, besides the Shopify Script Editor, but built into the theme itself. 

I've tried searching both in the Shopify Community forum as well as searching through Google, but haven't been able to stumble across anything. If anyone can point us in the right direction, it would be greatly appreciated! 

0 Likes
Shopify Partner
462 80 94

So, you want to have a page where you will shows several products and their options for each of this product, and then add all these products into cart at once ?

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Highlighted
Tourist
6 0 2

@sarhov wrote:

So, you want to have a page where you will shows several products and their options for each of this product, and then add all these products into cart at once ?


That is correct :-) The products should be added to the cart once the user have selected the options and clicks Add to cart, ideally via ajax.

0 Likes
Shopify Partner
462 80 94

They will added into cart as separate product, you understand that yes ?

Anyway, this requires custom coding and it will take about 3-5 hours to implement such functionality.

I think the best method is to create new collection template, which will show products in table tayout with their variants and options and when ever you want to create such package/collection you just need to choose this new template as collection template and add the products into this collection, the products you want to be in that package.

Author: Hovhannes Sargsyan (aka sarhov).
An individual web developer focused on Shopify development.
Need more help? Feel free to send me a direct message or drop an email shopify@sarhov.com

Website: https://sarhov.com  
Email: shopify@sarhov.com
Skype: @sarhov
Messenger: @sarhov
Telegram: @sarhov
0 Likes
Tourist
6 0 2

@sarhov wrote:

They will added into cart as separate product, you understand that yes ?

Anyway, this requires custom coding and it will take about 3-5 hours to implement such functionality.


Yes, that is the intention as well :-) I know that it requires custom coding, and was hoping someone could show some code examples of how this could be done. I basically got everything under control, besides not knowing how to include a dropdown (and add to cart-button) with all the variants from a product (or several products), outside of the product page. 

0 Likes