Help with coding a dynamic free shipping bar for Impulse theme

Store Design
, ,
1

I’m trying to code a dynamic custom free shipping bar for the impulse theme.

I managed to add the text in the cart drawer by following this steps.

  1. Create a snippet called dynamic-free-shipping-bar.liquid

  2. Add this code into it

<div id="free-shipping-bar">
   {% if cart.total_price >= 10000 %}
      <p>You qualify for free shipping!</p>
   {% else %}
      <p class="freeBar">Spend {{ 10000 | minus: cart.total_price | money }} more to qualify for free shipping!</p>
   {% endif %}
</div>

<script>
   function updateFreeShippingBar() {
      const freeShippingBar = document.getElementById('free-shipping-bar');
      const cartTotal = {{ cart.total_price | money_without_currency }};
      const threshold = 10000;

      if (cartTotal >= threshold) {
         freeShippingBar.innerHTML = '<p style="color:blue;">You qualify for free shipping on orders over $100!</p>';
      } else {
         freeShippingBar.innerHTML = `<p style="color:blue;">Spend $${threshold - cartTotal} more to qualify for free shipping!</p>`;
      }
   }

   document.addEventListener('DOMContentLoaded', function () {
      updateFreeShippingBar();
   });

   // Use Shopify's AJAX Cart API to listen for cart updates
   document.addEventListener('cart:updated', updateFreeShippingBar);
</script>
  1. Add this line of code
{% include 'dynamic-free-shipping-bar' %}

in the cart.ajax.liquid file.

It is showing right now as the picture below

DFU98_0-1696368089471.png
DFU98_0-1696368089471.png1920×1080 215 KB

But when I try to customize it I can’t.

I added this CSS at the bottom of the theme.css.liquid file

#free-shipping-bar {
   background-color: #000000;
   color: white;
   text-align: center;
  }

but it isn’t working.

What do I need to do to be able to customize the free shipping bar?

Help would be appreciated.

2

Hi @DFU98

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Noah | PageFly

3

Hi, @PageFly-Noah .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

#free-shipping-bar {
   background-color: #000 !important;
   color: #fff !important;
   text-align: center !important;
  }

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

4

Hi, looked for the file but at least on Impulse theme couldn’t find it.

5

Thanks PageFly-Noah. Tried what you suggested and worked as expected.

DFU98_0-1696446959910.png
DFU98_0-1696446959910.png1920×1080 337 KB

Now I just wonder something, what would I need to add in the CSS to make the bar cover all the cart drawer? Because look like the div doesn’t cover it all. Thanks in advance.

6

Hi @DFU98 i will need to take a look in your preview page to give a proper code , can you please share with me the URL of the theme you are working on?

7

Hi @PageFly-Noah this is the link https://11b25bwcukfk1wc5-14934424.shopifypreview.com

Thanks in advance

8

Hi there!

I have this installed and working correctly, but we have a new product that will not qualify for free shipping. Is there a way to hide it from one product? Thanks!!

9

Reading this thread later on and wanted to say I respect the Pokemon Showdown grind while working! :oncoming_fist:

10

Late to this, but for anyone landing here from search: the Liquid approach above calculates the total when the page renders, so the bar won’t move when the cart updates over AJAX — which is exactly what Impulse’s cart drawer does.

Reading /cart.js after each cart change avoids that. It’s Shopify’s own cart endpoint, so it doesn’t depend on Impulse’s markup and survives a theme switch:

[KOODI]
.kern-ship {
box-sizing: border-box;
width: 100%;
padding: 10px 16px 12px;
font: inherit;
font-size: 13px;
line-height: 1.4;
text-align: center;
}
.kern-ship[hidden] { display: none; }
.kern-ship * { box-sizing: border-box; }
.kern-ship__text { margin: 0 0 7px; }
.kern-ship__amount { font-weight: 600; }
.kern-ship__track {
position: relative;
width: 100%;
max-width: 420px;
height: 6px;
margin: 0 auto;
border-radius: 99px;
overflow: hidden;
}
.kern-ship__fill {
display: block;
height: 100%;
width: 0;
border-radius: 99px;
transition: width .45s ease;
}
@media (prefers-reduced-motion: reduce) {
.kern-ship__fill { transition: none; }
}

Paste it into layout/theme.liquid immediately after the opening <body> tag, then set mountSelector in the config to your cart drawer’s container — something like '.cart-drawer__footer' — to place it inside the drawer instead of at the top of the page.

Duplicate your theme before editing; a theme update replaces theme.liquid.

One caveat worth knowing: this shows whatever threshold you type into the config. It doesn’t read your actual shipping rates, so the matching free shipping rate needs to exist under Settings → Shipping and delivery.