Shopify Cross Sell: How to Add It Without Slowing Your Store

F
Faisal Hourani
| 11 min read min read
Shopify Cross Sell: How to Add It Without Slowing Your Store — LiquidBoost Blog

Cross-selling is one of the highest-ROI moves in ecommerce.

The logic is simple: a customer already decided to buy from you. Getting them to add one more item costs a fraction of what it took to acquire them. Yet most Shopify stores either skip cross-sell entirely, or bolt on a third-party app that injects JavaScript, slows the page, and charges a monthly fee for the privilege.

This guide covers how Shopify cross sell actually works, where to place it, and how to implement it using native Liquid code — so you capture the revenue lift without the app overhead.

Hero: A Shopify product page showing a 'Frequently Bought Together' section below the main product, with two complementary items and a combined add-to-cart button

What Is Shopify Cross Sell and How Much Does It Lift AOV?

Shopify cross sell is a product recommendation strategy where you suggest complementary items alongside a product a customer is already viewing or purchasing. According to McKinsey & Company, cross-selling and upselling together account for 10-30% of ecommerce revenues when implemented with relevant recommendations and proper placement.

Amazon popularized the "Frequently Bought Together" pattern in the early 2000s. It works because it removes a decision the customer was going to make anyway — what else do I need with this? — and makes the answer obvious.

On Shopify, cross-sell shows up in several forms: a "Customers also bought" section on the product page, a "Complete the look" block in the cart drawer, or a "You might also need" widget at checkout. The placement and phrasing shift depending on the intent, but the mechanic is the same: suggest one or two items that make the primary purchase more useful or complete.

The AOV lift depends heavily on relevance. Irrelevant recommendations are ignored. When the recommendation is obviously complementary — a phone case suggested alongside a phone, or a matching belt with dress shoes — add-to-cart rates on the cross-sell item typically range from 5-15% of the sessions that see it, based on patterns we observe across the Shopify stores using LiquidBoost snippets.

Where Do Cross Sell Offers Convert Best on a Shopify Store?

The three highest-converting placements for Shopify cross sell are the product page (below the main product details or after add-to-cart), the cart page or cart drawer (before the checkout button), and the post-purchase page (after the first transaction is complete). Product page placement reaches the most visitors; cart placement catches the highest-intent buyers.

Each placement has a different psychological context.

On the product page, the customer is still in research mode. They are evaluating whether to buy the primary item, so a cross-sell recommendation here should be low-friction — something that pairs naturally without demanding extra thought. "Complete the set" or "Frequently bought together" framing works well.

On the cart page or cart drawer, the customer has committed to buying. They are mentally in checkout mode. Cross-sell here should be concise: one or two items, clear value, quick add. The "People who bought this also got..." pattern converts well here because social proof reduces the perceived risk of adding something new.

On the post-purchase page, you have a buyer who just handed over their credit card. They are in the highest-trust state they will ever be with your store. This is the best moment to offer something complementary at a slight discount — conversion rates on post-purchase cross-sell offers typically run 3-8% in the stores we work with, which is significant given zero additional acquisition cost.

Diagram showing three cross-sell placement zones on a Shopify store: product page, cart drawer, and post-purchase page, with conversion rate ranges labeled for each

How Do You Add a 'Frequently Bought Together' Section With Liquid?

Adding a 'Frequently Bought Together' cross-sell section in Shopify with native Liquid requires creating a snippet file that reads product metafields or a hardcoded product array, then including that snippet in your product template. Unlike app-based solutions, this adds zero external scripts and zero page weight — the recommendation renders server-side with the page load.

Here is the basic implementation path for a theme using Online Store 2.0 (Dawn, Craft, Sense, or similar):

Step 1: Tag your products.

The simplest approach to defining which products belong together is Shopify product tags. For a phone case that goes with the iPhone 16 Pro, add a tag like pairs-with::iphone-16-pro. Your Liquid snippet will query products with that tag to build the recommendation grid.

Step 2: Create the snippet file.

In your theme's snippets/ folder, create cross-sell.liquid. This snippet loops through the tagged products and renders each as a card with an add-to-cart button. The Liquid code reads the current product's tags, finds the matching handle, and outputs the related product data — all server-side, no JavaScript required for the initial render.

