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-spin-list="{{ product.selected_or_first_available_variant.metafields.custom.promisepro_spin_list.value | json | escape }}"
     data-threshold-days="3"
     data-cutoff-offset="20"     
     data-locale="{{ request.locale.iso_code | escape }}"
     hidden></div>
<script src="https://api.spreetail.com/api/v1/delivery-estimate/widget.js" async></script>

5. Click Save.

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

To match your store's look, add a style attribute to the root <div> in Step 4 with any of these:

Pinning light or dark: because each variable adapts independently, setting only the background (or only the text) can leave the other color following the shopper's system theme and look wrong. To lock a fixed look, set --promisepro-bg and --promisepro-color together (plus your accent). The full variable list and a copy-paste "restore classic dark" snippet are in the Developer Guide.

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>

Skipping this step leaves the default adaptive theme, which follows the shopper's system light/dark preference automatically. To pin one fixed look regardless of system theme, set --promisepro-bg, --promisepro-color, and --promisepro-accent together.

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.
• Bundles are all-or-nothing. For a product with a SPIN List, the badge shows a single promise for shipping the whole bundle together — and only when every component is in stock and fast enough to that ZIP. If any one component isn't, the bundle badge stays hidden (even if the other components would qualify on their own).
• 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.