Storefront Offer Card

What the Offer Card Is#

Your discounts apply automatically at checkout on every plan, so shoppers never enter a code. The storefront offer card is the other half of that. It is a small card on your product page that tells shoppers about the offer before they reach checkout.

The card reads exactly the same configuration the checkout discount reads. That is deliberate. What a shopper is shown and what they are charged cannot drift apart.

Two things to know before you start:

• The offer card is included on every plan, Free included. Your discounts apply automatically at checkout whether or not the card is on your theme, and the card only changes what shoppers see beforehand.
• The card is a theme app block. It does not appear until you add it to your theme yourself, in the Shopify theme editor. Nothing about a discount changes when you add it.

Adding the Block to Your Theme#

What the badge means:

Once the block is installed, the button changes to Open theme editor and opens the same template without adding a second copy of the block. An Uninstall button appears beside Check again. It opens the same editor, because Shopify gives apps no way to remove a block from a theme. The card says so above the button, and once you delete the block there, the badge updates on its own.

What the check actually looks at#

• Your live, published theme only. If you publish a different theme, add the block there too.
• Your default product template, because the card is a product-page block. If some of your products use an alternate product template, the card still shows wherever you added the block, but the badge only reflects the default one.
• A block that is present but switched off in the theme editor counts as not added.
• A block nested inside a group or another block is still found.
• A theme that predates Online Store 2.0 has no product template of this kind and cannot take app blocks at all, so the badge stays on Off.
• The block is recognised by its own block handle, the offer_card in shopify://apps/…/blocks/offer_card/<uuid>. That segment is xDiscount’s own and does not change when the app is renamed or the extension re-registered, so the badge keeps working across upgrades.

Shopify never notifies an app when a theme block is added or removed, so after you click Add to theme xDiscount goes and looks for itself: once after two seconds, then every five seconds, up to twenty times, stopping as soon as the badge changes. After that, use Check again.

Theme Editor Settings#

Select the xDiscount offer block in the theme editor. Its settings are grouped under six headers: Text, Stock line, Conditions, Colours, Size and spacing and Display.

Everything about what the card says about a discount still comes from the discount itself. None of these settings can change an amount, a condition or a date, so the card and checkout cannot disagree.

Text#

Every text setting is optional, and empty means the translated default. That is deliberate. A store in another language is never handed English from a default you did not type.

Stock line#

The number is your theme’s own stock figure at the moment the page renders. It is only ever shown, and no discount is decided from it.

Conditions#

Three checkboxes decide which kinds of condition the window shows, and six optional templates under the same header decide the wording.

Condition wording. Six optional templates, one per kind of condition, so the window speaks in your words. Each takes {min} and, where it applies, {max} where the numbers go. Leave a template empty for the default wording.

A condition with Negate this condition ticked uses the same template, wrapped as Not: …. A maximum-only bound, and an older date condition, always use the default wording.

Colours#

Each offer is a filled, rounded tile, and Urgency text is the colour it is filled with. Out of the box that is a violet, #8B5CF6, with white writing. The block itself has no background or border unless you give it one, so the tiles sit directly on your product page.

Size and spacing#

The offers are laid out as a responsive grid: as many tiles per row as fit at 280px each, wrapping onto the next row below that. A tile lifts slightly when a shopper points at it, and does not move at all for a shopper who has asked their system to reduce motion.

Display#

The countdown is a strip of Days / Hours / Min / Sec under the offer, and it counts to the end of the last day in your store’s timezone. The end moment is stamped with your store’s UTC offset, so a shopper in another country sees the same time remaining you do, not their own midnight. The strip turns amber under a day, and red, gently pulsing, under an hour. A shopper who has asked their system to reduce motion sees no pulse.

Whatever you type into any text setting is shown to shoppers exactly as you wrote it, and is escaped before it reaches the page, so a stray quote or angle bracket in your wording can never break the card or your theme.

What Shoppers See#

On a product page with at least one live offer, the card shows your Heading and Subheading if you set them, and then one tile per live discount, laid out as a grid of filled, rounded tiles.

Each tile reads, left to right: the discount’s name as you typed it on the discount form, the Details line under it, the stock line if you switched it on, and the value large on the right.

Clicking a tile opens a window with the discount’s name, its value, and its conditions, in the same order and with the same joins as the discount actually evaluates them. If your discount needs 3 items and the card did not say so, a shopper would only find out at checkout. An offer with no conditions says so.

