DEV Community

Cover image for Shopify - Create a custom variant selector

Shopify - Create a custom variant selector

Stephen Richard on January 15, 2021

IWIK : I Wish I Knew Table of content Custom variant size selector Configuration Liquid template markup Basic styling Proper behavi...
Collapse
 
dasian_long_56b27e7dcb82c profile image
Dasian Long

Hi Stephen, for some reason when I embed the code does not do not seem to work

Collapse
 
stephenrichard profile image
Stephen Richard

Hi, can you provide more details or a link to a gist/repo about what doesn't work ?

Collapse
 
dasian_long_56b27e7dcb82c profile image
Dasian Long
Thread Thread
 
dasian_long_56b27e7dcb82c profile image
Dasian Long

Will really appreciate your help!

Thread Thread
 
stephenrichard profile image
Stephen Richard

I looked into your liquid code (tested in a demo store) and it works so this part is sure, let's check the CSS and JS part !

  • First of all, do you have variants setup for your product ?
  • Can you see the url change when you press on the different sizes ? (If yes it's already working, the issue should come from the javascript file)

Can you then check your theme.js file against this gist (gist.github.com/stephenrichard/f88...) which is the article implementation on a debut theme.
Let me know your progress or provide your theme.js if you can't find a solution.

Thread Thread
 
dasian_long_56b27e7dcb82c profile image
Dasian Long

I also embedded the CSS code into theme.css and it still shows up like this
docs.google.com/document/d/14MWox5...

Thread Thread
 
stephenrichard profile image
Stephen Richard

Unfortunately I can't do much without seeing some code. Can you share the url of your shop so I can look up the css and js ? Feel free to contact me here : stephen.richard44@gmail.com if you want to share code or urls.

Thread Thread
 
dasian_long_56b27e7dcb82c profile image
Dasian Long

ok i am going to email you

Collapse
 
adhendo profile image
adhendo

Any insight how to do this but display a thumbnail image instead of ‘small, medium, large’? For example if you had color variants with images attached to each variant how could you access these and use them as the selectors? Thansk!

Collapse
 
stephenrichard profile image
Stephen Richard

Hello, I know it might be too late for you but I updated the article with another example of custom variant with images.
Feel free to read it if you are still interested and thank you for asking. I hope it can be useful for future readers.

Collapse
 
natalialb profile image
natalialb

This is such a good tutorial. I have used this a couple of times now to add colour swatches and size options to products and it works really well!