> For the complete documentation index, see [llms.txt](https://native-app-co.gitbook.io/stork-credit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://native-app-co.gitbook.io/stork-credit/integrations/threshold-progress-on-your-storefront.md).

# Threshold progress on your storefront

Show logged-in customers how close they are to their next threshold reward. Copy a snippet into your theme.

When a [threshold automation](/stork-credit/automations/threshold-automations.md) is active, Stork Credit stores each customer's next target on their customer record. Your theme can read it to show *"spend $80 more to earn your next $10"*.

|                       |                                                                       |
| --------------------- | --------------------------------------------------------------------- |
| **Name in the admin** | Next store credit threshold                                           |
| **What it holds**     | The lifetime spend at which this customer earns their **next** reward |
| **In Liquid**         | `customer.metafields.stork.next_threshold.value`                      |

## Drop-in: "spend $X more"

Paste anywhere a logged-in customer will see it — the account page, cart, or a section. Change the three values at the top to match your rule.

```liquid
{%- assign step = 500 -%}{%- comment -%} your threshold interval {%- endcomment -%}
{%- assign reward = 10 -%}{%- comment -%} your reward amount {%- endcomment -%}
{%- assign cap = 0 -%}{%- comment -%} your maximum threshold, or 0 if none {%- endcomment -%}

{%- assign target = customer.metafields.stork.next_threshold.value | default: step -%}
{%- if customer -%}
  {%- assign spent = customer.total_spent | divided_by: 100.0 -%}
  {%- assign remaining = target | minus: spent -%}
  {%- if cap > 0 and spent >= cap -%}{%- assign remaining = 0 -%}{%- endif -%}

  {%- if remaining > 0 -%}
    <p>
      Spend {{ remaining | times: 100 | money }} more to earn
      {{ reward | times: 100 | money }} in store credit.
    </p>
  {%- endif -%}
{%- endif -%}
```

## Drop-in: progress bar

Same thing with a bar showing progress through the current milestone.

```liquid
{%- assign step = 500 -%}{%- comment -%} your threshold interval {%- endcomment -%}
{%- assign reward = 10 -%}{%- comment -%} your reward amount {%- endcomment -%}
{%- assign cap = 0 -%}{%- comment -%} your maximum threshold, or 0 if none {%- endcomment -%}

{%- assign target = customer.metafields.stork.next_threshold.value | default: step -%}
{%- if customer -%}
  {%- assign spent = customer.total_spent | divided_by: 100.0 -%}
  {%- assign remaining = target | minus: spent -%}
  {%- if cap > 0 and spent >= cap -%}{%- assign remaining = 0 -%}{%- endif -%}

  {%- if remaining > 0 -%}
    {%- assign band_start = target | minus: step -%}
    {%- assign progress = spent | minus: band_start | times: 100 | divided_by: step -%}

    <div class="stork-threshold">
      <p>{{ remaining | times: 100 | money }} to go until your next
         {{ reward | times: 100 | money }} reward</p>
      <div class="stork-threshold__track">
        <div class="stork-threshold__fill" style="width: {{ progress }}%"></div>
      </div>
    </div>

    <style>
      .stork-threshold__track { background: #eee; border-radius: 99px; height: 8px; overflow: hidden; }
      .stork-threshold__fill { background: currentColor; height: 100%; }
    </style>
  {%- endif -%}
{%- endif -%}
```

{% hint style="warning" %}
`step`, `reward` and `cap` are copies of what's on your rule — nothing links them. Change the rule, change the snippet.
{% endhint %}

{% hint style="info" %}
**Customers who haven't reached their first milestone are included.** They have no field yet, so the snippet falls back to your first threshold — a customer who has spent $120 against a $500 interval is correctly told they need $380 more. This matches how the automation treats them.
{% endhint %}

## If something looks wrong

| What you see                    | Why                                                                                                                                                         |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Nothing at all                  | The customer is logged out, has passed your maximum, or has already reached their next milestone and is waiting for the automation's next run.              |
| New customers see nothing       | The `default` filter was dropped from the `target` line. Customers below their first milestone have no field yet, and the default is what stands in for it. |
| Numbers 100× out                | Keep both conversions: `customer.total_spent` is in **cents**, the field is in **dollars**.                                                                 |
| Bar out of step with the reward | `step` no longer matches the interval on your rule.                                                                                                         |
| A target that never pays        | The customer is past your maximum threshold — set `cap`.                                                                                                    |

{% hint style="info" %}
The **Cart widget** and **Checkout widget** only show what the **current cart** will earn from order-value automations, so threshold rewards never appear there. For the same progress shown at checkout instead of in your theme, add the dedicated **Threshold widget** (Shopify Plus only) — see [Cart & checkout widgets](/stork-credit/integrations/storefront-and-checkout.md#threshold-widget).

Your theme reads the customer record at page load, so a customer who just ordered can look further along than the automation has processed. [Run history](/stork-credit/automations/run-history.md) is the record of what was actually issued.
{% endhint %}