Rows after the first carry their own joining word, and or or, on the line above them, matching the way conditions are read top to bottom on the discount form. A negated condition is marked in red. A condition the card does not recognise renders nothing at all rather than a guess, and your Condition wording templates replace the default phrases above wherever you set one.

Finally, on the last day of a discount that has an end date, the tile shows Ends today above its countdown.

When the Card Shows Nothing#

The card renders nothing, so no empty box, no heading, not even its stylesheet, unless a product has at least one live offer to show. That means no card when:

• the product is not targeted by any discount;
• every discount on the product is Draft or Archived;
• today falls outside every discount’s Discount period;
• the block is not on your live theme.

Both period dates are inclusive whole days in your store’s timezone, and each side works independently. A start date with no end date runs forever, and a discount whose start and end are the same date runs for that one day.

The card follows the variant the shopper selects. A discount narrowed to specific variants says Applies to selected variants only in its details while the selected variant is one of them. The moment the shopper picks a variant you left out, that offer is dimmed and flagged Not available for the selected variant, and it comes back when they pick one you included. A whole-product discount that skips out-of-stock variants, or carries an Inventory condition, does the same on the variants it skips, and the stock line follows too.

The card reads the selected variant the way every theme announces it — the page’s URL and the product form — so what a shopper sees on the tile is what checkout will do for the variant in their hands.

The Gift Picker, Buy X Get Y#

On a Buy X get Y discount, the tile carries a button reading Choose your free gift, or whatever you typed into Gift picker label. It opens the gift window.

What shoppers see in the window. One row per gift product you picked, each with the product’s title, a small image where we have one, and an Add button. A gift with no title falls back to Free gift. Under the list, a line reads 0 of 2 selected, counting against the Number of gift items you set on the discount.

A gift with more than one variant to choose from reads Choose instead of Add: clicking it expands the variants, each named as your store names them (Small, Large) with an Add of its own, and a variant that is already sold out is greyed out as Sold out. Variant names and availability are read from your store’s own product data when the window opens, so they are always current and never stored on the discount.

What happens on Add. One unit of that gift is added to the cart, marked as a gift line, the row changes to Added, and the count goes up by one. A shopper who wants two of the same gift clicks Add twice, and one who wants one of each clicks each once. Your discount then takes the percentage you set off that line at checkout, for at most that many units across the whole cart. Once the count reaches the limit, every Add button greys out, because a further gift would be charged in full at checkout. A button is also greyed out while its request is in flight and comes back when it finishes, so a shopper who hit a failure can try again.

Things worth knowing:

• The marker the card puts on the cart line says only “this line is a gift”. Every value, so the percentage, how many gifts are covered, the schedule and the conditions, still comes from your discount. A shopper’s browser can never decide what a gift costs.
• Which variants a gift offers is your call in the picker: tick the product whole and every variant is offered, or open it and tick specific variants to limit the choice. Checkout only ever discounts a gift variant you allowed, whatever a shopper’s browser claims. A gift saved before this option existed offers the one variant captured at the time — open the picker and reselect it to offer more. A gift we have no variant for at all is skipped, and the whole gift area is hidden if that leaves nothing to choose.
• After the gift is added, the card tells your theme to refresh its own cart. Most themes pick this up. If yours does not update its cart drawer, the item is still in the cart, and a page refresh will show it.
• A Buy X get Y discount with no gift products cannot be saved as Active at all, and the discount form warns: “No gift chosen yet, shoppers cannot claim this offer until you pick one.”

Why Amounts Show in Your Store’s Currency#

This is the question merchants ask most about the card, so here is the straight answer.

Fixed amounts are stored in your store’s currency, because that is the currency you typed them in. At checkout, Shopify converts that figure to the shopper’s currency using the real exchange rate for their market.

The card, running in your theme, has no access to that exchange rate. Shopify’s theme templates expose a currency’s code, name and symbol, never the rate. So if the card simply formatted your number with the shopper’s currency symbol, a shopper in a euro market would read “€10.00 off” while checkout took about €9.20. The card and checkout would disagree, which is exactly what this app is built to prevent.

The rule the card follows: format the amount normally unless a mismatch is possible.

The same rule applies to Cart value conditions, so a threshold never tells a shopper to spend the wrong amount to qualify.

Percentages are never affected, because 20% off is 20% off in every currency, and neither is free shipping. The caution costs you nothing except on the amounts where being wrong would actually matter.