Upsell

PDP

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

Layouts

Single Upgrade

Default

One hero card under the buy button labelled Recommended upgrade. Shows the upgrade product's image, title and price (with the saving when a discount is on), a variant picker, an Upgrade now button and a No thanks, keep current link.

Zero-decision UX — one product, one button.
Only the first selected product is shown — pick the one that matters most.
Works best when the price difference is small and the upgrade is obvious.

Best for: Apparel (premium fabric), electronics (bigger storage), beauty (size upgrade).

Tier Comparison

Comparison

Two tiers side by side, each with image, title, price and variant picker, selected with a radio. The recommended tier is highlighted and pre-selected; one Add selected button adds the chosen tier.

Supports up to 2 products — mark the recommended one with the radio next to it in the Offer tab.
Surfaces the value gap visually without leaving the product page.
Single selection keeps the decision simple.

Best for: Products with clear good / better tiers — subscription boxes, electronics, kits.

Slim inline upgrade banner above Add to cart

Inline Banner

Lightweight

A slim one-line banner — Upgrade to … with the price difference and an Upgrade button. Designed to sit right above the buy buttons on dense product pages.

Lowest disruption to existing product page layouts.
Only the first selected product is shown — pick a single strong offer.
Pairs well with a percentage discount.

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 Create Campaign.
2 Under Upsell on the Product Page list, pick 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 Choose Specific products and click Add Products to pick the upgrade product. Tier comparison takes two products and a radio marks the recommended one; Single upgrade and Inline banner use only the first.
6 Optional: tick Enable discount for upsell products — Percentage or Fixed Amount.
7 Switch to the Design tab, pick a template and tweak typography / colors if needed.
8 On the Language tab set the Widget Title and Button Text, and add translations if you need them.
9 Click Publish. The Test campaign in store checklist runs (campaign active, products available, app embed enabled, widget block added) — fix anything red, then click Publish campaign.

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 inside the product information section.
4 Choose ✨ Summer: Upsell from the Apps section of the block picker.
5 Drag it to the position you want — right after the buy buttons for Single upgrade and Tier comparison, right above them for the Inline banner.
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 in the admin. Customers never see it.
Trigger	Radio	All products, Specific products (default) or Specific collections. Decides where the widget is eligible to render. Cart widgets use Any cart and Post-Purchase uses Any order instead of All products.
Trigger products / collections	Picker	Shown for the Specific options. Pick the products or collections that should fire the widget.
Product source	Radio	Specific products, Automated recommendations or Summer AI powered by ChatGPT (credit-based; every plan includes credits). See Upsell sources.
Offer products	Picker	Shown when Specific products is selected — click Add Products and pick the products the widget will recommend.
Discounts	Dropdown	No discount, Use Summer Upsell discount functions (Recommended), Use discounts that are dynamically created or Use an already existing discount code. See Discounts for how each mode works.
Type / Value	Dropdown + number	Product discount (each offer item) or Order discount (the whole order), and the amount as % or a fixed amount in your store currency.
Discount code	Text	Optional for Summer discount functions (creates a code-based discount the widget applies automatically); required for existing discount code.
Combination	Checkboxes	Whether the discount can combine with product, order and shipping discounts.

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. A live preview on the right updates as you change settings — switch it between desktop, mobile and full size.

Field	Type	Description
Layout	Dropdown	Shown on widgets that have more than one layout (Cross-sell, Upsell, In-Cart Upsell, Product Add-on). Switches the layout without recreating the campaign.
Widget Title / Button Text	Text	Heading shown above the widget and the label on its Add buttons. For Classic FBT, Bundle, Popup, In-Cart Upsell, Cart Popup and Post-Purchase you set them here; for Upsell, Cross-sell, FBT Full Width and Product Add-on they live on the Language tab (default language block).
Subtitle	Text	Optional line under the title (e.g. Customers also bought these).
Templates	Visual picker	27 ready-made themes: Modern Clean, Ink → Slate, Slate → Ocean, Espresso → Sunset, Blossom → Crimson, Teal → Ocean, Forest → Teal, Ocean → Glacier, Sunset → Crimson, Lilac → Denim, Cherry Blossom, Piggy Pink, Fresh Mint, Baby Blue, Sand, Lavender, Honey → Amber, Vanilla → Cream, Royal → Violet, Sunset Orange, Moonlit Asteroid, Amin, Celestial, Witching Hour, Frost, Quepal and Sublime Light. Picking a template sets the button style, card border and every color below at once — then fine-tune anything you want.
Background (optional)	Toggle + color	Give the widget its own background color instead of inheriting the page background.
Border Radius	Dropdown	Sharp (Square) or Curvy (Rounded) corners on cards and buttons.
Image Fit	Dropdown	Cover (crop to fill), Contain (fit inside, may show whitespace), Fill (stretch to fit).
Font family	Dropdown	Your Theme Font (inherits from your theme), Inter, Roboto, Montserrat, Poppins, Playfair Display, Libre Baskerville, Oswald, Plus Jakarta Sans.
Typography sizes	Number (px)	Title weight, Button font size, and individual sizes for Product Title, Price and Compare price. Set the compare size smaller than the price size for a clean strike-through look.
Colors	Color picker	Primary color, Product Title color, Price color and Compare price color. Override any single value after picking a template.

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

Language tab

The Language tab holds the storefront copy for the widget. The Default language block is always there; click Add another language to add any locale your Shopify store has published and translate the title, button text and other storefront strings for it. Default text is pre-filled in English, Spanish, French, Arabic, Turkish and German. A locale you don't add falls back to the default language.

Tip: In Tier comparison the first selected product is recommended by default. Use the Recommended radio next to the products in the Offer tab to highlight the other one.

Create a campaign

Cross-sell