You can display the calculated amount towards free shipping on your website popup. We will use the WisePops' JS Callback feature to adapt the content of your popup to the cart value of the visitor, and the custom properties to display the popup only when relevant.

Step 1:

Follow this article to create the wisepops.liquid snippet, and enable the wisepops()  function on your store.

Step 2:

Add the following snippet at the end of the wisepops.liquid file, before the closing </script>  tag:

 * Calculate and inject remaining amount towards free shipping
{% assign free_shipping_amount = 50 %}
{% assign amount_towards_free_shipping = free_shipping_amount | times: 100 | minus: cart.total_price %}
wisepops('listen', 'before-popup-display', function(event) {
 event.detail.popup.replaceString('{\{amountTowardsFreeShipping}}', '{{ amount_towards_free_shipping | money }}');

 * Define custom properties
wisepops('properties', {
  cartTotalPrice: {{ cart.total_price | default: 0 }} / 100,
  amountTowardsFreeShipping: {{ amount_towards_free_shipping | default: 0 }} / 100,

Please adjust the free_shipping_amount variable to your actual free shipping condition. 

We cannot fetch this value from your shop configuration. It must be adjusted in this script if you later change your free shipping rate configuration.

Your liquid snippet might look like this if it was free from other scripts before:

Step 3:

In your popup, place the following dynamic variable anywhere you want: {{amountTowardsFreeShipping}} 

For example, into a text block:

Step 4:

Add custom conditions to display your popup only when relevant. Inside Display > Custom conditions, we will add the 2 following rules:

  • amountTowardsFreeShipping  is greater than 0
  • cartTotalPrice  is greater than 0

So visitors who already benefit from the free shipping and the ones with an empty cart won't see the campaign.

You are good to go! You can learn more about how to adapt the content of your popups on the fly in this article.

Did this answer your question?