Jump to content

Is there a CSS or code injection to only show images based on what variant is chosen?

Go to solution Solved by paul2009,

Recommended Posts

Hi all! 

I'm wondering if there is a CSS or some trick to make your product photos display the variant photos, in somewhat of a gallery or specific order, when you select one variant? I'm designing an outdoor furniture website, and so if I were to select the Indigo Cushion in the drop down menu of variants, then the photos would not only show the single indigo picture I assigned to the variant, but also the other 2-3 examples I have. 


Is there a way to do this? Thank you  so so much for any help.

Link to comment
  • Replies 2
  • Views 371
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I asked this last week, but found a better way to word it, wondering if anyone knows if there is a CSS or code injection to only show images based on what variant is chosen? You're able to do this on shopify but does squarespace 7.1 have this feature?


Thank you so much

Link to comment
  • Solution
2 hours ago, kellybatache said:

Is there a CSS or code injection to only show images based on what variant is chosen?

Squarespace will only swap the main product image when you select a product variant, not the thumbnail images below it. CSS cannot change this. To add this functionality you'd need to write JavaScript to target the images based on the selected colour (or other single) variant and it will require the images to be named according to the variant they represent (before the images are uploaded to Squarespace) so that you can filter the images based on the selected variant. My Product Thumbnail Filter is an example of a paid solution that does this.


About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.