Step 3: Include the snippet in your product template.

In your sections/main-product.liquid (or equivalent), call {% render 'cross-sell', product: product %} after the main product form block. The section renders inline with the rest of the page.

Step 4: Add the Liquid to handle cart updates.

When a customer clicks "Add all to cart," you need a small JavaScript handler to POST both the primary and cross-sell items to the cart. This is the only JavaScript the implementation needs — and it's a handful of lines, not a third-party script.

The result: a cross-sell section that loads with the page, passes Core Web Vitals checks, and costs nothing beyond the one-time development investment.

If you want a production-ready version rather than building from scratch, the LiquidBoost marketplace has a cross-sell snippet that includes edge case handling for out-of-stock items, responsive layout, and theme compatibility checks across Dawn, Craft, Ride, and Sense.

Screenshot of a Shopify product page with the LiquidBoost cross-sell snippet installed, showing two complementary product cards with individual and combined add-to-cart options

What Products Should You Cross Sell?

The most effective Shopify cross-sell recommendations are functionally complementary (the recommended item is needed to use the primary product correctly), part of the same collection or aesthetic, or frequently purchased together in historical order data. Price is a secondary filter: in our experience across LiquidBoost client stores, cross-sell items priced above roughly 40-50% of the primary product's price tend to see meaningfully lower add-to-cart rates, likely because the incremental spend starts to feel like a second major purchase decision.

There are three product selection approaches, ranked by effectiveness:

Historical order data (best). Pull your Shopify orders export and find which products appear together in the same order most frequently. These are your highest-confidence pairings — real customers revealed this behavior. The problem is that you need enough order volume for the data to be meaningful — in our experience, fewer than a few hundred orders per product makes co-purchase patterns too noisy to trust.

Functional complementarity (second best). Some pairings are obvious regardless of historical data: a yoga mat goes with yoga blocks, a camera body goes with a lens cleaning kit, a skincare serum goes with the brand's moisturizer. These pairings are defensible even before you have data, and they make intuitive sense to the customer.

Collection-based similarity (starter option). Group items from the same collection as cross-sell candidates. Less targeted than the above, but easy to implement and more relevant than random recommendations.

What to avoid: recommending products that are more expensive than the primary item (that is an upsell, not a cross-sell, and the framing matters), recommending too many items (one or two is optimal — more than three drops attention), and recommending items you are overstocked on for operational reasons. Customers sense when recommendations are inventory-driven rather than genuine.

Are you recommending the wrong products as cross-sells? Browse the LiquidBoost marketplace to see how leading Shopify stores implement cross-sell, upsell, and bundle recommendations — without installing a single app.

How Does Liquid Cross Sell Compare to a Shopify App?

Native Liquid cross sell and app-based cross sell produce similar recommendation results, but differ significantly on page performance, ongoing cost, and customization control. Liquid snippets render server-side with zero external script overhead; apps inject JavaScript bundles that add 100-400ms to Time to Interactive on most themes, according to Google's Web Vitals documentation on third-party impact.

Here is a direct comparison:

Factor Liquid Snippet Shopify App
Page load impact None — server-side render 100-400ms added (external JS)
Cost One-time (snippet purchase or build) Monthly fee, typically $15-$49/month
Customization Full control — it is your code Limited to app's settings panel
Shopify theme compatibility You control it Varies; conflicts are common
Recommendation logic Tag-based, metafield-based, or custom Usually app-managed (limited override)
Support when Shopify updates You maintain it App developer maintains it
Data privacy No third-party data access App sees your product and order data

The honest caveat: apps are easier to install if you have zero Liquid experience and zero developer access. If your store has 50+ products and you cannot touch the code, an app is a reasonable starting point.

But if you care about page speed — and you should, because Baymard Institute research links every additional second of load time to meaningfully lower conversion rates — the Liquid approach is meaningfully better.

For stores already working toward a good Lighthouse score, adding an upsell app is often the single change that drops a 90+ score into the 70s. Native Liquid does not touch the score.

