Variants: Add a background color to selection drop-downs

You can add the following code to make your selection boxes standout.

Sample result dark grey:

Sample result with light blue:

How to:

On a blank new line, add the following code to the very bottom of this file:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

/* -- code to change variant drop-down color -- */
.template-product .single-option-selector, .single-option-selector-product {
    background-color:#0099ff; color:#ffffff;
  }
/* - end - */

Notes:

Since I've changed the background color to blue, I also added changed the text font color to white. 


Code for the dark grey version:

/* -- code to change variant drop-down color, dark grey version -- */
.template-product .single-option-selector, .single-option-selector-product {
    background-color:#999999; color:#ffffff;
  }
/* - end - */

Some common hex colors:

http://www.colorhexa.com/web-safe-colors

Still need help? Contact Us Contact Us