Hello. I have a flashing in-stock icon on my store. the code is like this.
if product.available %}
In stock, ready to ship
.instock-pulse { display: flex; flex-wrap: nowrap; align-items: center; } .icon–pulsing { position: relative; width: 20px; height: 20px; margin-right: 10px; } .icon–pulsing:after, .icon–pulsing:before { background: #54c63a; width: 10px; height: 10px; border-radius: 10px; position: absolute; left: 0; top: 0; content: “”; margin: 5px; } @keyframes inventory-pulse{ 0%{ opacity:0.5; } to{ transform:scale(2.5); opacity:0; } } .icon–pulsing:before { animation: inventory-pulse 2s linear infinite; }
However, the {% if product.available %} & {% endif %} show on the page and does not seem to work so it shows even when out of stock. Also, i don’t know how to put it just below the product price on the website. i have no “custom HTML” block for that section. Please can someone assist?
