# Promotion Progress Bar

## What is an Promotion Progress Bar?

Using the **Promotion Progress Bar** in your checkout is a great way to incentivize customers to increase their cart value by offering rewards, such as free shipping or a discount.&#x20;

<figure><img src="/files/PLqAvfSpUextI4RxhAKz" alt=""><figcaption><p>Example of the Promotion Progress Bar extension.</p></figcaption></figure>

What makes Platter+ so powerful, is that **you can stack up to three promotions into the same progress bar**. For example, you can incentives customers with:

* Free shipping
* A percentage discount off their order
* A free gift if they spend over a certain amount

### How does the Promotion Progress Bar function?

The promotions in the Promotion Progress Bar is are based on the following:

1. **Subtotal:** The subtotal of the items in the customer's cart (before taxes, discounts applied at checkout and shipping).
2. **Quantity:** The number of items in the customer's cart.

### What types of discounts can be used?

With Platter+, you can use the Promotion Progress Bar to promote three different discount types:

{% tabs %}
{% tab title="Shipping discount " %}
Increase order value by offering free shipping when customers hit a specific target.

<figure><img src="/files/3W7LA0tMjbq6osqH0nZ9" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Product discount" %}
Offer a free/discounted product when customers reach a specific spending threshold or buy specific products.

<figure><img src="/files/xQSP2lv6IctVT92hV8LJ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Order discount" %}
Offer a percentage or fixed discount on order when customers spend a minimum amount.&#x20;

<figure><img src="/files/0D3m3u5v5LAVEMvvhUc8" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## How are discounts in the Promotion Progress Bar applied to the order?

<figure><img src="/files/9JVQ5zj3wGKK4lGYWU09" alt=""><figcaption></figcaption></figure>

Any discounts you're offering will need to be created using [Discounts](https://admin.shopify.com/discounts) in your Shopify admin. This can be done by creating Automatic Discounts.

{% hint style="info" %}
For more information on how to create discounts in Shopify, refer to [Shopify's article on discount types](https://help.shopify.com/en/manual/discounts/discount-types).&#x20;
{% endhint %}

***

## How to configure a Promotion Progress Bar?

Follow the instructions below to setup an **Promotion Progress Bar:**

1. From the dashboard, go to **Extensions** tab or click **`Browse extensions`**.\
   ![](/files/Uf7yAQUwJPRpaFHxqxgH)
2. In the Extensions page, scroll down and find the **Promotion Progress Bar** extension and click **`Add to Checkout`.**
3. Select the markets you'd like to display the extension.\
   ![](/files/UDGkmREi1bT82D9j5J4q)
4. In the Promotional Details, select how you'd like the Promotion Progress Bar to activate.\
   ![](/files/cpk8uveiG7HtQExWsjo6)
5. If you'd like, add header text.\
   ![](/files/v9gsugLhDaRk8b6WqhtV)
6. If your promotion only applies to when customers have certain items in their order (ie. "Buy jeans, get a free t-shirt"), specify what products should trigger the promotion.\
   ![](/files/NVxIqoTr4CGgUvSbLEr3)
7. Select the discount type you'd like to use for the first promotion (shipping, order, or product).\
   ![](/files/1AH6NU1NdtEfDoxoVlTN)
8. Then, select the minimum subtotal/quantity the customer must add to their order in order to be eligible for the promotion.\ <mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">Promotions are calculated based on the cart's subtotal before discount codes are applied at checkout. If the subtotal below the minimum after the discount code is applied, the customer will still qualify for the promotion. This is a Shopify limitation.</mark>\
   ![](/files/W2CMQVBoQ2RlQypPPGAb)
9. Next, select what discount method you'd like to use, either percentage off (%) or fixed amount ($). And set the discount percentage or dollar amount.\ <mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">When using the product discount type, the discount method applies individually to each eligible promotional product. For example, if your promotion is "Buy a pair of pants, get $5 off two shirts," each shirt will receive a $5 discount, resulting in a total discount of $10.</mark>\
   ![](/files/nReeCLOuJMY3LP2nfWfm)
10. Edit the message shown before and after the customer becomes eligible for the promotion.\
    ![](/files/CslSO664yC2SmroQOnw5)
11. To create additional offers/promotions, click the **`Add offer`** button.\ <mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">You can use up to three offers/promotions at one time.</mark>
12. If you are using a second or third offer, repeat steps 7-10 for each additional offer.&#x20;
13. If you desire, adjust the header and border styling.\
    ![](/files/6KNtf1l6ZOgLVVcJ5wKM)
14. Open the **Install extension in checkout editor** window, and enter a custom name (optional).\
    ![](/files/zYyf8sGe2W7C2XrBrYxj)
15. Click the **`+`** icon to copy the Handle to your clipboard.\
    ![](/files/ZXdhyP29Zb1R3FS24gwC)
16. Hit **`Save`** to to ensure your settings and saved.\
    ![](/files/51msskM6slzQunzoXrTz)
17. Before moving to the next step, make sure that you have [created automatic discounts in Shopify](#how-are-discounts-in-the-promotion-progress-bar-applied-to-the-order) that match the offers you have set up in the previous steps.\
    Note: If you do not create corresponding automatic in Shopify, your
18. Open your Checkout Editor and [install your extension](https://docs.platter.co/~/changes/QMi520wn6lsXSXuRamqi/get-started/get-started-in-3-steps#installing-an-extension).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.platter.com/checkout/checkout-extensions/promotion-progress-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
