To Shopify: Variant Issues and Display

Shopify Discussion
,
1

A single product can have multiple variants—say, colors like Black, Blue, and Red—with each variant having 2–3 associated images. When these images are uploaded in order—e.g., Black1.png, Black2.png, Black3.png, Blue1.png, Blue2.png, Red1.png, Red2.png, Red3.png, Red4.png

It’s baffling that Shopify can’t intelligently filter and display only the relevant variant images when a user selects a color. This lack of functionality is frustrating. It’s either apps or code. Nonsense.

Even more confusing is where to place separate model shots, such as Model1.png, Model2.png, and Model3.png, which I want to display across the homepage, collection, and product pages. Ideally, the product page should default to Model1.png, with the variant-specific images only appearing once a color is selected. At that point, the model images should collapse into a single thumbnail so users can still access them if they want to see how the item looks on a person. It’s honestly disappointing that such intuitive behavior isn’t built in.

And it’s not just this—another glaring issue is how Shopify’s automated discounts fail to display discounted prices until the item is in the cart. These are basic features that Shopify continues to overlook, and it’s making the platform unnecessarily difficult to work with.

2

You’re right. it’s a repeat pattern in Shopify. The platform gives you building blocks (liquid, APIs, functions), but expects you to engineer UX patterns that should frankly be default by now. Here is how I typically tackle this:

If the catalog is small in size , make the image filenames follow a predictable naming convention and then in the theme code, you parse all product images, filter them based on the currently selected variant’s option (say, color), and display only matching images. But its kind of fragile when there is typo in naming, translation/localization, theme specific code and so on. Best option to stick with a metafield to each variant like `variant.metafields.custom.images = a list of image file references and then on variant change, replace gallery with custom images using js.

3

Hi,

Hope this will help

  • Variant images don’t filter: Use JS to show only images for selected color
    JS example

wrap model images like:

And for variant images, make sure to include something like:
  • Model shots needed everywhere: Store in metafields & use across site
  • Discounts don’t show early: Simulate it with price math or Shopify Plus Scripts