Variants: How to modify the appearance of select drop-down options on product pages

If your variant select options are too difficult to see on product pages, here are a few tips to assist:

Tip 1 - Make variant select options bolder using CSS

Example before:

After:

CSS style code to use:

/* -- Start Pipeline override code for bold variant options -- */
.template-product input,
.template-product select {
    font-weight: 600;
}
/* - end - */

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Tip 2 - Change the border color

Example before:

After:

Use the Color options under Theme Settings to set a darker Border color:

You can find these settings here:

Tip 3 - Add a box border around the variant

This CSS will will add box style border around your variant options:

Note: This allows you to maintain a soft lighter color if desired for the drop-down arrows and the quantity select option.

If you'd like the arrows to be darker, change the border color setting as indicated in the first option. 

Code to use:

/* -- code to add border around variant select options -- */
.selector-wrapper select,.product-form__variants { 
  border: 1px solid #999999; 
}
/* - end -*/

The value of #999999; is a hex color code for dark grey.

Use any valid hex color code for the border value: http://www.colorhexa.com/web-safe-colors

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Tip 4 - Change the background color of the drop-down options

Using CSS, we can change the background color of the select drop-downs. 

Example:

Note: The drop-down arrows and quantity options border are managed by the border settings in the color settings. 

Code to use:

/* -- 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 - */

The value of #999999; is the background hex color code for dark grey.
The value of #ffffff; is the text color.

Use any valid hex color code for the border value: http://www.colorhexa.com/web-safe-colors

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Notes:

You may need to change select drop-down arrow colors based on the background color you've used. See the link below on details on how to change the color of these arrows:

Pipeline: Related Articles