Docs/Summer Upsell/Cross-sell

Product page widgets

Cross-sell

PDP

The Cross-sell widget renders complementary product recommendations on product detail pages — typically below the buy button or product description. It's the highest-traffic surface in your store, and the right cross-sell here lifts AOV without disrupting the buying flow.

Three layouts ship out of the box. Pick the one that matches your product page density, mobile traffic share, and how many upsell SKUs you want visible at once.

Layouts

Cross-sell Grid: two-column recommendation cards below the product description

Grid

Default

Two-column card grid below the product description. Each card shows image, title, price, variant selector, and an Add to Cart button.

  • Shows 4+ products at a glance — great when you have many viable cross-sells.
  • Variant selector + Add to Cart on every card, so customers don't have to leave the PDP.
  • Customizable colors, fonts, card backgrounds, image fit, and border radius.
  • Falls back to a single column on narrow viewports.

Expected AOV impact: 3–8% AOV lift on stores with rich catalogs. Works best when you have at least 4 strong cross-sell SKUs per trigger product — the visual density rewards browsing.

Best for: High-SKU catalogs (apparel, beauty, home goods) where customers expect to compare options before committing.

Cross-sell Stack: full-width rows, one product per row

Stack

Mobile-first

Full-width horizontal cards stacked vertically — one product per row with image, title, price, and a clear Add button on the right.

  • Roomy layout that surfaces product details (subtitle, vendor, price + compare price).
  • Easy to scan on mobile — no cramped grid, no horizontal scroll.
  • Variant dropdown per row.
  • Optional automatic discount applied per product, with strikethrough pricing.

Expected AOV impact: 5–10% AOV lift on mobile-heavy stores. The roomier rows boost click-through versus the cramped grid layout when screens are narrow.

Best for: Stores where 70%+ of traffic is mobile, or single-product brands where each cross-sell deserves a full row of attention.

Cross-sell Carousel: one product per slide with prev/next arrows

Carousel

Compact

One product per slide with prev/next arrows and dot indicators. The most space-efficient layout — perfect when product page real estate is tight.

  • Saves vertical scroll on dense product pages.
  • Highlights one product at a time — no decision fatigue.
  • Mobile-first swipe-friendly layout.
  • Compatible with all three upsell sources (Manual, Basic AI, Summer AI).

Expected AOV impact: 2–6% AOV lift with the lowest scroll-depth penalty. Slightly lower lift than Grid/Stack because only one option is visible — but ideal for testing one hero offer at a time.

Best for: Product pages already long with reviews, FAQs, and rich descriptions — or when you want to A/B test a single cross-sell SKU.

How to create a Cross-sell campaign

A

In the Summer Upsell admin

  1. 1 In the Summer Upsell admin, click + New campaign.
  2. 2 On the Product Page tab, pick one of: Cross-sell — Grid, Cross-sell — Stack, or Cross-sell — Carousel.
  3. 3 Give the campaign an internal Offer name on the Offer tab.
  4. 4 Set the Trigger — start broad with All Products if you're unsure.
  5. 5 Pick the Upsell Source — Manual for hand-curated picks, Basic AI for free related/complementary, Summer AI for ChatGPT-powered.
  6. 6 Optional: enable a discount and set type / value / when-to-apply.
  7. 7 Open the Design tab — pick a color preset, set the Widget Title (e.g. You may also like) and Button Text.
  8. 8 Optional: add translations on the Languages tab.
  9. 9 Click Save.
B

In the Shopify theme editor

  1. 1 Open Online Store → Themes → Customize.
  2. 2 Switch to the Products → Default product template.
  3. 3 Click Add block in the position you want the cross-sell to appear (typically below the product description).
  4. 4 Pick ✨ Summer: Cross-sell from the Apps section of the block picker.
  5. 5 Drag to fine-tune the vertical position.
  6. 6 Click Save, then visit a trigger product on the storefront to confirm.
Field Type Description
Offer name Text Internal label only — used to find the campaign on the dashboard. Customers never see it.
Trigger Type Dropdown All Products, Specific Products, or Specific Collections. Picks where the widget is eligible to render.
Trigger products / collections Picker Shown when the trigger type is specific. Pick the products or collections that should fire the widget.
Upsell Source Dropdown Manual, Basic AI, or Summer AI. See the Upsell sources page for the full breakdown.
Upsell products Picker Shown when source = Manual. Pick the products that the widget will recommend.
Enable discount Toggle Turn on to add an automatic discount to the upsell. Configures a real Shopify Function discount under the hood.
Discount Type / Value Dropdown + number Percentage (%) or Fixed Amount ($). Value is the percentage or money amount.
When to apply? Dropdown Always (on selected products) or Only when trigger product is in cart. Use the second to prevent customers from buying the upsell alone with the discount.

Design tab

Every campaign opens on the Offer tab. The Design tab next to it controls how the widget looks on the storefront. The same set of controls is reused across nearly every widget type, so once you learn it on one campaign the rest are familiar.

Field Type Description
Widget Title Text Heading shown above the widget (e.g. You may also like, Frequently bought together).
Button Text Text Label on every Add / Add to cart button rendered inside the widget.
Color preset Visual picker 20+ ready-made themes: Modern Clean, Ocean Breeze, Sunset Glow, Forest Edge, Royal Velvet, Minimalist, Cherry Blossom, Midnight Sky, Golden Hour, Neon Vibe, Espresso, Arctic Ice, Lava Mary, Lavender Mist, Sandstone, Vintage Ink, Fresh Mint, Bold Crimson, Soft Cloud, Visual Blue, Piggy Pink, Sunset Orange. Pick a preset to fill all color fields below at once, then fine-tune.
Font family Dropdown Your Theme Font (inherits from your theme), Inter, Roboto, Montserrat, Poppins, Playfair Display, Libre Baskerville, Oswald, Plus Jakarta Sans.
Title / Price / Compare / Button font size Number (px) Individual font sizes per element. Set Compare Price Size smaller than Price Font Size for a clean strike-through look.
Button / Title / Price / Compare colors Color picker Override the preset for any single element. Useful when one color needs to match a brand accent.
Border Radius Number (px) Rounding on product cards and CTA buttons. 0 = squared, 12–16 = soft modern, 24+ = pill-shaped.
Card Border Color picker Border color on each product card. Set to transparent or the same as your page background for a flat look.
Image Fit Dropdown Cover (crop to fill), Contain (fit inside, may show whitespace), Fill (stretch to fit).

Tip: Click any color preset to seed every color field at once, then nudge the individual swatches. Faster than building a palette from scratch.

Languages tab

If your shop runs multiple locales, the Languages tab lets you override Widget Title and Button Text per locale. Six locales ship out of the box: English, Spanish, French, Arabic, Turkish, Russian. Anything you leave blank falls back to the campaign default from the Design tab.

Tip: Start with the Grid layout if you're not sure. It's the most flexible default and works on the majority of catalog-heavy stores. Switch to Stack if mobile is your dominant device.

Previous

Upsell

Next

Frequently bought together