Buy X get Y and BOGO (AndOr Offer picker block)

The Buy X get Y widget shows a Buy X get Y deal in two places: a banner on the product page of the item a shopper buys (X), and a claim row in the cart for the reward item (Y). It never adds anything on its own. The shopper presses Claim.

Made by: a Buy X get Y promotion and its Buy X get Y upsell offer. You can also add that offer to a discount you already have. See Create an upsell offer.

For developers: Code · Styling · Events

What shoppers see

On the product page of an X item, the banner shows:

• Your offer message, for example “Buy 2, get 1 half off”.
• A progress bar with a count, for example “1 of 2 in your cart”.
• A short note while items are missing, for example “Add 1 more to unlock it.”

When the cart has enough X items, the banner says “Claim 50% off in your cart.” with a full bar. Once checkout applies the deal, it says “Deal unlocked: 50% off”.

In the cart page and the cart drawer, once the X items are in the cart and the Y item is not, a claim row shows:

• The title “Add it for 50% off”.
• The Y product’s picture and name.
• The old price struck through and the claim price. These show only when AndOr is sure that price is what checkout charges.
• A variant menu when the Y product has several variants.
• A Claim button.

On the cart page, Claim adds the item and reloads the page. Anywhere else, it adds the item and opens your theme’s cart drawer.

When Y is any item

When the reward goes to Any item in cart, the product page banner counts the whole deal, the items bought and the reward item together. For buy 2, get 1 it reads “1 of 3 in your cart” and “Add 2 more to unlock it.” Once checkout applies the deal, it says “Deal unlocked: 50% off”.

The cart shows no claim row, because there is no one product to claim.

When another discount wins

AndOr only says a deal is unlocked when the cart confirms it. If another discount that can’t be combined could win, the row says so. For example: “Add it for 50% off. Your other discount may apply instead.” If another discount already won, one line names it: “You’re getting 20% off! instead. It can’t be combined with 50% off.”

Where it goes

You pick the places in the offer’s Where it shows section: Product page, Cart page and Cart drawer. All three are ticked by default.

Note The cart drawer, and updates the moment the cart changes, need a theme that sends Shopify’s storefront cart events. Horizon 4.0+ and Dawn 15.5+ do. On other themes, shoppers see this widget on the cart page and product page. It updates on the next page load. See Theme requirements.

Add the block

Note App blocks need an Online Store 2.0 theme. On an older (vintage) theme, turn on the app embed and paste the one-line tag instead. See Theme requirements.

The Buy X get Y banner and claim row come from the AndOr Offer picker app block. It is the same block the bundle card and the free gift use. Your upsell offer decides what it draws.

To the product page

1. Open the theme editor on a product template.

   In Shopify, go to Online Store > Themes and click Edit theme. Pick Products, then the template your products use (often Default product). Open a product that is an X item of your deal, so the preview has something to show.

   

2. Click Add block, open Apps and pick AndOr Offer picker.

   Add it in the product information section.

   

3. Drag the block under the buy buttons, then click Save.

   

To the cart page

1. Pick Cart in the page menu, then click Add block in the cart items section and pick AndOr Offer picker.

   

2. Drag it under the cart items, then click Save.

   The claim row shows here once the cart qualifies.

   

Note You can’t place a block inside a cart drawer. The drawer copy of the claim row comes from the app embed. Keep AndOr Discount Display on and tick Cart drawer in the offer.

Tip In AndOr, the What’s next card after you save a promotion has Open theme editor and Add to cart page buttons. They open the theme editor with the block ready to place.

Or paste the tag

If your theme has no place for an app block, a developer can paste a tag into the theme code instead:

• <andor-offer-picker> on the product page draws the same banner.
• <andor-claim> on the cart page, under the cart lines, draws the same claim row.

Both tags need the app embed on. Do not paste a tag where the block is also placed, or shoppers see it twice. See One-line tags.

Block settings

The block shows a short paragraph that explains what it does, then one setting.

Button color

The color of the Claim button and the progress bar fill. Left at the default, it follows the app embed’s Sale price color, or else your brand color. Change it here to use one color for this block only.

Default: #c0392b.

Note The offer message, the places it shows and the dates are set in the app, not in the block. See Message and where it shows.

What it needs to appear

• Optional: the app embed. The block shows without it. The embed adds your shared look settings, text changes, the cart drawer parts and one-line tags.
• The discount shows on your storefront (Show storefront widgets is on for the promotion).
• A live upsell offer of type Buy X get Y is linked to the discount.
• The AndOr Offer picker block is on the product and cart templates.
• The discount is automatic (no code), a percentage off, and has no customer eligibility or condition the storefront can’t check.
• The deal is inside its active dates, and so is the offer.

Show it in more places (code)

To show it where your theme has no slot for the block, paste a line of code. See Buy X get Y: Code.

Limits

• The banner shows only on the product pages of X items. A Y product’s page shows nothing: the reward is claimed in the cart.
• The claim row offers the first 3 Y products only.
• An X item past the first 50 products on the X side gets no banner.
• The widget offers only the next round of the deal. A cart that already made one shows “unlocked” on the banner and no claim row.
• When the offer is on the product page only, the banner hides once the cart qualifies, because there is nowhere to claim.
• On the cart page, the claim row appears after the cart is read, so the content under it moves down once.
• Two live discounts with the same checkout message can confuse the “unlocked” check. Give each discount its own message.