Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Show Product Variants as Boxes


tommiatke

Question

Posted (edited)

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

Edited by tommiatke
Link to comment
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0
Posted (edited)

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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
  • 0

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 best , and see my profile. Thanks for your support!

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