How can I change the product label color?

Our themes display different labels on the collection page or on sections that list products. Here are some steps on how to change their colors.

• All themes
• Expanse 8.0, Fetch 5.0 and Gem 5.0 or later versions

• Sale label

  The Sale label is automatically displayed when the product has a compare-at price. You can adjust the color of the Sale label in the theme editor by going to Theme settings > Colors and look for the Sale tags and the Sale tag text colors:

  

  Sold out label

  When an item has no stock available, the Sold out label is displayed automatically. To change the color of the Sold out label, you’ll need to add custom CSS. In your Shopify admin, navigate to Online store > Themes and click Edit theme on the theme you want to edit.

  Go to Theme settings > Custom CSS and add this code:

  .grid-product__tag--sold-out {
      background-color: gray;
      color: white;
  }

  You can use any HTML color name or hex code that you want.

  Custom label

  Custom labels are set up using the instructions in this guide. To update their color, navigate to Theme settings > Custom CSS and insert the following code:

  .grid-product__tag--custom {
      background-color: red;
      color: white;
  }

• Sale label

  The Sale label is automatically displayed when the product has a compare-at price. You can adjust the color of the Sale label in the theme editor by going to Theme settings > Colors and apply a color scheme for the Sale tags color:

  

  Sold out label

  When an item has no stock available, the Sold out label is displayed automatically. The Sold out label follows the color scheme set for Product tags under Theme settings > Colors:

  

  Custom label

  Custom labels are set up using the instructions in this guide. To update their color, navigate to Theme settings > Colors and choose a color scheme for the Product tags color: