Add the widget to your theme

The checkout discount and the storefront widget are two separate things. The discount is enforced by a Shopify Function as soon as you publish a campaign — it applies at checkout whether or not the widget is on your theme. The widget is what makes the deal visible to shoppers before they get there: a table of discount levels on the product page, and a short message in the cart.

Note

If a campaign’s discount isn’t showing on your product pages but you’ve confirmed it applies at checkout, the widget almost certainly isn’t turned on yet — the steps below fix that.

Turn on the app embed (recommended)

This is the fastest way to add the widget, and it needs no manual placement:

1. In Shopify admin, go to Online Store → Themes, then Customize your live theme.
2. Open App embeds.
3. Turn on Nock Deals.
4. Save the theme.

Home marks this step done automatically the first time a shopper’s browser loads a product page with the embed on — usually within a minute of saving.

Once it’s on, the widget places itself: it looks for your price and add-to-cart area on the product page and renders next to them, and adds a short line to the cart and cart drawer.

Add the widget as a block (for exact placement)

If automatic placement lands in the wrong spot, add the block instead — it takes precedence over the embed’s automatic placement:

1. In the theme editor, open your product template.
2. Add a block, and choose Nock Deals widget.
3. Position it where you want.

Widget position and custom selector

Both the app embed and the block expose the same two settings:

Setting	What it does
Widget position	Auto (default), Before add to cart, After price, or Custom selector.
Custom CSS selector	Only used when position is Custom selector — the widget renders immediately after the element matching this CSS selector.

Tip

You can also fix placement from the app itself, without touching theme code: open Settings → Storefront widget, or a campaign’s Placement tab, and use the placement picker to click the exact spot on a live preview of your store. Use Reset to automatic to go back to the default behavior.

What ships where

• The product page gets the full widget: the level table, or the cart-goal progress bar, styled the way you set up under a campaign’s Widget tab.
• The cart page and cart drawer get a lighter message — a line under the relevant cart item saying what was unlocked or what’s left to unlock the next level.

Next: create your first campaign so there’s something for the widget to show.