Show Product Variants as Boxes

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

Any takers on this one? @tuanphan @bangank36.. You guys are legends on the forum! 

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.

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 

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.