Product page widgets

Upsell

PDP

The Upsell widget is built for true upsells — convincing a customer to take the premium variant, upgraded tier, or limited edition instead of the cheaper option they're looking at. It lives next to the buy box on the product detail page and ships in three layouts focused on conversion, not browsing.

Layouts

Single Upgrade

Default

One hero card next to or under the buy button. Shows the premium variant's image, title, savings vs. the trigger product, and a single CTA to switch.

Zero-decision UX — one product, one CTA.
Highest CVR of the three Upsell layouts when the upgrade pricing is clear.
Only the first selected product is shown — pick the one that matters most.

Expected AOV impact: 4–8% AOV lift on stores with clear premium variants (Pro / XL / Edition).

Best for: Apparel (premium fabric), electronics (256GB vs 128GB), beauty (size upgrade).

Tier Comparison

Comparison

Side-by-side comparison of two tiers — feature-by-feature, with one tier marked Recommended. The customer can switch with a click.

Supports up to 2 products with a radio toggle to mark the recommended tier.
Surfaces the value gap visually — no need to compare specs across tabs.
Highest perceived-value lift when the upgrade includes 2–3 visible feature differences.

Expected AOV impact: 6–12% AOV lift when the recommended tier has 2+ clear advantages over the base.

Best for: SaaS-style products, subscription boxes, electronics with feature tiers.

Slim inline upgrade banner above Add to cart

Inline Banner

Lightweight

Slim horizontal banner under the buy button. One image, one line of copy, one CTA — designed to be unobtrusive on dense PDPs.

Lowest disruption to existing PDP layouts.
Only the first selected product is shown — pick a single strong offer.
Best paired with a percentage discount (e.g. 'Upgrade to Pro for 20% off').

Expected AOV impact: 2–5% AOV lift. Lower per-impression lift but works on any product page without redesign.

Best for: Long product pages already crowded with reviews, FAQs, and rich media.

How to create an Upsell campaign

In the Summer Upsell admin

1 In the Summer Upsell admin, click + New campaign.
2 On the Product Page tab, pick one of: Single Upgrade, Tier Comparison, or Inline Banner.
3 On the Offer tab, give the campaign an internal name (e.g. PDP — Pro upgrade).
4 Set the Trigger — All Products, Specific Products, or Specific Collections.
5 Set Upsell Source to Manual and pick the premium variant(s) you want to recommend. (Tier Comparison supports 2 products; Single Upgrade and Inline Banner use only the first.)
6 Optional: enable Discount — Percentage or Fixed — and choose Always or Only when trigger product is in cart.
7 Switch to the Design tab, pick a color preset, and tweak typography / colors if needed.
8 Optional: switch to Languages and add per-locale overrides for Widget Title and Button Text.
9 Click Save. The campaign is created with status Active.

In the Shopify theme editor

1 In the Shopify admin, open Online Store → Themes and click Customize on your live theme.
2 Use the template dropdown to switch to Products → Default product (or whichever product template the trigger products use).
3 In the left sidebar, click Add block on the section where you want the widget to appear (typically right after the buy button).
4 Choose ✨ Summer: Upsell from the Apps section of the block picker.
5 Drag it to the exact position you want under Main product.
6 Click Save. Visit a trigger product on the storefront to confirm it renders.

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: Tier Comparison shows a Recommended badge on the second selected product by default. Reorder your picks in the Offer tab to change which tier is highlighted.

Create a campaign

Cross-sell