Jump to content

Product page - variant layout

Recommended Posts

  • Replies 2
  • Views 246
  • 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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

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.

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.