Hello,
How can we get the photo to change on the collection page based on the color swatches are clicked by the customer. Right now, on both mobile/desktop when the customer clicks, the system navigates them to the product page?
Our website is: https://www.yonicque.com/collections/new-arrivals
Hi @yonicque
Do you want the image to change on hover over the color image? Is that what you want to do?
hii @yonicque
Your swatches are currently built as links to the product URL, which is why they redirect instead of switching the image.
To make the image change directly on the collection page, you need to
Remove the link behavior from the swatches
Output each variant’s featured image in the product card via Liquid
Add a small JavaScript snippet that swaps the product card image when a swatch is clicked
This is a theme level customization Shopify doesn’t support this natively.
If your theme doesn’t already support “variant image switching on collection cards,” you’ll need custom JS or a swatch app that specifically supports collection image swapping (not just product page swatches.
Thanks
Not on hover. When the customer clicks on the blue color swatch I want the blue image to show instantly on the same collection page and not navigate them to the product page if possible.
Do you have the steps to do it? I see on our product pages, it when you select the different color variants the product images changes instantly to the color selected just fine, but not on the collection page.
Hi @yonicque
snippets/product-card.liquid
<label
class="color-swatch color-swatch--collection"
data-variant-image="{{ variant.featured_media | image_url: width: 600 }}"
data-variant-id="{{ variant.id }}"
>
<input
type="radio"
name="color-{{ product.id }}"
>
<span
class="color-swatch__item"
style="background-color: {{ variant.option1 | downcase }};"
></span>
</label>
In the same file, confirm the main image has a class like:
<img
class="grid-product__image"
src="{{ preview_image | image_url: width: 600 }}"
>
Add this to assets/theme.js or bottom of theme.liquid
document.addEventListener('click', function (e) {
const swatch = e.target.closest('.color-swatch--collection');
if (!swatch) return;
e.preventDefault();
e.stopPropagation();
const imageUrl = swatch.dataset.variantImage;
if (!imageUrl) return;
const card = swatch.closest('.grid-product');
const image = card.querySelector('.grid-product__image');
if (image) {
image.src = imageUrl;
image.srcset = imageUrl;
}
card.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('is-active'));
swatch.classList.add('is-active');
});
@devcoders Do you have an alternative place where this code can be added.
Hi @yonicque
Check if there is a file called product-grid and add the code there.
Best regards,
Devcoder 
@devcoders It did not have - <img
class=“grid-product__image”
src=“{{ preview_image | image_url: width: 600 }}”
I added the code and it didn’t work. Please see the duplicate theme preview
Hi @yonicque
If you don’t mind, could you please send me the collaborator code so I can implement this in your duplicate theme?
Best regards,
Devcoder
Shopify offers a free trial offer of Motion Theme and you can test the code there. If you can pin point the problem, I will re-add the code.
Ok, I will forward the info to the Theme Developers
@devcoders This was Motions Response:
Hi Monteara,
Thanks for the additional information and I appreciate your patience with me!
This feature is technically achievable within Motion, but it requires a deeper restructuring of how the product card media is rendered and updated.
In Motion, the collection grid is rendered through snippets/product-grid-item.liquid, but the image output is more complex than a single <img> tag.
A few important things your developer should review:
1. The image markup in Motion is not static.
The product card image is often wrapped in responsive containers and may use:
· srcset
· Lazy loading attributes
· Hover image wrappers
· Or theme-controlled JS that re-renders images
Simply replacing .grid-product__image src and srcset may not be enough because the theme may reinitialize the image element after load.
2. Event listeners may be conflicting.
Motion attaches its own click handlers to product cards and swatches.
Using e.preventDefault() and e.stopPropagation() can interfere with the theme’s native behavior, especially if Quick Add is enabled.
Your developer may want to:
· Target the media wrapper rather than just the <img>
· Ensure the script runs after the theme’s JS initializes
· Avoid disrupting the theme’s internal product card click logic
3. Quick Add is rendered separately.
The Quick Add modal does not use the same DOM structure as the collection grid. That’s why swatch active states aren’t syncing. It would require a separate implementation inside the Quick Add component.
4. Variant media handling
If some variants do not have featured_media assigned, variant.featured_media will return blank. That can cause the swap to fail silently. It’s important that each color variant has its own image assigned in the Shopify admin.
While we’re unable to directly embed or debug custom JavaScript modifications, the above should give your developer clear direction on where to focus within the theme structure. A Shopify developer experienced with theme customizations should be able to implement this behavior within Motion.
Please let us know if you have any further questions regarding the theme’s native functionality and we’re happy to help!
Hi Monteara,
Thanks for the additional information and I appreciate your patience with me!
This feature is technically achievable within Motion, but it requires a deeper restructuring of how the product card media is rendered and updated.
In Motion, the collection grid is rendered through snippets/product-grid-item.liquid, but the image output is more complex than a single <img> tag.
A few important things your developer should review:
1. The image markup in Motion is not static.
The product card image is often wrapped in responsive containers and may use:
· srcset
· Lazy loading attributes
· Hover image wrappers
· Or theme-controlled JS that re-renders images
Simply replacing .grid-product__image src and srcset may not be enough because the theme may reinitialize the image element after load.
2. Event listeners may be conflicting.
Motion attaches its own click handlers to product cards and swatches.
Using e.preventDefault() and e.stopPropagation() can interfere with the theme’s native behavior, especially if Quick Add is enabled.
Your developer may want to:
· Target the media wrapper rather than just the <img>
· Ensure the script runs after the theme’s JS initializes
· Avoid disrupting the theme’s internal product card click logic
3. Quick Add is rendered separately.
The Quick Add modal does not use the same DOM structure as the collection grid. That’s why swatch active states aren’t syncing. It would require a separate implementation inside the Quick Add component.
4. Variant media handling
If some variants do not have featured_media assigned, variant.featured_media will return blank. That can cause the swap to fail silently. It’s important that each color variant has its own image assigned in the Shopify admin.
While we’re unable to directly embed or debug custom JavaScript modifications, the above should give your developer clear direction on where to focus within the theme structure. A Shopify developer experienced with theme customizations should be able to implement this behavior within Motion.
Please let us know if you have any further questions regarding the theme’s native functionality and we’re happy to help!
Hi Monteara,
Thanks for the additional information and I appreciate your patience with me!
This feature is technically achievable within Motion, but it requires a deeper restructuring of how the product card media is rendered and updated.
In Motion, the collection grid is rendered through snippets/product-grid-item.liquid, but the image output is more complex than a single <img> tag.
A few important things your developer should review:
1. The image markup in Motion is not static.
The product card image is often wrapped in responsive containers and may use:
· srcset
· Lazy loading attributes
· Hover image wrappers
· Or theme-controlled JS that re-renders images
Simply replacing .grid-product__image src and srcset may not be enough because the theme may reinitialize the image element after load.
2. Event listeners may be conflicting.
Motion attaches its own click handlers to product cards and swatches.
Using e.preventDefault() and e.stopPropagation() can interfere with the theme’s native behavior, especially if Quick Add is enabled.
Your developer may want to:
· Target the media wrapper rather than just the <img>
· Ensure the script runs after the theme’s JS initializes
· Avoid disrupting the theme’s internal product card click logic
3. Quick Add is rendered separately.
The Quick Add modal does not use the same DOM structure as the collection grid. That’s why swatch active states aren’t syncing. It would require a separate implementation inside the Quick Add component.
4. Variant media handling
If some variants do not have featured_media assigned, variant.featured_media will return blank. That can cause the swap to fail silently. It’s important that each color variant has its own image assigned in the Shopify admin.
While we’re unable to directly embed or debug custom JavaScript modifications, the above should give your developer clear direction on where to focus within the theme structure. A Shopify developer experienced with theme customizations should be able to implement this behavior within Motion.
Please let us know if you have any further questions regarding the theme’s native functionality and we’re happy to help!
All the best,
Shandy
Archetype Themes Support Specialist
Archetype Themes | Help Center
Hi @yonicque
Yes, I had already mentioned that this functionality is not available in the theme by default. We will need to implement it using custom JavaScript and Liquid.
Best regards,
Devcoder
Sounds like you’ve been going through a lot of back and forth trying to get this working with custom code. If you’re open to using an app instead, our Combined Listings & Swatches app handles this — it lets you display color swatches on collection and product pages with each color variant getting its own image and URL. No theme code modifications needed, and it works across themes including Motion.
Might save you the headache of trying to make custom JS work with the theme’s internal rendering.
You can watch the tutorial here https://youtu.be/5fj-2xYx2rc
