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 Quantity Breaks & BOGO.
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 Quantity Breaks & BOGO 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 widgetWhere the quantity-break widget appears on your product pages and how it gets there., or a campaign’s PlacementAutomatic by default — the widget finds the spot under your price and your quantity box on its own. If it lands in the wrong place, pick the spot yourself. 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.