Xboost

How to create an AI Frequently Bought Together offer

Overview

An AI Frequently Bought Together offer shows products that go well with the product the shopper is viewing, with a discount when they buy them together. You can let the app pick the products from Shopify product recommendations, or pick them yourself. Shoppers tick the products they want and add them all to the cart with one button.

By default the widget shows on the product page, below the product form or the product section, depending on the template layout.

Before you start

Steps

1. Choose AI Frequently Bought Together and a template

  1. In Xboost Bundle, open Offers and click Create offer.
  2. On the AI Frequently Bought Together 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 AI Frequently Bought Together 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 offer products and discount (Offer)

Offer step with Offer products, Recommendation source, Number of shown offer products, Enable discount and Behavior after add to cart

  1. Under Offer products, choose how the app picks the products shown with the trigger product:

    • 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. Keep Enable discount ticked and pick the Discount type:

    • Default price: no discount.
    • Bundle discount: a discount on the bundle items. Set Unit (% or $) and Amount.
    • Fixed price: the bundle sells at a fixed price.
    • Discount by items order: a separate discount for each item, by its position in the bundle.

  3. Set Minimum number of products required to apply the discount. The discount applies only when the shopper buys at least this many products from the bundle.

  4. Under Behavior after add to cart, choose Open Xboost cart if possible, Go to cart page, Go to check out or Refresh page.

    If your theme's cart drawer does not open or does not show the new items, see Why doesn't the bundle offer work with my theme's cart drawer?

To learn how the automatic sources work, see Unleashing the Power of AI. For the discount types, see Fixed Bundle discount types.

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. See Integrations.
  • Settings > Customization holds the widget text: Title, Subtitle, This item label, Total price label, Discount note, Discount message (use {{discount}} for the discount), Saved money message (use {{money}} for the amount saved) and Add to cart label.
  • 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 Combined Option in a dropdown.
  • 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 FBT 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-bundle-root.

Make the widget shorter

On the Appearance step, set Photo size to Small, lower Space percentage under Design, and lower the sizes under Text size. On the Offer step, lower Number of shown offer products.

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.