Jump to content

Product page - variant layout

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hey @best-instincts

SQSPThemes has a plugin called "Product Color/Image Swatch Variant" that may be what you're looking for. Easy to use and customise with a bunch of options. I know there's one for text - though it's more focused on using images/colours etc.

The alternative would be to use Javascript (or jQuery) to turn the "select" into a pair of buttons. Which I'd honestly avoid as it'll be doing essentially the same as the plugin, but more effort and you're writing/maintaining the code yourself.

p.s. that's an affiliate link so they'll send me a little thank you (at no extra cost) if you do buy it. Here's a non-affiliated link if you want it instead.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment
24 minutes ago, best-instincts said:

my variants are displayed in a drop down menu but is there a way I can have an button option instead like shown?

There isn't a built in feature that can do this, but if you know JavaScript you could code a solution. You'll need to hide the variant dropdown, wait for the variants to load, then create a button for each variant that, when clicked, selects the variant in the hidden dropdown.

Alternatively, you could purchase some code that someone has already written.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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.