<div class="cart-container">
{% render 'free-shipping-bar' %}
<ul>
{% for item in cart.items %}
<li>
<img src="{{ item.image | img_url: 'small' }}" alt="{{ item.product.title }}">
<p>{{ item.product.title }} - {{ item.line_price | money }}</p>
</li>
{% endfor %}
</ul>
<p>Total: {{ cart.total_price | money }}</p>
</div>
{% assign free_shipping_threshold = 50 %}
{% assign remaining_amount = free_shipping_threshold | minus: cart.total_price | divided_by: 100 %}
{% if remaining_amount > 0 %}
<p>Spend ${{ remaining_amount | round: 2 }} more to get **free shipping**!</p>
{% else %}
<p>🎉 You’ve unlocked **free shipping**!</p>
{% endif %}
This snippet encourages larger cart values by dynamically showing how much more is needed for free shipping. The logic lives in free-shipping-bar.liquid, and it's rendered inside cart.liquid.
Martin Sojka, Maker of CodeSnips
