Stock inventory progress bar featured product

Store Design
, ,

Topic summary

A user seeks to add a stock inventory progress bar to Shopify’s ‘featured product’ section using custom Liquid code, avoiding third-party apps.

Solution Provided:

  • Add a Custom Liquid block in the Featured Product section
  • Insert Liquid code that calculates remaining stock and percentage
  • Add CSS styling to create the visual progress bar with green fill
  • Make it dynamic by connecting to Shopify’s actual inventory data using product.variants.first.inventory_quantity

Current Issue:
The user implemented the code but reports two problems:

  • The progress bar isn’t displaying the green highlight correctly
  • The inventory amount shown is inaccurate

Status: The discussion remains open with the user requesting additional help to fix the implementation. One responder offered further guidance for the exact implementation.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello, is it possible to add a progress bar like the attached to the ‘featured product’ using custom liquid? cant see to find any decent apps. Thanks

DASCPA_0-1743069543099.png

1 Like
2

hey @DASCPA Yes! You can add a progress bar in Shopify using Custom Liquid and CSS.

Steps to Add a Progress Bar in Shopify#### 1. Add a Custom Liquid Block

Go to Online Store > Themes > Customize

  • Select the Featured Product section

  • Add a Custom Liquid block

  • Paste this code:

{% assign total_stock = 1000 %} 
{% assign sold_stock = 250 %} 
{% assign remaining_stock = total_stock | minus: sold_stock %}
{% assign percentage_remaining = remaining_stock | times: 100 | divided_by: total_stock %}

  

Hurry! Only {{ remaining_stock }} Tickets Remaining

  • 2. Add CSS (Theme Editor or theme.css file)

    Go to Online Store > Edit Code

    • Open base.css or theme.css

    • Add this at the bottom:

.progress-bar-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 5px;
    height: 10px;
    margin-top: 5px;
}

.progress-bar {
    height: 100%;
    background-color: #28a745;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}
  • Make It Dynamic: Replace total_stock and sold_stock with Shopify’s inventory data:
{% assign total_stock = product.variants.first.inventory_quantity | plus: 250 %}
{% assign sold_stock = 250 %}
  • Now the progress bar will reflect your stock! Let me know if you need further customization
  • try this one if i managed to help you then don’t forget to LIKE and mark it solution
3

Hi @DASCPA ,

I hope you’re doing well!

Yes, it’s absolutely possible to integrate a progress bar into the Featured Product section using custom Liquid code. You can achieve this by dynamically calculating the progress based on inventory levels or sales data. Since Shopify allows customization through Liquid, you can implement this without needing an app.

If you need help with the exact implementation, We’d be happy to guide you! :blush:

Regards,

4

Hello, Thank you for the above. this has partly worked. However the progress bar is not highlighted in green indicated the amount of inventory on stock and the amount is wrong. I have followed the above, see here.

Screenshot 2025-03-28 at 13.48.40.png
Screenshot 2025-03-28 at 13.48.40.png748×818 28.7 KB

5

Hi Laurent, thanks for your message, yes if you do have the code for this that would be great. Thank you