KellyxKelly - Shipping Bar

shipping-bar.liquid

{% assign threshold = section.settings.free-shipping-threshold | times: 100 %}
{% assign amount_remaining = threshold | minus: cart.items_subtotal_price %}
{% assign amount_remaining_money = amount_remaining | money %}

<div class="shipping-bar">
  {% if amount_remaining <= 0 %}
  <p>{{ section.settings.free-shipping-message }}</p>
  {% else %}
  <p>{{ section.settings.approaching-message | replace: '*', amount_remaining_money }}</p>
  {% endif %}
</div>

<style type="text/css">
.shipping-bar {
  background-color: {{ section.settings.background-color }};
}

.shipping-bar p {
  color: {{ section.settings.text-color }};
}
</style>

{% schema %}
{
  "name": "Free Shipping Bar",
  "class": "free-shipping-bar",
  "settings": [
    {
      "type": "text",
      "id": "free-shipping-threshold",
      "label": "Free Shipping Threshold",
      "info": "Include number only. Don't include the $."
    },
    {
      "type": "text",
      "id": "approaching-message",
      "label": "Almost Free Shipping Message",
      "info": "Add a * where you would like the price to appear."
    },
    {
      "type": "text",
      "id": "free-shipping-message",
      "label": "Free Shipping Message"
    },
    {
      "type": "color",
      "id": "background-color",
      "label": "Background Color",
      "default": "#ff1493"
    },
    {
      "type": "color",
      "id": "text-color",
      "label": "Text Color",
      "default": "#ffffff"
    }
  ]
}
{% endschema %}

{% stylesheet %} 
.shipping-bar {
  text-align: center;
  padding: 0.5em 2em;
  font-weight: 600;
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}