change 1st image on page load selection whether shown as collection or product

Hi so we have products that are unisex / men / women and are configured to show in collections so we

https://kitout-fitness.co.uk/collections/women some of these also show in the mens / vice versa

the images on the products show alll variations however they are in an order on the take for example this one

Grey loads 1st https://kitout-fitness.co.uk/collections/women/products/high-neck-vest-fiit-fully-customizable

and also in collection https://kitout-fitness.co.uk/collections/women and https://kitout-fitness.co.uk/collections/men

what im trying to achieve somehow is if you click the category or product the first images are a different colour

the reason for this is to avoid duplicating products and if women click on the womens category as an example above the white shows 1st not the grey as they may find more appealing colour

what are my options please

hi @Shane_h

Thanks for the explanation, and I understand what you’re aiming to do—showing different default product images (color variants) based on the collection a shopper clicks from, without duplicating products.

Unfortunately, Shopify doesn’t support changing the default variant image dynamically based on the collection page out of the box. However, there are a couple of workarounds you might consider:

Option 1: Use JavaScript to Detect the Collection Context
You can add custom JavaScript to detect which collection the product is being viewed from (e.g., women or men) and then dynamically change the featured image shown based on that.

This would involve:

Tagging your variants or images (e.g., variant-color: white, variant-color: grey)

Writing logic that checks the URL or referrer (e.g., if the user came from /collections/women, load the white variant image first)

It’s flexible but would require a developer or custom theme edits.

Option 2: Use Separate “Featured Images” Per Collection
Some merchants create metafields or use Shopify’s “alternate featured image per collection” logic. This involves:

Using Shopify’s metafields to assign a custom featured image per collection

Modifying your theme to check for a metafield (e.g., featured_image_women) and show that image when rendering the product inside the /collections/women page

This avoids duplication but gives you control over how products look in different collections.

Option 3: Create Duplicate “Shell” Products (Not Ideal but Simple)
If the variations above aren’t feasible right now, one fallback is to duplicate a product with a different default image and assign it to the other collection. It’s not elegant but can be a short-term solution while exploring a more scalable fix.

thank you it seems 1 and 3 are the options as its the product main image we need to change / dynamic so to speak when the collection loads

option 3 would be easy however there are cost implications to this due to some of the apps we use would put us on a higher subscription tier due to more products - i will try and find a developer to quote on option 1 and then decide the most cost effective solution

thanks