Help with coding a dynamic free shipping bar for Impulse theme

[DFU98]

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>

3. 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

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.

[PageFly-Noah · Accepted solution]

Hi @DFU98 

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

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

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[DFU98]

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

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.

[PageFly-Noah]

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?

[DFU98]

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

Thanks in advance

[websensepro]

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!

[DFU98]

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

[hbenik]

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!!

[LMiller]

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