FigmaShopifySupportBrowse themes
Become an AffiliateSign in

Premium Figma UI kits and Shopify themes — polished, documented, and ready to launch for modern commerce.

Browse themesBecome an affiliate

Built for designers, developers, and store owners worldwide.

Figma UI Kits

OpticsMedicalWosaCourse WhizElectronixE-Commerce bundle

Shopify Themes

OpticsMedicalWosaCourse WhizElectronix

Resources

All themesAll-access passCollectionsBlogBecome an affiliate

Support

DocumentationCreate support ticketSell on Polo Themes

Compare Shopify with

MagentoBigCommerceEtsyWooCommerceSquarespaceWix

Migrate to Shopify from

MagentoBigCommerceEtsyWooCommerceWix

© 2026 Polo Themes. All rights reserved.

FigmaShopifySupportBrowse themes
Become an AffiliateSign in
All articles

Guides · August 23, 2026 · 8 min read

How to Set Up Upsells & Cross-Sells

Set up useful Shopify upsells and cross-sells with complementary products, clear offer rules, reliable product data, and guarded measurement.

By Polo Themes

Shopify merchandising map connecting a selected coffee brewer to a better-fit model, filters, beans, and replacement accessories at distinct journey stages

Set up Shopify upsells and cross-sells by matching a real customer need to an accurate, purchasable offer at the right stage. An upsell helps a shopper consider a more suitable or higher-value version of the item under evaluation. A cross-sell introduces a genuinely complementary item. Neither requires pressure, invented savings, or a wall of unrelated recommendations.

Shopify distinguishes related products, which are possible substitutes, from complementary products, which pair with the current item. Search & Discovery can configure both intents for compatible themes. Treat those platform labels as the starting model: a substitute may support an upsell comparison, while a complementary item supports a cross-sell. The merchandising decision still belongs to the merchant.

Define the offer before choosing a placement

Write one sentence for the customer problem each recommendation solves. A larger memory tier serves a known capacity need; a protective case reduces damage risk; replacement filters keep an appliance usable. If the sentence is merely that the second product costs more, the proposal is not ready. Relevance should be reviewable without relying on a persuasive heading.

Separate substitutes, complements, bundles, and service additions in the plan. Substitutes compete with the current choice and should make differences easy to compare. Complements preserve the original item and add another line. A bundle may have its own inventory, discount, fulfillment, and return rules. A warranty or subscription changes commitment and needs its terms presented beside the action.

Choose the moment from the decision. Product-page complements work when compatibility can be understood before adding. Cart offers work when the order context matters and editing remains easy. Post-purchase offers require platform and payment support and must never make the completed order ambiguous. Avoid presenting the same proposition at every step simply because an app permits it.

Build a small recommendation matrix

Start with a bounded catalog sample rather than enabling recommendations everywhere. Include a bestseller, a product with several variants, a low-stock item, an item with required accessories, a gift card, a zero-price item if one exists, and a product frequently returned for compatibility. Record the source item, recommendation intent, reason, eligible variants, inventory dependency, market, owner, and review date.

Shopify documents eligibility conditions for recommendations. Products generally need to be active, published to the Online Store, priced above zero, and eligible by inventory and product type; complementary items require stock above zero. The current item and an item already in the visitor’s cart are also excluded in relevant contexts. Design a useful empty state because merchandising data can legitimately produce no result.

Check variant-level fit even when configuration happens at product level. A camera body may accept one battery family but not another. A shoe-care item may not suit every material. A replacement part may vary by model year. When compatibility cannot be communicated truthfully in the card or selection flow, link to an explanation or avoid quick add.

Configure recommendations with Search & Discovery

Install or open Shopify Search & Discovery, choose Product recommendations, select a source product, and assign complementary or related products. Shopify currently allows manual complementary choices and lets merchants combine or prioritize manual related choices with automatically generated related recommendations. Preview the resulting set, save it, and repeat for the highest-value product families first.

