Xboost

How to create a Mix & match offer

Overview

A Mix & match offer gives a discount when the shopper buys a number of items, and the items can be different products. For example: buy 2+ and get 10% off, buy 3+ and get 15% off. The widget on the product page lists the tiers, and the discount applies in the cart. The widget shows the note "* Auto apply discounts on Cart Page" by default.

By default the widget shows on the product page, above the Add to cart button.

Before you start

Steps

1. Choose Mix & match and a template

  1. In Xboost Bundle, open Offers and click Create offer.
  2. On the Mix & match card, click Create an offer.
  3. Click Select and customize on the template.

Select template page with the Mix & match template

The offer opens in the editor as a Draft. Click Edit offer name to rename it. Shoppers do not see this name.

2. Choose the products (Trigger)

Under Select products to display the offer, choose the products in the offer:

  • Specific product: the products you select.
  • Automated: products in the collections you select.
  • All products: every product.
  • All products except: every product except the ones you select.

Optional: tick Scheduled time to set a start and end date. Click Next.

Trigger step with the product options and the live preview

3. Set up the tiers (Offer)

The Mix & match section lists the tiers, for example #1 Buy 1, #2 Buy 2+ and #3 Buy 3+.

Offer step with three Mix & match tiers and Add tier

Click a tier to open it:

An open Mix & match tier with Title, Quantity, Discount type, Unit and Amount

  1. Edit the Title the shopper sees, for example "Buy 2+".
  2. Set the Quantity: the number of items, of any of the offer products, needed for this tier.
  3. Pick the Discount type:
    • Default price: no discount for this tier.
    • Bundle discount: a discount on each item. Set Unit (% or $) and Amount.

To add a tier, click Add tier. To remove one, click the trash icon on the tier.

For more about the tiers, see Mix & Match discount type.

4. Optional: Integrations and Settings

  • Integrations adds a trust badge, countdown timer or estimated delivery from other XBoost apps at Top, Bottom or Below offer title. See Integrations.
  • Settings > Customization: Title (the heading of the widget), Item discount title (use {{discount}} for the discount, for example "Get {{discount}} off") and Note.
  • Pricing setting > Price rounding rounds the discounted price up to the price ending you choose, such as .99.

Settings section with Customization and Pricing setting

Click Next.

5. Adjust the look (Appearance)

Appearance step with Content, Design, Colors, Text size and Custom CSS

  • Content: Show discount icon.
  • Design: Note position (Left or Right), Space percentage, Radius corner and Item space.
  • Colors, Text size and Custom CSS.

6. Publish

Click Publish at the top right. Then open a product that the offer targets to check the widget, or use Test on storefront.

Change where the widget shows

  • Theme editor: open your product template, click Add block and add the Mix & Match app block from Xboost Bundle. The block's Margin Horizontal setting sets the space above and below the widget.
  • Page builders or custom code: copy the code under Use this code for custom placement or page builders (Optional) in Settings. It is an empty div with the id xb-mix-and-match-root.

Make the widget shorter

On the Appearance step, lower Item space and Space percentage under Design, and lower the sizes under Text size. To remove the note line, click the eye icon next to Note in Settings > Customization.

Change the font

The widget uses your theme's font. To use another font, add a font-family rule in Custom CSS on the Appearance step. See How to change the font of a bundle offer.