Get multiple products listing with variants in the same product page

[Sohumlinen10]

Hello community,

I'm looking to build a product/collection page with multiple products showing their respective description and variants with an add to cart button, followed by another product with their own details.
https://www.spreadhome.com/products/1200-tc-egyptian-cotton-bedding-collection?variant=4429171271275...
This is one reference which we are going for, please connect for any advice or solution for this

Thank you

[oscprofessional]

Hi @Sohumlinen10 ,

To achieve a multi-product display on a single product/collection page in Shopify, similar to your reference, you can follow these steps:

Use Metafields & Custom Liquid Code

1. Create Metafields for Related Products:

   • Add product metafields to link multiple products under a single "collection product page."
   • Example:
     • namespace: related_products
     • key: product_handles
     • Value: List of product handles (["product-1", "product-2", "product-3"])

2. Customize the Product Template:

   • Modify product.liquid or main-product.liquid to loop through related product metafields and display each product’s details.

{% if product.metafields.related_products.product_handles %}
  {% assign related_handles = product.metafields.related_products.product_handles.value %}
  {% for handle in related_handles %}
    {% assign related_product = all_products[handle] %}
    <div class="related-product">
      <h2>{{ related_product.title }}</h2>
      <p>{{ related_product.description }}</p>
      <form method="post" action="/cart/add">
        <input type="hidden" name="id" value="{{ related_product.variants.first.id }}">
        <button type="submit">Add to Cart</button>
      </form>
    </div>
  {% endfor %}
{% endif %}

[SohumLinen]

Hello @oscprofessional thank you for your reply.

We tried the same but it is now coming up as desired. Could you please check once as to where we are going wrong.

Regards

[oscprofessional]

Are you created Metafields for Related Products?

[SohumLinen]

Hello @oscprofessional 

I have added the Metafields.

I have then added the related products in the product page. 

After that I went to customise my theme and added the custom code:

{% if product.metafields.custom.product_handles %}
{% assign related_handles = product.metafields.custom.product_handles.value %}
{% for handle in related_handles %}
{% assign related_product = all_products[handle] %}
<div class="related-product">
<h2>{{ related_product.title }}</h2>
<p>{{ related_product.description }}</p>
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ related_product.variants.first.id }}">
<button type="submit">Add to Cart</button>
</form>
</div>
{% endfor %}
{% endif %}

Could you please check and assist

[oscprofessional]

We need to verify the metafields you created and ensure that the related products are correctly assigned to each specific product before proceeding with the coding. Since this process is time-consuming, we need to thoroughly review these details before implementing the code. Please share the collaboration code so we can access and verify the necessary information.

[SohumLinen]

Collaborator Code- 5808

[oscprofessional]

Hello,

The collaborator Code is invalid , Can you please share us the code?