I’m working on displaying product options as swatches on the collection page using a Theme App Extension, and I want to dynamically update the product price and featured image based on the selected variant — similar to how it works on the product page, and in a way that works across all Shopify themes.
So far, I’ve rendered the swatches for each product on the collection page and I’m able to update the price and image using querySelector. However, this approach requires checking compatibility with every theme, and I want a more reliable and theme-safe solution.
Is there a recommended way to:
-
Update the product image shown on the collection card when a variant is selected
-
Update the price dynamically based on the selected variant
-
Do this without causing layout shifts or needing a full page reload.
Has anyone implemented this before?
No, there is no standard way.
Also, even checking store theme is not enough as, for example, with Horizon family themes you can replace standard product media block of the product card with, say an “Image” block.
Looked through some apps code – multiple “if theme store id == XXX” or “if store.url == YYY” conditions present in almost all of them.
can you explain briefly please?
I mean that even knowing what theme is in use would not definitely say what element to update.
So you’d need to implement some kind of logic to find them.
Say, you may check what’s first products featured image and/or image of the first available variant is and then look for those images in product card to find your target – can be more reliable.
Still, there is always a place for one-off configurations.
Thanks for your feedback, but that’s exactly what I’m doing right now. I want a solution where, if I update the JSON or something with the variant data, the product card automatically updates the image and price — without relying on query selectors, since they differ across themes. Is there any method to achieve this? That’s what I meant.
Nope there is no such thing.