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: