Display product variant images as color swatches on collection page

Store Design
1

Hi,

How do I display the product image as color swatches on collection page?

Screenshot 2025-10-28 195544
Screenshot 2025-10-28 1955441920Ă—925 120 KB

here is the store link: Snowboard Bindings

Thanks

2 Likes
3

Hi @X-DREAM

I reviewed your website, including the collection and product pages. You want the collection page to display products in the same way as the product page, with swatches showing the actual variant images instead of just color swatches. Currently, the loop is showing only color swatches. Please update the loop to show variant images instead of color swatches.

<div class="variant-swatches"> {% for variant in product.variants %} {% if variant.image %} <a href="{{ product.url }}?variant={{ variant.id }}" class="swatch"> <img src="{{ variant.image | img_url: 'small' }}" alt="{{ variant.title }}"> </a> {% else %} <!-- fallback if variant has no image --> <span class="swatch-placeholder" title="{{ variant.title }}"></span> {% endif %} {% endfor %} </div>

If you are a coder, you can do this easily; otherwise, contact a Shopify expert for help

Let me know if need further assistance
Regards,
Artzen Technologies

4

thanks for reply, if you can let me know where to put the code in under edit code maybe i can do it by myself.

1 Like
5

Adding the Liquid Code

Your code snippet for displaying variant images as swatches should go in the collection template or collection section.

Steps:

  1. Go to your Shopify Admin → Online Store → Themes → Click Customize.

  2. Click … next to your theme → Edit code.

  3. In the Sections folder:

    • Look for a section that renders collection products, usually collection-template.liquid or collection-product-grid.liquid.

  4. Inside the product loop ({% for product in collection.products %}), add your swatch code:

    <div class="variant-swatches">
  {% for variant in product.variants %}
    {% if variant.image %}
      <a href="{{ product.url }}?variant={{ variant.id }}" class="swatch">
        <img src="{{ variant.image | img_url: 'small' }}" alt="{{ variant.title }}">
      </a>
    {% else %}
      <span class="swatch-placeholder" title="{{ variant.title }}"></span>
    {% endif %}
  {% endfor %}
</div>

    Adding the CSS

    
/* Swatches Container /
.variant-swatches {
display: flex;
gap: 8px; / space between swatches */
margin-top: 8px;
}

/* Individual Swatch /
.variant-swatches .swatch {
display: inline-block;
width: 35px;      / swatch size /
height: 35px;
border: 1px solid #ccc;
border-radius: 50%; / circular swatches */
overflow: hidden;
cursor: pointer;
transition: all 0.2s ease;
}

.variant-swatches .swatch img {
width: 100%;
height: 100%;
object-fit: cover; /* ensure image covers the circle */
display: block;
}

/* Hover effect */
.variant-swatches .swatch:hover {
border-color: #000;
transform: scale(1.1);
}

/* Placeholder for variants without image */
.swatch-placeholder {
display: inline-block;
width: 35px;
height: 35px;
border: 1px solid #ccc;
border-radius: 50%;
background-color: #f0f0f0;
cursor: not-allowed;
position: relative;
}

.swatch-placeholder::after {
content: “×”;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #999;
font-size: 16px;
}
1 Like
7

I dont have any collection-template.liquid or collection-product-grid.liquid in that folder, I did search as well nothing match. Would mind send your email address so I can add you to the backend.

Thanks

8

Hi, please share your collaborator code, I will send the request from my partner account.

9

collaborator code: 5639

Thanks

10

Request send from learning center please accept

11

all done please check

Thanks

12

Yes, checking it. Will update you about this later

13

Is it ok like this Snowboard Bindings – X-DREAM SNOWBOARDING ?

14

yes thats good, thanks a lot for helping

16

do you want me to make it live ?

17

yes please, by the way if you can tell me where to adjust those swatch size then I may be can try to adjust to the size i want.

Thanks

18

You can change the size using css code

19

Hello X-DREAM,

If you’d love a no-code required solution to display product images as color swatches on your collection page, you can try our app Grouptify: Combined Listings & Variant, we have features perfectly fit your needs.

:puzzle_piece: Grouptify lets you:

  • Redesign Shopify variant options (free) — show product options using images or color swatches for a more stunning look and improved UI/UX.

  • Display variant swatches on collection and product cards (available from the Basic plan) — easily show each variant’s image as a clickable swatch, you can view the demo store on our Shopify App Store, or as shown in the screenshot below.

  • Upload custom swatch images if you want more control over how they appear.

  • Group separate product URLs into one combined listing and display them as variants (perfect for color/style grouping).

image
image1436Ă—1077 202 KB

image
image1473Ă—824 136 KB

Here’s our detailed guide on how to configure it:

:backhand_index_pointing_right:How to apply swatches on your product detail or collection page
:backhand_index_pointing_right:How to configure Shopify option redesign

After installing, feel free to chat with our support team in-app — we can show you a live demo or help configure it on your store.

Hope this helps! :blush:

Sophia - The Tapita team

20

Hello mate’s, Dropshipping do require a lots of full knowledge and understanding,so let’s share ideas and insight together on how our business