Side-by-side page speed comparison: a Shopify product page without a cross-sell app (score 94) versus the same page with a popular cross-sell app installed (score 71), showing the Lighthouse score drop

What Common Cross Sell Mistakes Hurt Shopify Conversions?

The five most common Shopify cross sell mistakes are: placing recommendations too early in the page flow (before the customer has committed to the primary item), recommending too many products at once, using generic "You may also like" phrasing instead of specific relationship labels, setting cross-sell prices too close to the primary item's price, and neglecting mobile layout where cross-sell carousels often break or overlap.

Mistake 1: Too many recommendations. Three or more cross-sell items create a paradox of choice. One or two items with clear relevance outperform carousels of six or eight. If you want to show a wider selection, use a swipeable row capped at two visible items.

Mistake 2: Generic phrasing. "You may also like" is invisible. Customers have trained their eyes to skip it. Replace it with specific relationship language: "Customers who bought this also bought," "Works with this product," or "Complete the kit." The specificity signals relevance before they read the product name.

Mistake 3: Skipping the mobile layout. Cross-sell sections often break on mobile. Two product cards stacked vertically work fine on desktop but become a long scroll on a 390px screen. Test your cross-sell section on an actual iPhone, not just a browser resize.

Mistake 4: Showing out-of-stock items. A cross-sell recommendation for a product the customer cannot actually buy destroys the experience. Your Liquid snippet should check product.available before rendering any recommendation.

Mistake 5: Not testing placement. Most stores install cross-sell on the product page and call it done. Running the same recommendation on the cart page typically produces a higher conversion rate because the buyer's intent is stronger there. Test both and measure which drives more actual additional revenue per session, not just which gets more clicks.

For a broader look at fixing conversion issues across your full store funnel, see our guide to Shopify conversion optimization.

Frequently Asked Questions

What is cross sell on Shopify?

Shopify cross sell is a strategy where you recommend complementary products alongside what a customer is already viewing or purchasing. For example, suggesting a phone case to someone buying a phone, or lens cleaning solution to someone buying a camera lens. Cross-sell focuses on items that work with the primary purchase, as opposed to upsell, which pushes a more expensive version of the same item.

How do I add cross sell to Shopify without an app?

To add cross sell to Shopify without an app, create a cross-sell.liquid snippet in your theme's snippets/ folder that reads product tags or metafields to identify paired products, then render the snippet in your product template. The implementation requires basic Liquid familiarity. For a production-ready version with theme compatibility and edge case handling built in, the LiquidBoost marketplace has a drop-in cross-sell snippet.

Does cross selling increase Shopify revenue?

Cross-selling increases revenue when recommendations are relevant and placement is correct. McKinsey estimates cross-selling and upselling together drive 10-30% of ecommerce revenues for merchants who implement them well. The key variable is relevance — generic recommendations that do not match the customer's current intent are ignored, while clearly complementary suggestions see add-to-cart rates in the 5-15% range.

What is the difference between cross sell and upsell on Shopify?

Cross sell recommends a different, complementary product alongside the main purchase — a charging cable with a phone, or socks with shoes. Upsell recommends a better or more expensive version of the same item — a 256GB model instead of 128GB, or a premium subscription instead of standard. Both increase AOV, but through different mechanisms. For a detailed comparison of upsell apps, see our Shopify upsell app comparison.

Where should cross sell appear on a Shopify product page?

Cross sell placement that converts best sits immediately below the product description and above the reviews section, or in the cart drawer just before the checkout button. Cart placement tends to convert at a higher rate because the buyer's intent is stronger — they have already committed to purchasing, so adding one more relevant item is a smaller decision. Test both placements; the winning position varies by product category and average order value.

Keep Reading

Share
Boost Your Shopify Store

Ready to Implement What You've Learned?

Boost your Shopify store's performance with our ready-to-use code snippets. No coding required — just copy, paste, and watch your conversion rates improve.

Explore Snippets
Instant Implementation
No Coding Required
Conversion Optimized
24/7 Support

Related Articles

Stay Up-to-Date with Shopify Insights

Subscribe to our newsletter for the latest trends, tips, and strategies to boost your Shopify store performance.