Images changing with option selection - Focal Theme

Is it possible to have all images change (or first and last image) when you select between options? Also I would like to have them be hidden otherwise. So always 3 images visible, but first and last change when switching between options.

Shopify ties images to variants, not options directly, so the cleanest approach here is to assign the right images to each variant in the product editor — Shopify will then handle swapping the featured image automatically when a variant is selected. For the “always show exactly 3” requirement with first/last changing, you’d need a bit of JavaScript to filter the gallery based on the selected option value: listen for the variant change event, then show/hide images by matching their alt text to the option name (a common convention for variant-filtered galleries).

The Focal theme uses a standard variant change event system, so you’d hook into that rather than rewriting the selector logic. If you share which options you’re working with (color, size, etc.) I can sketch out the specific JS approach — the implementation differs slightly depending on whether your options map one-to-one to variants or use a combination.

@galleriste Can you share your store URL along with the password if it is password-protected

Okay so can one variant have multiple images that only show when that variant is selected or is it just one? And I have two different things you can change Frame style and Size, but only frame style changes the images

Hi @galleriste :waving_hand: it is possible, for stores on an enterprise PLUS plan using the combined listings feature can be the straightest path.

For all other plans , most themes do not have this behavior.
As it’s an advanced theme customization, and can come with performance implications.

When it’s a premium theme first double check the settings, either the gallery block|section in the product templates.
Or the global theme settings.
Though even IF a theme has a feature it may take some setup such as special formatting of the images alt-text, or using metafields etc.

Otherwise it’s an advanced theme customization to add to any theme properly so it’s more than just slapped on javascript.
Reach out if you need this type of customization just taken care of.

So do you think you can do the customization so that first and last image change with different options? How about just the first image changing, is that more simple?

Either way, can make em do backflips if wanted.
In most themes first image should be changing, sometimes in a setting called like “show featured variant image” or “show selected variant media” etc etc. If there is a setting but it’s not working either you don’t have an image set on the variants; or possibly the themes broken that’s another matter but I’d be fixing that if need be.

To be clear making em all or just the first one related to a variant show isn’t much of a difference on my end.
The data entry on your side to associate images with variants can be a big difference it not thought through.

Reach out to build and go over it , info in my profile pic just click it.

Hi! If your goal is for each option to show its own exact image set, one simpler route is to treat each option as a separate product.

With Avis Product Options, you can use the Option URL feature so that when a customer clicks an option, they are taken to a different product page. That means each option can link to its own product, and each product can have its own 3-image gallery set up exactly the way you want. Avis documents this as linking specific option values to URLs, and the option types also support an Option URL setting.

The setup:

The result:

So for example, if you have 4 options, you would create 4 separate products, each with its own images, and then link each option to the matching product page. This is often much easier than trying to make one product dynamically hide and swap multiple gallery images in a very specific way.

Here’s a demo of that kind of setup in action:
Avis Product Option Demo - Option URL

Hi @galleriste :heart_hands:

A setup where the product gallery updates based on the option a customer selects — such as showing different images for each color or style while keeping the gallery cleaner and more focused — can be achieved pretty smoothly with Easify Product Options. :blush:

I’ve created a similar demo to help you better visualize how it works:

  • This is the result:

A common method is to create separate Shopify products for each variation so every option has its own dedicated image gallery.

  • This is the app setting:

Inside the app, you can then build Color Swatches or Image Swatches to let customers switch between options visually right from the product page.

Next, in the Add/Edit Cross-product links area, you simply attach the matching product URL to each swatch option.

After the setup is done, selecting another option like Yellow, White, or a different style will automatically open the corresponding product together with its own gallery images instead of displaying all product images at once.

This approach works especially well for stores that want a more organized image gallery experience and better control over which visuals appear for each specific option, without needing complicated theme edits or custom development.:heart:

Hey! This is definitely possible, but it’s a bit tricky to do with the basic Shopify settings because they usually only swap one main image at a time. To get that “clean” look where certain images stay hidden and only specific ones show up based on the variant selected, you’ll likely need a dedicated app.

I’d recommend checking out apps like Variant Image Automator or Variant Image Wizard . They let you group images together so that when a customer picks an option, only the photos you’ve chosen for that variant appear. It’s much easier than trying to change the code yourself, and it makes your product pages look a lot more professional!