Add a live delivery promise to your Shopify product pages — a small badge that tells shoppers "Order within 4h 12m → arrives Tuesday, Jun 24."

It only appears when the item genuinely arrives fast, so it can only help conversions: it will never show a slow or risky promise. If anything isn't ready, the badge simply stays hidden.

Time to set up: ~15 minutes. You'll need: access to your Shopify admin, and your product IDs (SPINs) from your Spreetail contact.

Step 1 — Get your product IDs (SPINs)

Ask your Spreetail Account Manager for the SPIN of each product you want the badge on. A SPIN is Spreetail's Product Identification Number that tells PromisePro which item to estimate. (One per product, or per variant if your products have variants.)

Step 2 — Create the "PromisePro SPIN" field (one time, ~2 min)

This lets you store a SPIN on each product.

1. In Shopify admin, go to Settings → Metafields and metaobjects → Variants.
2. Click Add definition.
3. Name: PromisePro SPIN
4. Verify Namespace and key is 'custom.promisepro_spin'.
5. Set the Type to One value - Single line text.
6. Turn on Storefront access (so the badge can read it).
7. Save.

Step 3 — Add a SPIN to each product

1. Go to Products and open a product.
2. Find the Metafields section (or open the specific variant).
3. In PromisePro SPIN, paste that product's SPIN.
4. Save. Repeat for each product you want the badge on.

Step 4 — Turn on the badge in your theme (one quick code step)

You'll add a Custom Liquid block in the theme editor and paste in one snippet — no theme-code files to touch.

1. Go to Online Store → Themes → Customize.

   

2. In the top bar, switch the template to Products (open any product so you can see the preview).

   

3. In the product area, click Add block → Custom Liquid, and position it where the badge should appear (e.g. under the price or the Add-to-Cart button).

   

4. Paste the block below into it

<div id="promisepro-delivery"
     class="promisepro-delivery"
     data-spin="{{ product.selected_or_first_available_variant.metafields.custom.promisepro_spin.value | escape }}"
     data-threshold-days="3"
     data-locale="{{ request.locale.iso_code | escape }}"
     hidden></div>
<script src="https://api.spreetail.com/v1/delivery-estimate/widget.js" async></script>

5. Click Save.

Step 5 — Style it to match your brand (optional)

The badge ships with a dark card and green accent that works out of the box. To match your store's look, add a style attribute to the root <div> in Step 4 with any of these:

Add them to the same <div> from Step 4 — for example, a light-themed card with your brand green:

<div id="promisepro-delivery"
     class="promisepro-delivery"
     data-spin="..."
     data-threshold-days="3"
     data-locale="..."
     style="--promisepro-accent:#0a7d55; --promisepro-bg:#ffffff; --promisepro-color:#111111; --promisepro-radius:8px;"
     hidden></div>

If you skip this step entirely, the default dark card + green accent appears — it's designed to look good without any customization.

Step 6 — Preview it

1. Open one of your product pages (one that has a SPIN set).
2. Enter a ZIP code when prompted (shoppers do this once; it's remembered).
3. If the item ships fast to that ZIP, the badge appears with a live countdown. 🎉

If it doesn't appear, that usually means delivery to that ZIP isn't fast enough (the badge is doing its job by staying hidden), or the SPIN isn't set yet.

Good to know

• It never overpromises. The badge only shows on a confirmed fast delivery; anything else (slow, out of stock, no route) shows nothing.
• Shoppers enter their ZIP once. It's remembered, with a "Change ZIP" link.
• Match your brand. The badge can use your brand color and styling — ask your developer to set it (one line). Defaults look good out of the box.
• Languages. English and Spanish are supported; it follows your store's language.
• Roll out gradually. Start with a handful of products (just set their SPINs), then expand.

Need help?

Reach out to your Spreetail Account Manager for your store's setup details if the badge isn't appearing the way you expect.