In this tutorial, we guide you through upgrading your Shopify cart to boost average order value and conversion rates, helping you achieve the margins needed to scale your store effectively.

This upgrade to our previous cart progress bar was made by a member of Stress Free Scaling.

Compatible Themes: This code should work on all free Shopify themes (Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight).

 

Use Cart Subtotal (before discounts)

Update cart-progress-bar-custom.liquid

    {% if settings.use_items_subtotal %}
      {% assign cart_total_cents = cart.items_subtotal_price %}
    {% else %}
      {% assign cart_total_cents = cart.total_price %}
    {% endif %}

data-use-items-subtotal="{{ settings.use_items_subtotal }}"

Update cart.js

Edit method updateQuantity

  this.updateProgressBar({
    total_price: parsedState.total_price,
    items_subtotal_price: parsedState.items_subtotal_price
  });

Edit method updateProgressBar

 updateProgressBar({ total_price, items_subtotal_price }) {

    const cartTotalCents = progressWrapper.dataset.useItemsSubtotal === 'true'
        ? items_subtotal_price
        : total_price;

Update settings_schema.json

      {
        "type": "checkbox",
        "id": "use_items_subtotal",
        "label": "Use Items Subtotal for Progress Bar",
        "default": false
      },