How should I go about dynamically changing the color of the product status? Sold Out, Coming Soon, On Sale etc

Question

By default, all product status tags are the same color set in the theme. I would like to have sold out be orange, and other status remain blue.

Would this be changed on the CSS? or on the individual pages?

Any suggestions would be appreciated!

Answer 1

on the HTML side, have it call a different div class for "sold out"

{% case product_status %}
  {% when 'Sold out' %}
    <div class="product-list-thumb-status-so">{{ product_status }}</div>
  {% when 'On sale' %}
    <div class="product-list-thumb-status">{{ product_status }}</div> 
  {% when 'Coming soon' %}
    <div class="product-list-thumb-status">{{ product_status }}</div> 
{% endcase %}

Then on the CSS side, you can set the color different based on the div class

.product-list-thumb-status-so {
  ...... 
background: {{ #theme.links_color }};
font-size: 0.75rem;
color: {{ theme.button_text_color }};
  .....
}

Answer 2

My solution was - in the the {% case product.status %}

I put a class in 'sold out' in the products.html code.

{% assign product_status = '<span class="prod-thumb-status-so">Sold out</span>' %}

New Code:

{% case product.status %}
            {% when 'active' %}
            {% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
           {% when 'sold-out' %}
              {% assign product_status = '<span class="prod-thumb-status-so">Sold out</span>' %}
            {% when 'coming-soon' %}
              {% assign product_status = 'Coming soon' %}
          {% endcase %}

In the CSS I put:

.prod-thumb-status-so{
  background: orange;
  padding:20px;
  border-radius:50%;
}

the padding 20px; and border-radius:50%; will cover up the original color