FROM CACHE - it_header

CSS variable in Liquid with class tag

vincenzocassese
Visitatore
1 0 0

Hi to everyone.

I have this code for my left stock product in my custom page product with pagefly

<div class="super2">
  
{% comment %} Inventory tracking on product page {% endcomment %}

<div id="variant-inventory">
{% if product.variants.first.inventory_management == "shopify" %}

{% if product.variants.first.inventory_quantity <=4 %}										   
Fai presto! Ultimi {{ product.variants.first.inventory_quantity }} pezzi disponibili.

																	 									
{% elsif product.variants.first.inventory_quantity > 4 %}
{{ product.variants.first.inventory_quantity }} pezzi disponibili.
 
{% endif %}
{% else %}
Questo prodotto è disponibile.
{% endif %}
</div>
</div>

 And in CSS style i have this code:

.super2 {
	color: #FF98AD;
	font-size: 16px;
	animation: blinker 2s linear infinite;
}
@keyframes blinker {
	50% {
	opacity: 0;
}
}

How could I customize the font color with the css and the class tag if the products are greater than 4?

 

1 RISPOSTA 1

drakedev
Shopify Partner
685 148 229

Ciao Vincenzo,

ti do un'idea, aggiungi una classe specifica soltanto se il numero dei prodotti è superiori e poi nel CSS puoi usare quella class per fare l'override dello stile della sezione.

<div class="super2 {% if product.variants.first.inventory_quantity > 4 %}super4plus{% endif %}">

    {% comment %} Inventory tracking on product page {% endcomment %}

    <div id="variant-inventory">
        {% if product.variants.first.inventory_management == "shopify" %}

        {% if product.variants.first.inventory_quantity <=4 %}
        Fai presto! Ultimi {{ product.variants.first.inventory_quantity }} pezzi disponibili.


        {% elsif product.variants.first.inventory_quantity > 4 %}
        {{ product.variants.first.inventory_quantity }} pezzi disponibili.

        {% endif %}
        {% else %}
        Questo prodotto è disponibile.
        {% endif %}
    </div>
</div>
If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.