Your Shopify Store with a Free Shipping Progress Bar Using Just One Line of Code

Mario Cueto

Share it on:

Your Shopify Store with a Free Shipping Progress Bar Using Just One Line of Code

Before diving into the implementation, you might be curious about why progress bars are effective. This relates to a psychological principle known as “The Need to Complete.” Research, as outlined by Spindogs, reveals that completing tasks triggers the release of certain neurotransmitters, inducing feelings of satisfaction. Over time, our subconscious associates task completion with positive emotions, making progress bars a compelling tool for enhancing user experience and engagement.

Step 1: Find your cart.liquid File in your Theme

To begin the process, navigate to your Shopify dashboard and access the Online Store > Themes page. Locate your active theme and click on “Actions,” then select “Edit code.” On the left side of the editor, you’ll find a search bar. Type in “cart.liquid,” as this is the file you’ll likely need to edit. However, depending on your theme’s setup, this file might have a different name, especially if you have features like a cart drawer or sticky cart.

Step 2: Add the Code Under the </header> tag

After locating the </header> closing tag within the cart.liquid file, insert the following code snippet immediately below it:

$0 <progress max="10000" value="{{ cart.total_price }}"></progress> $100

Step 3: Personalize the Values to Align with Your Free Shipping Threshold

My free shipping threshold is at $100. If yours is different, customize the “10000” and “$100” value to match yours. For example, a $250 threshold would be “25000” and “$250”. Always add two “00” after your real threshold.

Step 4: Incorporate and Modify the Dynamic Messaging Beneath the Progress Bar

When crafting the dynamic messaging below the progress bar, leverage liquid control flow tags, which offer versatility and power in customizing your messages. Similar to Step 3, adjust the ‘10000’ value within the code to align with your specific free shipping threshold. This ensures that the messaging accurately reflects the progress towards achieving free shipping based on your store’s requirements.

{% if cart.items.size == 0 %}
     Add items to your cart to receive free shipping
{% endif %}

{% if cart.items.size != 0 %}
     {% if cart.total_price >= 10000 %}
          You've got free shipping 👌
     {% elsif cart.total_price < 10000 %}
          You're only {{ 10000 | minus: cart.total_price | money }} away from free shipping
     {% endif %}
{% endif %}

That’s all there is to it! While you might need to make minor adjustments such as resizing or aligning, the process is straightforward and easily manageable.

Best of luck with implementing the free shipping progress bar. Happy selling!

Mario Cueto