Solved

Why is my CSS style not changing the color of h3 tag in Shopify?

Cr0dex
Tourist
7 1 0

Hey Community, I am new to shopify development and I just created a new product-form file which should display different content based on whether the current product is sold out or not. It contains the following code:

<!-- /snippets/product-not-available.liquid -->

{% comment %}
  Show different product forms based on status of product (out of stock, upcoming product)
{% endcomment %}

{% if product.available == false %}
  <div class="product-not-available">
    <h3>Sold out</h3>
  </div>
  
{% elsif product.tags contains "upcoming" %}

{% endif %}

Now, i want the h3-tag to be displayed in red and added the following lines to my scss file:

.product-not-available h3{
  color: red;
}

The Problem is that the h3 Tag is shown in black instead of my desired color and hex codes don't work either. Do you have any ideas how i can fix this issue?

Accepted Solution (1)

marketplace026
Shopify Partner
42 6 8

This is an accepted solution.

<div class="product-not-available">
   <h3 class="sold-out">Sold out</h3>
</div>


.sold-out{
color: red !important;
}

View solution in original post

Reply 1 (1)

marketplace026
Shopify Partner
42 6 8

This is an accepted solution.

<div class="product-not-available">
   <h3 class="sold-out">Sold out</h3>
</div>


.sold-out{
color: red !important;
}