Display a different product's media on product page

Store Design
1

Hi,

The way my products are set up is I have a different product for each colour variant in the store - they have the same product title but I have a metafield which displays the color. For example a red, blue and green t-shirt would have the same product title of ‘t-shirt’ but their metafield would say red/blue/green depending on colour.

On the product page - I have a loop which loops through all products with the same product title as the current product.

{% for product in collections["All-products"].products %}
            {% if product.title == mainProductTitle %}
            

{{ product.title | escape }}

            Product link
            {% endif %}
            {% endfor %}

Upon clicking the ‘product link’ it takes you to the URL of that product page - I would like to now use the first product image for the product instead of a link to display each product. I tried {{ product.featured_image }} within an tag and an tag but can not get it to work.

Does anyone have any ideas? Thank you!
1 Like
2

managed to do it myself guys!

{% assign mainProductTitle = product.title %}

{% for product in collections[“All-products”].products %}
{% if product.title == mainProductTitle %}

{{ product.title | escape }}

# {% endif %} {% endfor %}

That is the code I used incase anybody needs it.