How To Change The Color Of The Variant Pills On The Shopify Product Page

By /

In Shopify, product variant options (like size, color, or material) are often displayed as pills (buttons) instead of dropdowns. While Shopify’s free themes usually have default styling, you can customize the color of these variant pills using CSS to better match your store’s branding.

1. Access The Product Template Inside Shopify’s Theme Editor

Inside the Theme Editor, click on the top bar menu and select the product template where you want to apply the changes. If you don’t have any custom product templates, this will be Default Product.

On the Product Information block, access the Custom CSS setting and paste the following code. Feel free to adjust the colors to your preferences with either HEX color codes or CSS Color Names, as shown below.

.product-form__input input[type="radio"]:checked + label {  /* selected pill colors */
  background-color: lightblue; /* pill color */
  color: white; /* text color */
}

.product-form__input input[type="radio"]:not(:checked) + label {  /* not selected pills colors */
  background-color: #ffffff; /* pill color */
  color: #000000;
}

2. Bonus Tips: Add Other Stylization Options Within The Same Custom CSS

You can use this method to add other style changes, like borders or animation effects (transitions). Here are some examples:

    border: 2px solid #ccc; 
    border-radius: 20px; /* Rounded pill shape */
    cursor: pointer;
    transition: all 0.3s ease;

You can also change the colors when the mouse is on top of a variant pill with this code:

.product-form__input input[type="radio"] + label:hover { /* mouse hover color */
    background-color: #e0e0e0; /* pill color */
    border-color: #999; /* text color */
}

3. Save And Test

Click Save in the Shopify theme editor, visit a product page that has variant pills, and test the new styles. Adjust the colors as needed, and you’re done!

Customizing the color of product variant pills helps improve user experience and brand consistency. With a few lines of CSS, you can make your Shopify store look more polished and unique.

Let me know if you need help fine-tuning your styles!

Scroll to Top