Cross-sell and Product add-on offers
How Cross-sell and Product add-on offers differ from Frequently bought together: what shoppers see, where they appear and how to create them.
Cross-sell and Product add-on offers are built in the same editor as Frequently bought together, under Product Page Upsell. They show on product pages only. They differ in what shoppers do and in a few settings.
Product add-on offers are not the same as the cart drawer's Add Ons module. For extras inside the cart, see Add-ons (shipping protection and product add-ons).
How the three types differ
| Cross-sell | Product add-on | Frequently bought together | |
|---|---|---|---|
| Editor description | Suggest other products alongside the one being viewed. | Offer optional extras shoppers tick to add with the main product. | Let shoppers buy the viewed product and its companions together in one click. |
| What shoppers do | Click Add on a product to add just that one | Tick add-ons, then click your theme's own Add to cart | Keep products ticked and click the offer's button |
| Checkboxes | None | Yes, none ticked at first | Yes, all ticked at first |
| Button of its own | An Add button on every product | None | One button for the bundle |
| Button text field | Yes, default Add | Not shown | Yes, default Claim Offer • {discount_price} {original_price} |
| Layouts | Carousel or Stacked | Carousel or Stacked | Stacked or Horizontal |
| Default spot | Below the theme's Add to cart button | Above the theme's Add to cart button | Below the theme's Add to cart button |
| Theme app block | Oxify: Cross-sell | Oxify: Product Add-ons | Oxify: Bought Together |
| Minimum products required for discount | Not shown | Not shown | Shown |
The product being viewed never appears in a Cross-sell or Product add-on list, even if you picked it under Offer. A Frequently bought together offer always starts with it.
What shoppers see
Cross-sell. A list of products, each with an image, title, price and an Add button. Products with more than one variant have a variant dropdown, and sold-out variants are marked "Out of Stock" and can't be chosen. Add puts one of that product in the cart and opens the Oxify cart drawer (if it's turned on).
Product add-on. The same rows with a checkbox and no button. When the shopper clicks the theme's Add to cart, Oxify adds the main product (with the quantity and variant chosen in the product form) together with the ticked add-ons, one of each. If no add-on is ticked, the click works as normal.
Create a Cross-sell offer
In the Oxify app menu, open Product Page Upsell and click Create upsell.
On Settings, Cross-sell is already selected under Offer type. Set the Internal name, Title (default "You may also like") and Button text (default "Add"), then click Continue to Offer.
On Offer, choose the Trigger, then under Offer pick Specific products (drag to reorder) or Frequently bought together for Shopify's Related products or Complementary products. That option is the recommendation source, not the offer type. Optionally set Discounts, then click Continue to Design.
On Design, pick Carousel or Stacked under Layout, then click Continue to Placement.
Check the Status menu and click Save.
Create a Product add-on offer
Follow the same steps with these differences:
On Settings, choose Product add-on under Offer type. There is no Button text field, only Title.
On Offer, pick the extras under Offer. Use Specific products for items you choose yourself.
On Design, the Checkbox card sets the checkbox colors. Product add-ons have no button, so the button settings in Button & Arrow have no visible effect. Arrow icon color still applies to the Carousel arrows.
Layout counts
- Stacked lists products in one column. Maximum products to display caps the list (default 3).
- Carousel pages through the products with arrows. The number field is then labelled Stacked products count and sets how many products show on each page (default 3). Arrows appear only when there are more products than that.
If you switch the offer type, the layout may change by itself, because Horizontal is for Frequently bought together only and Carousel is not.
Discounts
The Discounts options (No Discount, Percentage Off, Amount Off, Apply discount type) work as in FBT discount setup, with these differences:
- The discount applies to the products added through the offer: the product added with Add on a Cross-sell, or the ticked add-ons on a Product add-on. The main product is not discounted.
- There is no minimum number of products.
- Each row shows the reduced price with the original struck through.
Button text
Cross-sell Button text is plain text. The price variables in the picker are filled in from ticked products, and Cross-sell has no checkboxes, so keep it simple, for example Add. Variables are for Frequently bought together.
Place the offer
Both offers sit near your theme's Add to cart button by default, as in the table above. To choose the spot, use the Placement tab of the offer. It shows a snippet for the offer type with a Copy button:
- Cross-sell:
<div id="oxify-fbt-cross-sell-block"></div> - Product add-on:
<div id="oxify-fbt-addon-block"></div>
Or add the app block (Oxify: Cross-sell or Oxify: Product Add-ons) to a product template in the theme editor. Details and the rule for which offer wins are in FBT placement rules. The Placement tab text says "below" for every type, but Product add-on offers sit above the button.
What each needs
- The Oxify: Product Upsell app embed is on in your theme.
- The offer is Active, its trigger matches the page, and it has something to show. A Specific products offer with no products doesn't render, and nothing stops you saving it that way.
- Product add-on: Oxify reads the variant and quantity from the product form around your theme's Add to cart button.
- Optional, for add-ons only: Settings → Product Add-on Settings → Update theme product price for add-ons makes the page price rise as add-ons are ticked. It needs a theme change, see Add-on price updater theme setup.
To switch, duplicate or delete these offers, see Manage product page offers.