Dynamically change css values based on liquid variables

[Joachimgolf]

Hi!

I have a code running to display swatches with pricing, which works great. However, all the prices are displayed identically, which makes it hard to highlight discounted swatch-products. To highlight them, i wanted to use liquid variables to see if a product had a price lower than compare at price, to then change the css. I tried using liquid variables directly in the css, which did not seem to work.

My idea was simply to use the {% if product.compare_at_price > product.price %} variable to see if the product price display is lower than the compare at price, to then use the !Important value in CSS to override the old styling. This did not seem to work, and also noticed that the css loaded slower when using this variable directly in the css, causing the block to stutter on loading, which would cause CLS issues.

What is the best approach to use such liquid variables to dynamically change css styling depending on differentt variables such as to see if a product is discounted or not?

Here is the entire code for the swatches with the CSS:

{%- if product.metafields.custom.anbefalte_produkter.value != blank -%}
<div class="related-products-wrapper">
  {% assign related_products = product.metafields.custom.anbefalte_produkter.value %}
  {% if related_products %}
    <div class="related-products-title"><p>Ofte kjøpt sammen:</p></div>
    <div class="related-product-list">
      {% for related_product in related_products %}
        <a href="{{ shop.url | append: "/products/" | append: related_product.handle }}">
          <div class="related-product">
            <div class="related-product-image">
              <img src="{{ related_product.featured_image | img_url: 'medium' }}" />
            </div>
            <div class="related-product-price">{{ related_product.price | money }}</div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% endif %}
</div>
<div class="related-products-dummy"></div>
{% endif %}

<style>
@media screen and (min-width: 780px) {
  .related-product-image {
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 780px) {
  .related-product-image {
    height: 75px;
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.related-products-dummy {
    padding: 10px;
    clear: both;
}

.related-products-title {
    padding-bottom: 12px;
    font-weight: 200;
    font-size: 14px;
}

.related-product-list {
    margin-top: 0px;
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.related-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    max-width: 165px;
    font-size: 12px;
    position: relative;
}

.related-product-image img {
    max-width: 100%;
    max-height: 100%;
}

@media screen and (min-width: 780px) {
 .related-product-price {
    color: #353535;
    font-weight: 600;
    background: #f6f6f6;
    padding: 2px 8px;
    border-radius: 60px;
    position: absolute;
    top: 70px;
    left: 0;
    font-size: 10px;
   }
}
  
@media screen and (max-width: 780px) {
 .related-product-price {
    color: #353535;
    font-weight: 600;
    background: #f6f6f6;
    padding: 2px 8px;
    border-radius: 60px;
    position: absolute;
    top: 60px;
    left: 0;
    font-size: 10px;
   }
} 
</style>

[kevinkarma55]

Did you try debugging is the values in compare_at_price AND price are actually loading? I have a feeling there might not be getting correct value

[Spac-es · Accepted solution]

You can try adding this code:

{%- if product.metafields.custom.anbefalte_produkter.value != blank -%}
<div class="related-products-wrapper">
  {% assign related_products = product.metafields.custom.anbefalte_produkter.value %}
  {% if related_products %}
    <div class="related-products-title"><p>Ofte kjøpt sammen:</p></div>
    <div class="related-product-list">
      {% for related_product in related_products %}
        <!-- Add the "on-sale" class if the product has a discount -->
        <a href="{{ shop.url | append: "/products/" | append: related_product.handle }}">
          <div class="related-product {% if related_product.compare_at_price > related_product.price %}on-sale{% endif %}">
            <div class="related-product-image">
              <img src="{{ related_product.featured_image | img_url: 'medium' }}" />
            </div>
            <div class="related-product-price">{{ related_product.price | money }}</div>
          </div>
        </a>
      {% endfor %}
    </div>
  {% endif %}
</div>
<div class="related-products-dummy"></div>
{% endif %}

<style>
@media screen and (min-width: 780px) {
  .related-product-image {
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 780px) {
  .related-product-image {
    height: 75px;
    width: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.related-products-dummy {
    padding: 10px;
    clear: both;
}

.related-products-title {
    padding-bottom: 12px;
    font-weight: 200;
    font-size: 14px;
}

.related-product-list {
    margin-top: 0px;
    margin-bottom: 30px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.related-product {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 3px;
    max-width: 165px;
    font-size: 12px;
    position: relative;
}

/* Product image */
.related-product-image img {
    max-width: 100%;
    max-height: 100%;
}

/* Regular price */
@media screen and (min-width: 780px) {
 .related-product-price {
    color: #353535;
    font-weight: 600;
    background: #f6f6f6;
    padding: 2px 8px;
    border-radius: 60px;
    position: absolute;
    top: 70px;
    left: 0;
    font-size: 10px;
   }
}
  
@media screen and (max-width: 780px) {
 .related-product-price {
    color: #353535;
    font-weight: 600;
    background: #f6f6f6;
    padding: 2px 8px;
    border-radius: 60px;
    position: absolute;
    top: 60px;
    left: 0;
    font-size: 10px;
   }
}

/* Additional styles for discounted products */
.related-product.on-sale .related-product-price {
    background: #ffeded !important;
    color: #d9534f !important;
    font-weight: 700;
}

</style>

[Joachimgolf]

This worked wonders, thanks!