free shipping and discount progress bar on cart page

free shipping and discount progress bar on cart page

Sammy9
Shopify Partner
6 0 3

Sammy9_0-1647309110667.png

Please help me I need to create the same progress bar and should be working within the cart page (should not need to reload again and again) and it should be in (£) here is what I have done so far please help me 

{% if cart.total_price <= 10000 %}

{% assign barvalue1 = cart.total_price %}
{% assign barvalue2 = 0 %}
{% assign barvalue3 = 0 %}
{% capture my_variable55 %}You are just <b>{{10000 | minus: cart.total_price | money}}</b> away from <b>free shipping</b>{% endcapture %}

{% elsif cart.total_price <= 25000 %}

{% assign barvalue1 = 10000 %}
{% assign barvalue2 = cart.total_price %}
{% assign barvalue3 = 0 %}
{% capture my_variable55 %}You are just <b>{{25000 | minus: cart.total_price | money}}</b> away from <b>20% Discount</b>{% endcapture %}

{% elsif cart.total_price <= 45000 %}

{% assign barvalue1 = 10000 %}
{% assign barvalue2 = 25000 %}
{% assign barvalue3 = cart.total_price %}
{% capture my_variable55 %}You are just <b>{{45000 | minus: cart.total_price | money}}</b> away from <b>25% Discount</b>{% endcapture %}

{% else %}

{% assign barvalue1 = 10000 %}
{% assign barvalue2 = 25000 %}
{% assign barvalue3 = 45000 %}

{% endif %}

<div style="text-align: center;">
<div style="margin-top:25px; margin-bottom:30px;color:white;"> {{ my_variable55 }} </div>
<div style="--top-bar-background:#00848e; --top-bar-background-lighter:#1d9ba4; --top-bar-color:#f9fafb; --p-frame-offset:0px;">
<div class="Polaris-ProgressBar Polaris-ProgressBar--sizeLarge"><progress class="Polaris-ProgressBar__Progress" value="{{barvalue1}}" max="10000"></progress><progress class="Polaris-ProgressBar__Progress" value="{{barvalue2}}" max="25000"></progress><progress class="Polaris-ProgressBar__Progress" value="{{barvalue3}}" max="45000"></progress>
<div class="Polaris-ProgressBar__Indicator" style="width: 100%;"><span style="margin-left: -5%;color:white;" class="Polaris-ProgressBar__Label">Free Shipping</span><span style="margin-left: 8%;color:white;" class="Polaris-ProgressBar__Label">20% Discount</span><span style="margin-left: 8%;color:white;" class="Polaris-ProgressBar__Label">25% Discount</span></div>
</div>
</div>

</div>

Reply 1 (1)

AvadaCommerce
Shopify Partner
3879 839 973

Hi @Sammy9 

I would love to suggest to you the app AVA Trust Badges, Sales Pop
This app helps create Free Shipping Bar with progress easily, without coding. 
And you can select the page to show Free Shipping Bar. 
free shipping bar.png


If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!


banned