Check out my Youtube channel

"In Stock" pulsing green icon tutorial for eCommerce stores

Here is a quick and easy modification you can do for your product page.

It takes about 2 minutes and can help with conversions by assuring the customer that your product is currently in stock, and giving a general sense that your store is very dynamic and updated frequently.

How it looks:

In stock, ready to ship

Above you can see it pulsing. And below here it is in action, but not pulsing (because it’s a screenshot).

This is really easy and can work for any eCommerce store, not necessarily Shopify.

All you need is the ability to add custom code to your page.

In Shopify, we have this ability with the custom liquid section and the custom liquid block. You should see this available in your theme editor when you click Add Section or Add Block.

Obviously this particular feature would look better when used in a block (to the right of the product images) rather than a section (full page width).

So click Add Block and simply copy & paste the code.

The code:

{% if product.available %}

  <div class="instock-pulse">
    <span class="icon--pulsing"></span>
    <span>In stock, ready to ship</span>
  </div>

  <style>

    .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;
    }

  </style>

{% endif %}

If you want to change the color, just find the line that says background: #54c63a; and change the color to whatever you want.

You might also notice that on your store, the dot could be slightly mis-aligned with the text. So if you need to adjust it a pixel or so, I recommend modifying the .icon--pulsing class, like so: 

.icon--pulsing {
  position: relative;
  left: 1px; /* Nudging it right 1px (1px FROM the left) */
  top: 1px; /* Nudging it down 1px */
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

Also, if you are not on Shopify, you will want to remove the {% if product.available %} at the start and {% endif %} at the end. This is Shopify code. The rest will work anywhere.


Want posts like this in your inbox? Subscribe to the newsletter.

Comments

8 comments
  • M

    Hello, i have this on my product pages but the problem is, I have 30 products or so and want to have some products showing low in stock and others just normal in stock, the quesion is how do i keep it seperate per product page because i added it to my custom liquid and it just shows on all pages.


  • ali

    this code does not work in my ride them version 9.0 i keep getting this issue. it says invalid JSON unexpected token


  • Helen

    Hey by any chance can you show the exact location of where to enter this code?


  • Ana

    What do we add this code to please in Shopify i.e. which template or something else please?


  • Memo

    Is there a way to change the font color of the text next to the pulsing dot?


  • MyKids-USA

    can we show only specific location ?


  • Trevor Edwards

    Is there a way to add the Display Variant Inventory Count to that snippet?


  • Adam Sewell

    Is there a way to make this not show up on items which are marked as "Continue selling when out of stock"? We have items which are pre-order type which we still want to allow people to buy but obviously these are not items we keep in stock.


    1 reply
    • Kevin Rajaram

      You can use the inventory_policy liquid property to check where’ whether it returns ‘continue’ or ‘deny’.

      Continue will execute when the counting selling when out of stock is checked and deny is when not checked.