# Free Shipping Calculator Message

**Free shipping calculator message** shows progressive bar with message when customers put more items in their shopping carts.

![](https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F1xjjYI1U67OyGsywTMrJ%2F23.png?alt=media\&token=7eb9255a-86ff-4c95-af52-af086f53ed13)

{% embed url="<https://www.youtube.com/embed/5e-UB2nqclA>" %}

1. From your Shopify admin, go to **Online Store** **->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme settings ->** **Free shipping calculator message.**

|                                                |                                                                                                                                                                                                                                     |
| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Show free shipping calculator message          | Toggle the alert for the free shipping message and calculation bar.                                                                                                                                                                 |
| Type                                           | <p>There are 2 types for free shipping calculator message functionality:<br></p><p><mark style="color:orange;"><strong>Discount</strong></mark></p><p><mark style="color:orange;"><strong>Shipping and delivery</strong></mark></p> |
| Enter total order price to offer free shipping | <p>Enter the threshold of the total order amount to achieve free shipping. </p><p></p><p><em><mark style="color:orange;">Note: the currency is automatically the shop currency.</mark></em></p>                                     |
| Height                                         | Determine the height of the free shipping calculation bar ranging from 10 to 20px.                                                                                                                                                  |
| Rounded border                                 | Determine the roundness of the border of the bar ranging from 0 to 100px.                                                                                                                                                           |
| Show percent                                   | Show the percent of the calculation bar.                                                                                                                                                                                            |
| Show shipping truck icon                       | Toggle to show the truck icon running along with the calculation bar.                                                                                                                                                               |
| Text color                                     | Apply color for the bar percent text.                                                                                                                                                                                               |
| Background color                               | Apply default color for the bar background.                                                                                                                                                                                         |
| Background color < 30%                         | Apply color for the bar background when the percent is less than 30%.                                                                                                                                                               |
| Background color < 60%                         | Apply color for the bar background when the percent is larger than 30% but less than 60%.                                                                                                                                           |
| Background color < 100%                        | Apply color for the bar background when the percent is larger than 60% but less than 100%.                                                                                                                                          |
| Background color = 100%                        | Apply color for the bar background when the bar reaches 100%.                                                                                                                                                                       |