Volume discount selector

The volume discount selector is the interactive "buy more, save more" picker on the product page. It lists each tier of a Volume Discount campaign, lets the shopper choose one, pick the variants for the items in that tier, and add them all to the cart. It is only offered on campaigns whose discount type is Volume Discount.

If you only want to show the savings without letting shoppers pick a tier, use the volume discount table instead.

Add it

1. Open the campaign's Blocks page and select the Product page tab.
2. Click Add campaign block and choose Volume discount selector.
3. Copy the App block ID, add the Hype: Volume Selector block in your theme editor, and paste the ID into its App identifier field. Full steps: Adding a block to your theme.
4. Click Next, configure the tiers, and save.

Place it inside your product form, near the add to cart button.

Content settings in the Hype admin

Settings are grouped per discount rule, labeled Discount #1, Discount #2 and so on, matching the rules on the campaign.

• Header and its icon — the heading above the tier list.
• Title — the label for each Tier, for example Buy 3.
• Discount badge text — the badge on a tier, for example GET {{discount}} OFF.
• Show badge on tier and Badge text — highlights one tier. Default text: Most Popular. You also choose which tier carries it.
• Strike off original price — draws a line through the undiscounted price on each tier.
• Show "Amount off" / "% off" badges — shows the saving as a badge on each tier.

Tier text accepts {{eligibility}} and {{discount}}, plus {{discount_code}} in the header. See Variables you can use in block text.

Style settings in the theme editor

Open the Hype: Volume Selector block.

Override theme's add to cart button

By default the selector renders its own add to cart button, so the shopper ends up with two buttons on the page — yours and Hype's. The theme editor block has an Add to Cart Override group to fix that:

• Override theme's add to cart button — a checkbox, off by default. Its help text reads: When enabled, this component will override the theme's add to cart button functionality. Turn it on and your theme's own button adds the selected tier to the cart, so you can hide or remove Hype's button.
• Add to cart button selector — a CSS selector identifying your theme's button, for example .btn-add-to-cart or #add-to-cart-button. Fill this in when the automatic match picks the wrong button, or none at all. The field is only used while the override checkbox is ticked.

To find the selector, open your product page, right-click the add to cart button, choose Inspect, and read the button's id or class.

Preview

Inside the Shopify theme editor the block renders placeholder tiers and variant pickers so you can style it before a campaign is live.

Swatches

If the products in a tier have variants, the variant picker can show color or image swatches instead of dropdowns. See Swatches.

Related

• Volume discount table
• Adding a block to your theme