Shopping Experience

Cross-Selling (FBT)

Boost Average Order Value (AOV) natively. Sellzar’s Frequently Bought Together (FBT) section enables merchants to create product bundles that customers can add to their cart in a single click.

Frequently Bought Together (FBT) Bundle Preview
Frequently Bought Together (FBT) Bundle Preview

Overview

The Frequently Bought Together section provides a visual bundle interface, displaying the active product connected by plus symbols (+) to complementary recommended items. Rather than relying on bloated third-party apps, Sellzar handles this natively using Shopify metafields and optimized AJAX cart APIs.

Recommendation Logic & Fallbacks

The FBT section determines which recommended products to show based on a strict priority ladder:

Priority 1: Custom Metafield (Recommended)

Reads the product metafield key product.metafields.custom.fbt_products (list of products). This allows you to customize the exact cross-sell pairings per product.

Priority 2: Fallback Collection

If the metafield is empty, the section checks the Fallback Collection configuration in the section settings.

Priority 3: Automatic Association

If both options are blank, the system automatically draws products from the first collection associated with the active product.

Frontend Interactions

Checkbox Bundling Controls

The primary product is checked and disabled (cannot be unchecked). Recommended items can be toggled by the shopper. Unchecking a product dims its card opacity and subtracts its price from the subtotal.

Live Variant Selection & Pricing Sync

Each card features a variant selection dropdown (if variants exist). Selecting a variant automatically updates the card image, price layout, and recalculates the bundle subtotal immediately.

The Bundle Summary Panel

Displays the compiled summary of the selections, providing clear pricing metrics:

  • Total items count: Dynamically increments based on active checkboxes.
  • Product Subtotal: Shows the active sum total. Supports compare-at pricing metrics to display exact savings values (e.g. "You save $12.00").
  • Batch Add To Cart: Compiles all checked items into a JSON array and fires a single POST fetch request to Shopify's AJAX endpoint, instantly opening the Cart Drawer.
  • Remove All: Unchecks all recommended checkboxes with a single click.
Setting up FBT Metafields
To configure individual product bundles: 1. Go to Shopify Admin > Settings > Custom Data > Metafields > Products. 2. Click Add Definition. Name it FBT Products, set the Namespace and key to custom.fbt_products, and select type as Product Reference (List of Products). 3. Under each product page in the admin, select the specific bundle items in the metafield field at the bottom.