change background color on variant change

Tourist
41 0 1

Hey, I want to change the color of product page based on variant selection. Is there any way to achieve this?

 

Please help

 

Thanks

0 Likes
Highlighted
Astronaut
1014 131 241

You can use jQuery or javascript to listen for a change on your element. So if you're using a select element:

 

 

<select class="myclass">
  <option>#228B22</option>
  <option>#8B0000</option>
  <option>#00008b</option>
  <option>#FFFF00</option>
</select>

<script>
$('.myclass').on('change',function(){
  $('body').css('background-color', $(this).val())
})
</script>

 

https://codepen.io/ninthony/pen/QXPMvo

 

When you change to the selection, it changed the background color to the selection value which is a hex code. If you wanted a specific color, you'd put that in  instead of $(this).val():

<select class="myclass">
  <option>#228B22</option>
  <option>#8B0000</option>
  <option>#00008b</option>
  <option>#FFFF00</option>
</select>

<script>
$('.myclass').one('change',function(){
  $('body').css('background-color', '#228B22')
})
</script>

In this example it would change to dark green, but only fire once. 

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes