Need code for a free shipping bar in cart- "you are *$$$ away from free Shipping" Atelier theme

[Tessahighrack]

Hello,

I need code for a free shipping bar in cart- “you are *$$$ away from free Shipping” Atelier theme please.

Can anyone help me?

I have made a new snippit, but need the code to add in. Then instructions to add to my cart liquid please

Thank you so much!!

[devcoders]

Hello @Tessahighrack
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

[Dan-From-Ryviu]

Hi @Tessahighrack

You can try to do that by following the instructions below.

• In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.

• Find the main-cart.liquid file (the file name depends on your theme’s structure).

• Add the following code where you want the free shipping bar to appear on your cart page:

  {% assign free_shipping_threshold = 100.00 %} 
  {% assign cart_total = cart.total_price | divided_by: 100.0 %}

  {% if cart_total >= free_shipping_threshold %}
    

      ? Congratulations! You've qualified for free shipping!
    

  {% else %}
    {% assign remaining_amount = free_shipping_threshold | minus: cart_total %}
    

      You are **${{ remaining_amount | round: 2 }}** away from free shipping.
    

  {% endif %}

​

[AnneLuo]

1. Create a New Snippet
You said you’ve already made a new snippet (great!). If not:

Go to Online Store > Themes > … > Edit code

Under Snippets, click Add a new snippet → Name it: free-shipping-bar.liquid

2. Paste This Code into free-shipping-bar.liquid

{% assign threshold = 50000 %}
{% assign total = cart.total_price %}
{% assign remaining = threshold | minus: total %}

  {% if total >= threshold %}
    

? You’ve qualified for FREE shipping!

  {% else %}
    

      ? You are {{ remaining | money_without_trailing_zeros }} away from FREE shipping!
    

    
      

    

  {% endif %}

You can adjust the $500.00 value by changing free_shipping_threshold.

3. Include the Snippet in Your Cart Page
Find your cart template:

Go to Sections or Templates → Look for cart.liquid, main-cart.liquid, or cart-drawer.liquid depending on your theme version.

Find a good place above the cart total or below the cart items.

Add this line where you want the bar to appear:

{% render 'free-shipping-bar' %}

4. Save and Preview
Save all files

Go to your cart page and test by adding/removing items

Try going just below and above the threshold to see the message change

Result:

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

[Tessahighrack]

Not sure what i am doing wrong, but when i enter this into cart.drawer it doesnt show up!

[Tessahighrack]

Hello, thank you. I am not sure what i am doing wrong, but i made the snippet, added the second copy to cart.drawer… but when i preview nothing shows up!

[AnneLuo]

Can you please send me your collaborator code? I will check it for you.

[Tessahighrack]

The theme is not published

[Tessahighrack]

The theme is not published does this matter? i have been checking on the preview. 9520

[AnneLuo]

It doesn’t matter. And your store link.

[Tessahighrack]

https://admin.shopify.com/store/shophighrack

[AnneLuo]

Hi, @Tessahighrack

It’s not your store admin url, it’s the store website url.

[Vi-WizzCommerce]

Hello! @Tessahighrack

Here’s a simple free shipping bar script you can add to the Atelier Shopify theme, which is written in Liquid, HTML, and JavaScript. This bar will dynamically show how much more a customer needs to spend to qualify for free shipping, updating as items are added to the cart.

Step 1: Set Your Free Shipping Threshold

Let’s assume free shipping starts at $100. You can change this in the script.

Loading...

Step 2: Add Code to cart.liquid

• Go to your Shopify Admin > Online Store > Themes

• Click “Actions” next to Atelier, then “Edit code”

• Open sections/cart.liquid (or templates/cart.liquid depending on your theme structure)

• Paste the code above the cart table or at the top of the section for visibility.

Example placement:

{% section ‘cart-items’ %}

...

Optional Styling Tips

Add custom styling in assets/base.css or within tags in the same file:

#free-shipping-bar {
background: #e0f7e9;
color: #1a7f37;
border: 1px solid #b2dfdb;
margin-bottom: 15px;
border-radius: 8px;
}

If this reply was useful to you, we would really appreciate it if you gave us a LIKE and mark the issue as SOLVED!

[Tessahighrack]

It worked! Thank you so much