How would I show inventory quantity over my product image in grid view?

jakevsty
New Member
2 0 0

How would I show inventory quantity over my product image in grid view? I am looking to get my inventory displayed like this I have seen a few shops with it but cant figure it out. It is even animated! My store link is www.jakevstypokemon.com

 

help.PNG

0 Likes

If this feature is not part of your theme, you would need to add code to your collection item snippet to show current product stock. Another choice can be finding a Shopify App.

If you need my development assistance to do this or need a more advanced solution, please let me know or email me at LMPTechSolutions@gmail.com.

0 Likes
jakevsty
New Member
2 0 0

so this is what I have so far I am not sure if it will work or where to place it in my code...

<a href="PRODUCT NAME" class="gsbadge gsBadgeQty gsbadgeprod6487542366357">
<span class="gsbadgeinside">
<span>
<span class="word1 hidewordgs " style="display: inline-block; transform: translate3d(0px, 0px, 0px);">
</span>
 <span class="word2  " style="display: inline-block; transform: translate3d(0px, 0px, 0px);">
 <span class="char1 animated tada" style="display: inline-block; visibility: visible;">2</span>
 <span class="char2 animated tada" style="display: inline-block; visibility: visible;">0</span></span>
 <span class="word3  " style="display: inline-block; transform: translate3d(0px, 0px, 0px);">
 <span class="char1 animated tada" style="display: inline-block; visibility: visible;">i</span>
 <span class="char2 animated tada" style="display: inline-block; visibility: visible;">n</span></span> 
 <span class="word4  " style="display: inline-block; transform: translate3d(0px, 0px, 0px);">
 <span class="char1 animated tada" style="display: inline-block; visibility: visible;">s</span>
 <span class="char2 animated tada" style="display: inline-block; visibility: visible;">t</span>
 <span class="char3 animated tada" style="display: inline-block; visibility: visible;">o</span>
 <span class="char4  " style="display: inline-block;">c</span>
 <span class="char5  " style="display: inline-block;">k</span></span></span>
 <ul class="texts" style="display: none;"><li class="current"> 20 in stock</li></ul>
 </span>
 </a>
0 Likes

Hey Jake, If you grabbed that from the reference website you need to adjust the code to fit your theme which may not be a simple solution. I suggest hiring a Shopify Developer,  If you like I can help you set this up for $100.

0 Likes