Advanced Shop Item Preview with Variants

Hello!

I was wondering if anyone could point me in the right direction as the current UI options for templates seems limited.

I was hoping to set up an "advanced"  item preview in a shop for the color variant that is selected.

For example: when the user selects the black color variant, the gallery will only display the images with the black variant.

Any ideas on how to proceed here with Squarespace templates?

Appreciate any information that could be provided.

1 hour ago, RyanRenee said:

I was hoping to set up an "advanced"  item preview in a shop for the color variant that is selected.

Can you elaborate on what you mean by "advanced"? Are you referring to a Product Detail Page (PDP), like the example below, or do you have something more bespoke in mind? A link to the page may help us to understand the context.

7 hours ago, paul2009 said:

Can you elaborate on what you mean by "advanced"? Are you referring to a Product Detail Page (PDP), like the example below, or do you have something more bespoke in mind? A link to the page may help us to understand the context.

 

Yes! That is exactly what I am referring to.

Sorry, I am really new around here and trying to learn as much as I can 😅

4 hours ago, RyanRenee said:

Yes! That is exactly what I am referring to.

By default, Squarespace will only swap the main product image when you select a product variant; it won't filter the thumbnail images below it. The image include above shows the Product Thumbnail Filter - an extension that I wrote to dynamically filter the images and only show images matching the selected variant. It's a paid add-on and you can find more details on the Product Thumbnail Filter page.