Use complementary products for add-ons that keep the original choice intact. Search & Discovery supports up to ten selections, but the interface should show only enough to make the relationship understandable. Shopify’s theme guidance recommends a small default set rather than exposing the full allowance at once. More cards do not create more relevance.

Use related products for alternatives. Shopify can generate these from available catalog and activity signals, while manual recommendations can be added or used on their own. Review automatic results on unusual products and new catalog entries. A generated relationship is a candidate, not a merchant guarantee that materials, dimensions, performance, or regulated uses are equivalent.

For a larger catalog, Shopify exposes standard metafields that Search & Discovery synchronizes for recommendation configuration. Bulk editing can accelerate a reviewed mapping, but it should not turn a spreadsheet guess into storefront truth. Establish naming, ownership, import checks, and a rollback export. Re-sample live products after every bulk operation.

Add the recommendation block to the product template

Open the theme editor on the applicable product template. If the theme supports complementary products, add that block within product information and configure its heading, product count, pagination, image ratio, and quick-add behavior. Assign the template to a small test collection before wider use. Theme support and available settings vary, so confirm the actual preview rather than following a screenshot from another theme.

Label the relationship plainly with language such as “Pair it with” or “Compatible accessories.” Include recognizable imagery, title, current price, relevant availability, and any essential qualifier. Do not disguise a paid item as included, label ordinary pricing as a saving, or imply a package price when each product is added separately.

Quick add is appropriate only when the shopper can choose the correct item without missing required information. If a complement has variants, Shopify-compatible theme behavior may open a choice interface rather than adding an arbitrary default. Verify option selection, selling plans, quantity rules, inventory rejection, cart feedback, focus return, and error recovery on the theme actually deployed.

Use a custom theme implementation carefully

When a theme lacks the needed surface, a developer can use Shopify’s product recommendations capabilities and reference implementation. The response depends on recommendation intent and can be rendered through a section request. Preserve the localized storefront path, request only a modest limit, show nothing when no eligible products return, and avoid shifting the page as delayed content arrives.

Recommendations loaded after the initial document need resilient JavaScript. Reserve appropriate space only when the design warrants it, abort obsolete requests during rapid navigation, and keep failures quiet without leaving a skeleton forever. Recommendation cards must reuse the store’s authoritative money, image, badge, availability, localization, and product-link components instead of creating a second merchandising truth.

Shopify specifies a recommendation-aware product URL format for attribution. Preserve that platform contract if building custom cards so Shopify’s recommendation reporting can associate interactions correctly. Also keep internal analytics names distinct from Shopify’s reports. A click, an attributed purchase, total order value, margin, return, and customer complaint answer different questions.

Design a cart cross-sell without holding the cart hostage

A cart recommendation should respond to the current lines and disappear when its reason disappears. If a shopper removes the coffee machine, its filters should not remain framed as required. Recalculate after quantity, variant, market, delivery, or selling-plan changes. Keep checkout prominent and allow the customer to ignore the offer without dismissing repeated overlays.

Show whether an add-on affects shipping, subscription cadence, discount eligibility, or fulfillment. Adding a frozen item, personalized item, or backordered accessory can materially change the order. Let the customer review the resulting cart before checkout. Do not silently preselect products, insurance, donations, or recurring plans.

Test a concrete merchandising scenario

Consider a coffee-equipment store. On a grinder page, a more capable model appears under a comparison heading with capacity, adjustment, and price differences drawn from maintained product data. Filters and cleaning tablets appear separately as complements. The shopper can inspect compatibility, select quantity, add one item, and see an explicit cart update without losing the grinder configuration.

Now remove the filter from inventory, switch to a market where the cleaning product is unavailable, add the grinder to the cart before revisiting, and block the recommendation request. The layout should remain complete, excluded products should not leak through, and the original purchase path should work. Then choose an incompatible grinder variant and confirm the merchant mapping cannot mislead the customer.

Measure value with guardrails

Establish a baseline for the selected products and placement. Track recommendation impressions where reliably observable, product exploration, accepted additions, removals, checkout progression, completed orders, order value, margin, refunds, returns, support contacts, performance, and errors. Do not promise an average order value increase before the store has controlled evidence.

