Impulse theme: How to change Variable Image Based On Swatch Selection On Collection Page?

Tasos
Tourist
6 0 2

Hello! I am using the Impulse theme that gives you the ability to select a product variation based on swatches under each product on the collection pages.

When hovering the mouse over the swatch, it is dynamically replace the product image with the selected variant image and on click redirects to the product page with the selected variant.

My issue is that this implementation is not mobile friendly. It doesn’t work on mobile. So, I want to be able to dynamically replace the product image with the selected variant image on click instead on hovering. And in order to move into the product page you should click the product preview in the collection page rather than the swatch.

Is there any suggestion on how to achieve that by changing the theme.js file?

Reply 1 (1)

PaulNewton
Shopify Partner
6339 579 1345

Could be as simple as ensuring the CSS class "color-swatch--with-image" is present on the swatch links , not sure without stepping in the whole thing. Or start somewhere with the _colorSwatchHovering() function around line ~6164

 

These types of advanced customization have pitfalls for beginners.

#1 contributors may not have access to same expensive premium theme, and that specific version of the theme's code.

To leverage the forums better keep in mind it tends to not be for entire code solutions for a premium theme, more for meta knowledge or specific issues such as if you were already starting to code in the themes and hit a javascript issue. Small peices.

 

Proven Designer Intent

@Tasos wrote:

It doesn’t work on mobile


FTFY: It behaves differently on mobile.

A finger on a touch surface is not a mouse.

Before tossing on the UX hat always keep in mind the designers intent.

 

Impulse behaves that way for a reason the developers , archetypethemes , know what they are doing and that should be kept foremost in mind.

Reach out to a premium themes developers first,  sometimes while they may not be able to support custom the work but may have sample code or point out where to start or take it as a feature request to explore.

 

UX and performance 

There's a reason that theme has a quick-view feature.

The swatches will be small don't make customers pixel hunt, the more variants the more space lost to swatches as swatch dimensions increase.

If you make the swatches touchable, the rest of the product card can no longer behave as a link and or you may have to mess with the z-index of the elements.

If the swatches change the image then that means every variant color image is being loaded, or has to load when the interaction happens.

read:  Watch the performance - make sure all variant images aren't being preloaded, otherwise on a 20 product collection page with 4 variants each your forcing 80 images in to the customers mobile data plan and device. Themes like impulse by default may load 2 images per product on collection templates the featured-image and commonly the second product image or the first-variants image.

 

Validation, Data backed decisions

An indicator of whether someone should burn time on this is if they have a/b-testing setup.

Or if any actual customer has requested/complained about this; a business owners idea is not 1:1 of what helps customers buy, don't confuse them.

Otherwise time & money is likely to get burned because the conversions wont back it up.

 

Good Hunting.

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org