Add an announcement banner to the top of the store that shows a free shipping message.

We will go to the Theme code editor > Sections folder > announcement-bar.liquid to add some code to make this happen.

New feature details: If the threshold has not been met, show (something similar to) "Spend $X more to get free shipping". If the threshold has been met, show "You've earned free shipping on this order!"

Step 1:

Personally, I would like to add a toggle to let the merchant choose to display the default text message or

Add this script below to the schema setting of this file:

{
"type":"checkbox",
"id":"checkbox",
"label":"Switch"
},

Step 2:

Add an if condition to let the merchant to decide they want to show the new feature or the default announcement banner message:

So when we click the Switch checkbox, the new feature will be displayed as we expect.

Step 3:

We will use another if control flow to check the cart total price met the threshold condition, for example, let's set $2000,00 as the threshold.

{% if cart.total_price <= 200000 %}
Spend $2000 more to get free shipping
{% else %}
You've earned free shipping on this order!
{% endif %}

Okay, fantastic, we have get most of job done at this moment.

However, the below step can't have this sorted perfectly, this message only shows if we refresh the page. So we might have to write JS function which will check cart total every-time when quantity change.

Step 4:

After checking the Cart API doc, I realised that I might need to make sure we can use jQury in the store, So I just copy and paste this script below to my theme.liquid file: