Hello
how can I showcase a different version (media order specifically) of a product in different pages?
I’m using Rise theme
Please share examples of your requirement for a better understanding.
Best
When you say different list you mean a different collection named lifestyle, right where you want the yellow image to be the main one?
Just as a suggestion if you have model pictures to show as main image at times, this is something i am working now : https://45keys.com/en
Check out the all collections page, you will find a toggle to display normal and model pictures.
Best
@Shadab_dev that’s a really nice feature you have there, but it’s not something I need now and it’s not what I’m looking for.
All my images are model images, I just want to be able to show case one of the media images as the main depending on the list it’s in
all products are in 2 different collections (lists)
is it doable?
Yes, we can look for the collection name and accordingly add the neccessary image to it. For the other lists you want to show the different image for all products, right just to confirm?
@Shadab_dev not sure if I understand you right, you’re saying that I can add an image to the collection as a whole, right?
that is not what I want to do, let me explain it differently
the pants is a product in 2 collections: lifestyle (collection 1), still life (collection 2)
I want the visitors who open the lifestyle (collection 1) collection page with the products listed there, to see the product image in green
while visitors of the same website opening the still life (collection 2) collection page, to see the product image in yellow
this is how I want it to look on my 1st collection page
and this is how I want it to look like on my 2nd collection page
I meant that itself but anyways thanks for the detailed explanation and yes this is definitely achievable
@Shadab_dev great! how can I do that?
Since you are on a free Shopify theme I will try this on my dev store and update you in the morning in shaa Allah.
Best
Use a product metafield for the alternate collection image, then in the collection product-card code, switch the displayed image based on collection.handle.
- Create product metafields (Settings → Custom data → Products), type File (or Image):
- custom.lifestyle_card_image
- custom.still_life_card_image
- In the collection grid item snippet (often something like snippets/card-product.liquid), pick image by collection:
{% assign card_image = product.featured_media.preview_image %}
{% if collection and collection.handle == 'lifestyle' and product.metafields.custom.lifestyle_card_image %}
{% assign card_image = product.metafields.custom.lifestyle_card_image %}
{% elsif collection and collection.handle == 'still-life' and product.metafields.custom.still_life_card_image %}
{% assign card_image = product.metafields.custom.still_life_card_image %}
{% endif %}
{%- comment -%} render using card_image {%- endcomment -%}
That keeps one product + one inventory, but lets the collection card image change depending on which collection page the customer is browsing.
So here is it as promised. Please always make a duplicate and make changes to it. Everything works well, you just publish it.
So on your main-collection-product-grid.liquid file under sections folder after line 178 add this to the last like this
Remember to add a comma after section.id. Here’s the line of code: collection_handle: collection.handle
Now inside card-product.liquid file under snippets folder add this at the very top
{%- liquid
assign image_to_show = card_product.featured_media
if collection_handle == 'still-life-collection' and card_product.media.size > 2
assign image_to_show = card_product.media[1]
endif
-%}
And on around 65-75 replace the entire image tag the highlighted part till closing >
with this
<img
srcset="
{%- if image_to_show.width >= 165 -%}{{ image_to_show | image_url: width: 165 }} 165w,{%- endif -%}
{%- if image_to_show.width >= 360 -%}{{ image_to_show | image_url: width: 360 }} 360w,{%- endif -%}
{%- if image_to_show.width >= 533 -%}{{ image_to_show | image_url: width: 533 }} 533w,{%- endif -%}
{%- if image_to_show.width >= 720 -%}{{ image_to_show | image_url: width: 720 }} 720w,{%- endif -%}
{%- if image_to_show.width >= 940 -%}{{ image_to_show | image_url: width: 940 }} 940w,{%- endif -%}
{%- if image_to_show.width >= 1066 -%}{{ image_to_show | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ image_to_show | image_url }} {{ image_to_show.width }}w
"
src="{{ image_to_show | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ image_to_show.alt | escape }}"
class="motion-reduce"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ image_to_show.width }}"
height="{{ image_to_show.height }}"
>
Note: Since for lifestyle you are showing the fisrt image which is called the featured image we dont need to do anything as that is by default, we just need to check for the other collection which is what i am doing here. if collection_handle == ‘still-life-collection’ This is what shopify does to handles, changes it to all lowercase replacing spaces with dashes, so whenever you make changes to the name of your collections be sure to change it here.
Best
@Shadab_dev thank you it worked! 
@ShopIntegrations thank you
This is the best statement to hear be it a merchant or a dev, it worked!