Solved

Help with coding a dynamic free shipping bar for Impulse theme

DFU98
Excursionist
22 0 5

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

DFU98_0-1696368089471.png

 

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.

 

Accepted Solution (1)

PageFly-Noah
Astronaut
1079 197 215

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 7 (7)

PageFly-Noah
Astronaut
1079 197 215

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

DFU98
Excursionist
22 0 5

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

DFU98_0-1696446959910.png

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
Astronaut
1079 197 215

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?

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

DFU98
Excursionist
22 0 5

websensepro
Shopify Partner
1040 144 149

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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
DFU98
Excursionist
22 0 5

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

hbenik
Tourist
29 0 3

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