Compare a defined cohort and period, account for promotions and catalog changes, and segment by device, market, source product, and recommendation intent. An offer can raise gross order value while reducing margin or increasing accessory returns. Guard against novelty effects and tiny samples. Record both the decision and the losing configuration so it is not restored during a later redesign.

Upsell and cross-sell launch checklist

  • Every recommendation has a named customer need, intent, owner, and review date.
  • Product, variant, compatibility, inventory, market, price, and subscription rules are accurate.
  • Search & Discovery configuration and the assigned product template agree.
  • Labels distinguish substitutes, complements, included items, bundles, discounts, and recurring commitments.
  • Quick add covers options, busy state, rejection, duplicate action, cart feedback, and keyboard use.
  • Empty, unavailable, already-in-cart, slow-response, and failed-response states preserve the original journey.
  • Measurement includes revenue guardrails, operational outcomes, performance, and customer harm signals.

Common failure: recommendation drift

Catalogs change after launch. A renamed bundle, replaced model, altered ingredient, new market restriction, or discontinued connector can make yesterday’s pairing wrong. Assign a recurring review to the merchandising owner and trigger a check when key product data changes. Automatically generated related items also change, so sample them instead of assuming a saved storefront arrangement is permanent.

Conclusion

A sound Shopify upsell or cross-sell is useful merchandising with a verifiable implementation. Define the need and intent, configure a small eligible set, place it where the decision belongs, preserve product and cart truth, and test adverse catalog states. Measure incremental value beside returns, margin, errors, and customer understanding. Keep only propositions that make the order better for the customer as well as the store.

Frequently asked questions

What is the difference between an upsell and a cross-sell?

An upsell asks the shopper to consider a more suitable or higher-value alternative. A cross-sell adds a complementary product while preserving the original choice. Label and measure them separately because they change the journey in different ways.

Does Shopify generate complementary products automatically?

Shopify currently auto-generates related recommendations, while complementary recommendations are manually configured. Search & Discovery can manage both for supported themes.

How many complementary products should a page show?

Use the smallest set that explains useful pairings. Shopify’s developer guidance suggests showing two or three by default even though the platform can serve more. Test the actual product family and viewport.

Sources and further reading

  • Shopify Help Center: Customize product recommendations with Search & Discovery
  • Shopify Dev: Product recommendations
  • Shopify Dev: Show complementary products on product pages
  • Shopify Help Center: Search & Discovery reports and analytics

More from the blog

Store launch workspace with offer, catalog, fulfillment, and testing stages

Guides · August 23, 2026

How to Start a Shopify Store: Step-by-Step (2026)

Launch a Shopify store in dependency order: validate the offer, prove fulfillment, configure commerce, test complete orders, and assign operations.

Read article
Beginner store setup checklist from product entry through test order

Guides · August 23, 2026

How to Set Up a Shopify Store (Beginner's Walkthrough)

Set up one complete Shopify product and buying path before expanding collections, navigation, payments, shipping, domains, policies, and apps.

Read article
Beginner guide to products, themes, orders, and fulfillment

Guides · August 23, 2026

Shopify for Beginners: Complete Guide

Learn how Shopify connects products, themes, payments, orders, fulfillment, customers, and apps while keeping business decisions explicit.

Read article

Premium Figma UI kits and Shopify themes — polished, documented, and ready to launch for modern commerce.

Browse themesBecome an affiliate

Built for designers, developers, and store owners worldwide.

Figma UI Kits

OpticsMedicalWosaCourse WhizElectronixE-Commerce bundle

Shopify Themes

OpticsMedicalWosaCourse WhizElectronix

Resources

All themesAll-access passCollectionsBlogBecome an affiliate

Support

DocumentationCreate support ticketSell on Polo Themes

Compare Shopify with

MagentoBigCommerceEtsyWooCommerceSquarespaceWix

Migrate to Shopify from

MagentoBigCommerceEtsyWooCommerceWix

© 2026 Polo Themes. All rights reserved.