How to make inventory status icon animated?

[Lucas1200]

I see in multiple shopify stores that the icon at inventory status is animated. It looks like the icon is alive and moving. Do you have any idea how I can make it like that?
My store id is: 2e208a.myshopify.com

[Hamza_Hussain · Accepted solution]

Now there are two ways to this the most easy one is just replace the SVG code with the one below

<svg width="15" height="15" aria-hidden="true">
  <circle cx="7.5" cy="7.5" r="7.5" fill="rgba(238,148,65, 0.3)">
    <!-- Animate scaling (pulsing) -->
    <animateTransform attributeName="transform" type="scale"
      values="1;1.2;1" keyTimes="0;0.5;1"
      dur="1.5s" repeatCount="indefinite"/>
    <!-- Animate opacity -->
    <animate attributeName="opacity"
      values="1;0.6;1" keyTimes="0;0.5;1"
      dur="1.5s" repeatCount="indefinite"/>
  </circle>
  
  <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)">
    <!-- Animate scaling for the inner circle -->
    <animateTransform attributeName="transform" type="scale"
      values="1;1.2;1" keyTimes="0;0.5;1"
      dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

If you don't like the above code then you can add a class to the SVG tag and add CSS to animate it like below

<svg width="15" height="15" aria-hidden="true" class="beeping-heart">
  <circle cx="7.5" cy="7.5" r="7.5" fill="rgba(238,148,65, 0.3)"></circle>
  <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)"></circle>
</svg>

<style>
  .beeping-heart {
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.6;
    }
  }
</style>

---

[Hamza_Hussain]

Can you provide your Shop URL

[Lucas1200]

https://www.vedettemaison.com/ here you go 🙂

[Hamza_Hussain · Accepted solution]

Now there are two ways to this the most easy one is just replace the SVG code with the one below

<svg width="15" height="15" aria-hidden="true">
  <circle cx="7.5" cy="7.5" r="7.5" fill="rgba(238,148,65, 0.3)">
    <!-- Animate scaling (pulsing) -->
    <animateTransform attributeName="transform" type="scale"
      values="1;1.2;1" keyTimes="0;0.5;1"
      dur="1.5s" repeatCount="indefinite"/>
    <!-- Animate opacity -->
    <animate attributeName="opacity"
      values="1;0.6;1" keyTimes="0;0.5;1"
      dur="1.5s" repeatCount="indefinite"/>
  </circle>
  
  <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)">
    <!-- Animate scaling for the inner circle -->
    <animateTransform attributeName="transform" type="scale"
      values="1;1.2;1" keyTimes="0;0.5;1"
      dur="1.5s" repeatCount="indefinite"/>
  </circle>
</svg>

If you don't like the above code then you can add a class to the SVG tag and add CSS to animate it like below

<svg width="15" height="15" aria-hidden="true" class="beeping-heart">
  <circle cx="7.5" cy="7.5" r="7.5" fill="rgba(238,148,65, 0.3)"></circle>
  <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)"></circle>
</svg>

<style>
  .beeping-heart {
    animation: pulse 1.5s infinite;
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.6;
    }
  }
</style>

---

[Lucas1200]

Where can I change the SVG of this icon?

[Hamza_Hussain · Accepted solution]

You can probably find this in main-product,liquid or product.liquid file just -> click on the three dots on your desired theme

go to Online store
Click the three dots and go to edit theme
search main-product and go to the file in the sections folder
when you have opened the file find the product__inventory class in the file inside that tag will be a svg tag or a render tag looking something like this {% render "a name of the icon" %}  remove {% render "a name of the icon" %}  and paste the svg tag I gave you.

To change the font size of the text just the below code in the base.css file or custom.css file 

p.product__inventory {
    font-size: 14px !important;
}

[Lucas1200]

Do you also know how to make the text smaller next to the icon?

[Lucas1200]

It works! Thank you so much!

[noisiv_nsv]

Hi mate, I've seen that you've made it work. Can you help me out? Some screen shots of your code from the product__inventory to the end of it would help me a lot. Thanks!

[Hamza_Hussain]

Can you provide your Shop URL.