title: How to update css styles in Shopify ajax cart
body: <p>I'm building ajax cart for my client's Shopify store with <a href="https://github.com/EvgeniyMukhamedjanov/liquid-ajax-cart" rel="nofollow noreferrer">liquid-ajax-cart</a>. Now I'm trying to add a progress bar that shows how far a user from the free shipping option. The bar is the <code>.free-shipping-bar</code> element within the <code>.minicart__header</code>.</p>
  <p>The free shipping starts from $100 (<code>free_shipping_threshold_price</code> liquid variable) so I want the bar to be filled completely if the cart total is $100 or more.</p>
  <p>If the cart total is less than $100 then I want to fill the bar accordingly (40% for $40, 50% for $50 etc.).</p>
  <p>The HTML of the section updates as it should when a user clicks &quot;add to cart&quot; but the css (<code>{% style %}</code>) doesn't.
  Is possible to fix it somehow so that css code updates by ajax also?</p>
  <pre><code>&lt;div class=&quot;minicart-wrapper&quot;&gt;
      &lt;div class=&quot;minicart-overlay&quot; data-ajax-cart-toggle-class-button=&quot;js-ajax-cart-open&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;minicart&quot; data-ajax-cart-section&gt;
          &lt;div class=&quot;minicart__header&quot;&gt;
              &lt;h3 class=&quot;title&quot;&gt;{{ 'general.cart.title' | t }}&lt;/h3&gt;
              &lt;div class=&quot;free-shipping-bar&quot;&gt;&lt;/div&gt;           
              &lt;button class=&quot;close-button&quot; data-ajax-cart-toggle-class-button=&quot;js-ajax-cart-open&quot; type=&quot;button&quot;&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;minicart__items&quot;&gt;
              &lt;!-- items code --&gt;
          &lt;/div&gt;
          &lt;div class=&quot;minicart__footer&quot;&gt;
              &lt;!-- footer code --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  {%- liquid
      assign free_shipping_threshold_price = 10000
      assign free_shipping_percent = cart.total_price | times: 100 | divided_by: free_shipping_threshold_price
  -%}
  
  {% style %}
  .free-shipping-bar {
      position: relative;
      width: 100%;
      height: 3px;
      background-color: #c4c4c4;
  }
  
  .free-shipping-bar:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: {{ free_shipping_percent }}%;
      background-color: #005030;
      max-width: 100%;
  }
  
  {% endstyle %}
  
  
  {% schema %}
  {
      &quot;name&quot;: &quot;Ajax Cart&quot;,
      &quot;settings&quot;: [
     
      ]
  } 
  {% endschema %}
  </code></pre>