Xboost

How to create a Product Add-Ons offer

Overview

A Product Add-Ons offer lists extra products under a heading such as "Select addons". The shopper ticks the add-ons they want and adds them with the main product. You can give the add-ons a discount or offer them as a free gift.

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

Product Add-Ons is listed only in stores that installed XB: Bundles Quantity Breaks before this feature moved to a separate app. If you do not see it on Select offer type, use XB: AI Product Upsell & Addons. See How to create a Product Add-ons offer.

Before you start

Steps

1. Choose Product Add-Ons and a template

  1. In Xboost Bundle, open Offers and click Create offer.
  2. On the Product Add-Ons card, click Create an offer.
  3. Optional: pick a Color theme at the top right.
  4. Click Select and customize on a template.

Select template page with the Product Add-Ons templates

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 that show the offer (Trigger)

Under Trigger offer for, choose where the offer shows:

  • Specific product: only on the products you select.
  • Automated: on products in the collections you select.
  • All products: on every product.

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

Trigger step with Trigger offer for set to All products and the live preview

3. Choose the add-ons and discount (Offer)

Offer step with Offer products, Auto select offer products and Enable discount

  1. Under Offer products, choose how the app picks the add-ons:
    • Manual: you pick the products.
    • Automatic: the app picks them. Choose a Recommendation source (Related items, Frequently bought together, AI-powered related items or AI-powered frequently bought together) and the Number of shown offer products (up to 4).
  2. Optional: tick Auto select offer products to tick the add-ons for the shopper in advance.
  3. Keep Enable discount ticked and pick the Discount type:
    • Default price: no discount.
    • Fixed discount or Percentage: a discount on the add-ons. Set Unit and Amount.
    • Free gift: the add-ons are free.

For more about the discount types, see Product Add-ons discount type.

4. Optional: Integrations and Settings

  • Integrations shows the offer in the cart drawer of XB: AI Cart Upsell Cart Drawer, and adds a trust badge, countdown timer or estimated delivery from other XBoost apps at Top, Bottom, Below offer title or Below offer subtitle. See Integrations.
  • Settings > Customization: Title, Subtitle (use {{discount}} for the discount) and Discount message.
  • Pricing setting > Price rounding rounds the discounted price up to the price ending you choose, such as .99.

Click Next.

5. Adjust the look (Appearance)

Appearance step with Content, Design and Colors settings

  • Content: Show compare price and Show quantity selection.
  • Design: Photo size (Large, Medium or Small), Space percentage and Radius corner.
  • 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 Product Add-ons 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-product-add-ons-root.

Make the widget shorter

  • On the Appearance step, set Photo size to Small, lower Space percentage, and lower the sizes under Text size.
  • On the Offer step, lower Number of shown offer products.
  • Use Custom CSS to change the padding. New Product Add-Ons offers start with this example:
.xb_checkbox_upsell {padding: 4px;}
.xb_checkbox_upsell_products_item {padding: 4px;}

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.