Display different image on collection and product page

Store Design

Topic summary

A Shopify beginner working with a custom theme wants to display different product images on collection pages versus individual product pages.

Initial Solution:

  • The original poster resolved their issue using Liquid code: {% for image in product.images offset:1 %} which skips the first image and displays subsequent ones on the product page.

Alternative Approaches Discussed:

  • Some themes (like Boundless) include a built-in “skip first image” option in the Customize settings.
  • For modern themes without this feature, a recommended approach involves:
    • Creating a product metafield (e.g., product.metafields.custom.collection_image) to store the collection page image
    • Modifying the card-product.liquid snippet to reference this metafield
    • This method minimizes code changes and simplifies future theme updates

Status: The discussion includes both a working solution and more sophisticated alternatives for different theme architectures. Later participants sought similar guidance for implementing this feature in newer themes like Trade.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m not familiar with Shopify and this is my first project. I have experience in Wordpress, but this is different.
So my issue is: design on collection page has different picture than single product page.

I’ve uploaded 2 images, first image shows on Collection page and that’s okay. On Single product page is it possible to show only second image without first?

How to achieve this, what’s the best way, just to know this is custom theme?

Thanks!

1 Like
2

@ml_jyst

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
3

HI @KetanKumar , thanks for answer!

Site:
https://bubbly-ice.myshopify.com/

Product Page:

Single Product Page:
https://bubbly-ice.myshopify.com/products/12-can-multi-pack

So, I would like on Single Product Page to display different image, what is the best solution?

I sent you password in private message.

Best regards!

4

It is theme-dependent. There are themes, for example Boundless which has this option.

You’d need to check the “skip first image” on product page settings in Customize.

5

@tim_1
That’s make sense thanks, sorry but I’m not familiar with Shopify.

Where to find that, this is my custom theme

In code I display image using this:
6

I solved this problem using this:

{% for image in product.images offset:1 %}

{% endfor %}
7

Hi Ml_jyst,

I’ve read your post about displaying a different image on the collection page other than the one the product page where you say at the end that you solved this problem.

I have the same issue as yours, and would like to display different images for the product on the product and collection pages. Would you be so kind and advise me how could you solve this so I’ll try to do the same.

Best Regards

1 Like
8

@tim_1 Thank you for this - what about the new Trade theme? How is this achieved there?

9

I am not sure if modern themes has similar setting.

If I was approaching this, I’d probably add a product metafield to store image used for collection page.

Say it would be product.metafields.custom.collection_image.

Then I’d modify snippets/card-product.liquid to use this image.

Here I refer to the code from Dawn to illustrate, but it’s very similar for all Shopify made free themes:

  1. Replace all occurrences of card_product.featured_media with card_product_featured_media,

  2. then add code above this line https://github.com/Shopify/dawn/blob/d2580d5cdb51553b1d7ed73ed132aa1e17e5842b/snippets/card-product.liquid#L60 so it looks like:

{% assign card_product_featured_media = card_product.metafields.custom.collection_image.value | default: card_product.featured_media %}

{%- if card_product_featured_media -%}

This way we’re limiting code edits to a single snippet which will be handy when theme update is available.