Show multiple product under a single product

[SohumLinen]

Hello, I want to display multiple products of mine under a single page with each product having an option to choose the variant and having "add to cart" button separately.

I have seen a shopify store do this and I was looking to achiever something very similar. (https://www.spreadhome.com/products/500-thread-count-italian-cotton-bedding-1?variant=44196433362997)

Can someone please help me as to how to achieve this?

[EBOOST · Accepted solution]

Hi @SohumLinen ,

Maybe this featured needs many code and base on structure of theme as well. So I only suggest a solution for you.

1. You need to create a metafield 

2. Go to each product to add data for each product

3. create a snippets/featured-product.liquid -> You can base on code of section/featured-product.liquid

4.  in the edit code add a section/shop-collection.liquid -> in this file you only need foreach metafied to render snippets/featured-product.liquid

[SohumLinen]

Thanks for the guide.

I have created the metafield and added the related products. Can you help me with the code that you mentioned in Step 3 & Step 4

Regards

[EBOOST]

Hi,

Which theme are you using?

[SohumLinen]

Dawn theme

[EBOOST]

Hi @SohumLinen ,

You can follow steps below:

1. create snippets/featured-product.liquid file

2. Get code here https://github.com/eboost10/2640367/blob/main/2949850/snippets/featured-product.liquid after that add this code to the file that you created at step 1

3. Go to sections/main-product.liquid

4. Add code below to before {% schema %} tag

{%  for p in product.metafields.custom.sub_product.value %}
  {%  render 'featured-product', product: p, section: section  %}
{%  endfor %}

[SohumLinen]

@EBOOST 

thanks a lot for the code, the products are now showing under the same product using the metafield and the code you provided. 

However, there are some issues like variant is not getting selected, some small format issues, etc.

Is it possible for you to see into the code of our website and help us. 

It would be of great help. Please let me know if I can send the collaborator request. 

Regards

[EBOOST]

Hi,

You try to replace code of snippets/product-variant-options.liquid with this code https://github.com/eboost10/2640367/blob/main/2949850/snippets/product-variant-options.liquid.

[SohumLinen]

Hello tried the code, but it is still giving errors. Could you try to edit it within the store once. It would be much easier.

Collaborator code- 5808

[EBOOST]

Hi,

I have just sent a request to your store.

[SohumLinen]

I have accepted the request.

Kindly please check this product page:

https://sohumlinen.com/products/autumn-embroidered-collection

[EBOOST]

Hi @SohumLinen ,

You can check this featured on "[EBOOST]Updated copy of Dawn" theme