Jump to content

Show Product Variants as Boxes

Recommended Posts

Site URL: https://karinajambrak.com/collections/portrait-orientation/products/dusty-plains

Hi all, 

Just wondering, is it possible with CSS/Coding to show your product variants as boxes to click, rather than a dropdown list? Just would like to experiment with the look of it if possible. 

Site: https://saffron-sturgeon-tc9n.squarespace.com/
Password: iis

The site listed above (in Site URL:) is another artist who uses Shopify to create their site, but would like to achieve something similar if possible (Ive attached a screenshot of their site (red) to show. 

Thanks 

Tom

Screen Shot 2021-05-31 at 6.23.30 am.png

Screen Shot 2021-05-31 at 6.23.05 am.png

Link to comment
  • tommiatke changed the title to Show Product Variants as Boxes
  • Replies 4
  • Views 1.1k
  • Created
  • Last Reply

This would need Javascript and CSS and would be a fairly complex task.

SS is doing some complex manipulations of variant menus so messing with them without understanding them could break the product detail page.

The only road I can see that may work would be to hide the SS variants. Then build the desired interface, using it to drive the SS variants interface.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
2 minutes ago, creedon said:

This would need Javascript and CSS and would be a fairly complex task, if doable.

SS is doing some complex manipulations of variant menus so messing with them directly will most likely break the product detail page.

The only road I can see that may work would be to hide the SS variants. Then build the desired interface, using it to drive the SS variants interface.

 

Thanks for the update @creedon. Yeh I wasn't sure if it was going to be a super complex job or something code-wise that could allow the variant options to be broken out from the dropdown box. 

I actually found a plugin to do it... Here is the link: https://ghostpluginssuper.squarespace.com/products/p/simple-product-variant-buttons/?password=ghost 
If you have time, Can you let me know if you think this plugin would be suitable. I'd prefer to do it by actual coding (as a learning exercise) but if a plugin is the way to go then thats all good. 

Thanks! 

Tom 

Link to comment

The plugin looks pretty good and seems to be very reasonably priced. I took a quick look at the underlying code and it seems to be inline with what I imagined how the code might work.

If you're interested in doing some coding for learning purposes I'd say this is an intermediate coding task. The main trick is going to be building the new interface from the info SS provides. Then from the new interface, driving SS's built-in variant interface.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.