Where bundles appear on your storefront
Updated Sep 10, 20263 min read
Two settings decide where a Hype block shows up. Show on (called Applies to for volume discounts), on the first wizard step, picks which product pages are eligible. Placement, on the Blocks step, picks where on those pages the block sits. You never add a block per offer to your theme — the blocks mount themselves.
Which pages: Show on
The Show on select offers three modes:
- Specific products — shown on the product pages you pick, one or many.
- Specific collections — shown on every product page in the picked collections. Products added to a collection later are included automatically.
- All products — shown on every product page in your store.
Pick the mode first, then use Pick products or Pick collections to choose. Your selections are kept per mode, so switching between modes does not throw away earlier picks — but only the active mode's picks are saved.
For a Frequently bought together offer, Show on does double duty: it also defines which products count as a valid anchor for the discount, so a shopper cannot pair your extras with an untargeted product and claim the saving.
For a Volume discount, the single Applies to section decides both which products get the quantity breaks and which product pages show the selector.
Where on the page: Placement
On the Blocks step, the Placement section has a Position select with two choices.
Automatically, near Add to cart
The default. Hype finds the main add-to-cart form on the page and injects the block next to it. A second select, Position relative to the product form, chooses:
- Above the add-to-cart form
- Below the add-to-cart form
This needs no theme editing and works on most themes. If several offers match the same page, they stack.
At a placement anchor
Use this when you want the block somewhere the automatic position cannot reach — under the description, in a page section, in a tab.
- In the Shopify theme editor, open the page you want and click Add block.
- Under the app's blocks, add Hype: Placement anchor.
- Drag it where you want the offer to render.
- Set its Placement name (default
Hype placement). In the theme editor the block shows a labelled placeholder so you can see it. - Back in Hype, on the Blocks step, set Position to At a placement anchor and type the same name into Anchor name.
- Save.
You can also make an anchor out of any element in custom Liquid or page content by giving it a data-hype-anchor attribute:
<div data-hype-anchor="Bundle builder"></div>If the anchor is not on the page, the block falls back to automatic placement. A typo in Anchor name is not an error you will see — it is a block that quietly renders next to the product form instead.
Which button adds to the cart
Still in Placement, the Add to cart button select decides which button performs the add on product pages:
- The block's and the theme's buttons — both work.
- Only the block's button — the theme's add-to-cart button is hidden while the block is mounted.
- Only the theme's button — the block just captures the choice, and the theme's own button adds it.
The last option is the one to reach for when two add-to-cart buttons side by side look wrong on your theme.
What the block needs to work
- The Hype app embed must be enabled in the theme, and that theme must be the one selected in Settings → Theme.
- The offer must be Active, not Draft.
- The product page must match Show on.
Blocks re-mount themselves when a theme section re-renders, so a variant switch or a quick-view drawer will not leave the block behind.
Delays
Storefront data is cached for 10 minutes. A change to a live offer can take that long to appear. To push it out immediately, go to Settings → Cache and click Clear Cache.
Related
Was this article helpful?
Related articles
Still need help?
Start a chat and we'll pick it up right here.