Change First Preview Image after Collection Load

Technical Q&A
,

Topic summary

Goal: show an external image as the first product preview only within a specific collection, without adding it to the product’s own media.

  • Initial approach: Add conditional logic in snippets/product-media-gallery.liquid (after the line checking selected_or_first_available_variant.featured_media) to detect if a product is in a specific collection, then render a custom image first.
  • Sample logic: if product belongs to “My Collection,” output the external image before the default gallery.

Update/issue: This single-image approach doesn’t work because each product in the collection needs its own unique image.

  • Recommended solution: Use product Metafields (custom fields) to store a per‑product image URL. Upload images under Content → Files and reference the URL in a metafield (e.g., MainBlockImage).
  • Template logic: If the metafield exists (and optionally if the product is in the target collection), render that image first; otherwise fall back to the default featured media/gallery.

Status: Feasible but a larger customization. No final code provided; guidance given on structure and where to implement. Discussion remains open.

Summarized with AI on December 15. AI used: gpt-5.
1

Hello guys,

is it possible for an external image not present in the product to be loaded as a preview image for a specific collection? The image should only be loaded in the selected collection and should not be loaded generally in every collection. Also important, it should/may not appear in the product images.

Is such a change possible with little adjustment?

Thanks in advance for your help, I appreciate it.

My theme is „Craft 15.2.0“

Kind Regards,

Patrick

2

Hi @Restfulness

Welcome to Shopify Community.

You need to add some manual code ( with logic regarding collection and image) to do that.

You can check if the product is in desired collection, and if it is then you can show the image as the first image.

Here is a sample code for reference.

{% if product.collections[1].title == 'My Collection' %}
          
![test image|620x472](upload://tOIp5vVxjlVGFG0qCeibb3VU7zj.svg)

        {% endif %}

This code goes on the snippets/product-media-gallery.liquid file; after {%- if product.selected_or_first_available_variant.featured_media != null -%}

This should do the trick.

Thank you,

Sajat

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.

3

Thank u for your Time.

Unfortunately this doesn’t work somehow. The collection also contains several products that require a respective image, not all of them the same. I forgot to mention that at the beginning. I think this is a much bigger effort, right?

Thank you for all your efforts!

4

Hi @Restfulness

Thanks for the information.

Yes, if you require individual products to have respective individual image, then it is a bigger job.

You can use Metafields to assign individual image on the products, the code the logic accordingly.

i.e. if the metafield, (say MainBlockImage) is present, then show the image first.

You will have to upload the image as Files from Content → Files, and give the image URL on the metafields.

Hope this helps.

Thank you,

Sajat

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.