0

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!

Bruce
  • 1
  • 1
  • You can probably by using an if statement in css () – JKB0DY May 02 '22 at 12:17
  • Does [cartel's own information](https://help.bigcartel.com/how-to-edit-your-theme-code) about editing the theme help? – Paul T. May 02 '22 at 12:20
  • @PaulT., thanks. I did read through that. Not much info there. – Bruce May 02 '22 at 15:51
  • What does the rendered elements look like for the product tags? ... Looking for something unique to possibly override with your own CSS. – Paul T. May 02 '22 at 17:29
  • .product-images .product-status { display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: {{ theme.status_background_color }}; font-size: 0.9rem; color: {{ theme.button_text_color }}; font-style: normal; height: 80px; left: 32px; line-height: 16px; padding: 0 10px; position: absolute; text-align: center; top: 32px; width: 80px; word-break: keep-all; } – Bruce May 02 '22 at 18:00
  • Please provide enough code so others can better understand or reproduce the problem. – Community May 03 '22 at 07:40

2 Answers2

0

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 }};
  .....
}
Bruce
  • 1
  • 1
0

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

Finding Colors
  • 41
  • 2