# Buy X get Y and BOGO (AndOr Offer picker block) > The AndOr Buy X get Y (buy one get one) banner on product pages and the claim row in the cart. What shoppers see and what it needs to appear. Source: https://backtrackhq.com/docs/widgets/buy-x-get-y/ (Screenshot: Buy X get Y claim row in the cart with a Claim button) 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](https://backtrackhq.com/docs/promotions/buy-x-get-y/) 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](https://backtrackhq.com/docs/offers/create-an-offer/). **For developers:** [Code](https://backtrackhq.com/docs/widgets/buy-x-get-y/code/) · [Styling](https://backtrackhq.com/docs/widgets/buy-x-get-y/styling/) · [Events](https://backtrackhq.com/docs/widgets/buy-x-get-y/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 | Place | How it gets there | |---|---| | Product page (banner) | **AndOr Offer picker** block on the product template | | Cart page (claim row) | **AndOr Offer picker** block on the cart template | | Cart drawer (claim row) | The app embed, **AndOr Discount Display** | 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](https://backtrackhq.com/docs/get-started/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](https://backtrackhq.com/docs/developers/one-line-tags/) instead. See > [Theme requirements](https://backtrackhq.com/docs/get-started/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. (Screenshot: The theme editor page menu with a product template picked) 2. **Click Add block, open Apps and pick AndOr Offer picker.** Add it in the product information section. (Screenshot: The Apps list in the theme editor with AndOr Offer picker) 3. **Drag the block under the buy buttons, then click Save.** (Screenshot: AndOr Offer picker placed under the buy buttons in the theme editor preview) ### 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.** (Screenshot: AndOr Offer picker on the cart template) 2. **Drag it under the cart items, then click Save.** The claim row shows here once the cart qualifies. (Screenshot: A Buy X get Y claim row under the cart items in the theme editor preview) > **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: - `` on the product page draws the same banner. - `` 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](https://backtrackhq.com/docs/developers/one-line-tags/). ## Block settings (Screenshot: AndOr Offer picker settings with Button color) 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](https://backtrackhq.com/docs/promotions/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](https://backtrackhq.com/docs/offers/message-and-placements/). ## What it needs to appear - Optional: the [app embed](https://backtrackhq.com/docs/get-started/install/#turn-on-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](https://backtrackhq.com/docs/widgets/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.