The Product Add-on widget renders inline on the product page and is purpose-built for low-friction extras the customer would otherwise forget — warranty, gift wrap, samples, expedited shipping, engraving. Unlike the Add-ons Popup (which fires after Add-to-Cart), this version is always visible and integrates into the buy flow itself.
Layouts
Addon List
Default
Stacked list of add-on items with a small image, title, price, and a checkbox. Customer ticks the add-ons they want, then clicks Add to cart on the main product.
- Roomy rows — great for surfacing warranty/gift wrap descriptions.
- All add-ons visible at once — no decision blocked behind a click.
- Pairs cleanly with the main buy button.
Expected AOV impact: 4–9% AOV lift, with high attach rates (20–40%) on relevant add-ons.
Best for: Apparel (gift wrap, gift card), electronics (warranty, expedited shipping), beauty (samples).
Addon Card
Visual
Grid of add-on cards with a larger image and a per-card checkbox. Best for visual add-ons (samples, engraving previews, accessory color swaps).
- Larger visuals — customers can see what the add-on actually looks like.
- Two-column grid on desktop, single column on mobile.
- Easier to communicate value when the add-on is visual rather than functional.
Expected AOV impact: 5–11% AOV lift on visually-driven add-ons.
Best for: Jewelry (gift box, engraving), beauty (sample sets), home goods (color swaps).
Addon Toggle
Compact
Single-line toggles — one row per add-on, one binary on/off switch per row. The most compact layout.
- Minimal vertical space — works on tight product pages.
- Reads like a settings list — familiar pattern.
- Single-tap to enable/disable.
Expected AOV impact: 3–7% AOV lift. Lower visual weight but very consistent attach.
Best for: Subscriptions and service add-ons (warranty, gift wrap, expedited shipping) where the add-on doesn't need a visual.
How to create a Product Add-on campaign
A
In the Summer Upsell admin
-
1
Click + New campaign → Product Page.
-
2
Pick Product Add-on — List, — Card, or — Toggle.
-
3
Offer name + Trigger (Specific Products / Collections works best — add-ons should feel relevant).
-
4
Pick the add-on products from your catalog. Each add-on is a real Shopify product — gift-wrap, warranty, etc. should already exist as zero-inventory or service SKUs.
-
5
Optional: enable discount.
-
6
Design tab: preset, Widget Title (e.g. Add a little extra), Button Text.
-
7
Languages tab if needed.
-
8
Save.
B
In the Shopify theme editor
-
1
Open Online Store → Themes → Customize.
-
2
Switch to the Products → Default product template.
-
3
Click Add block near the buy button (Product Add-on widgets convert best when they're directly next to Add-to-Cart).
-
4
Pick ✨ Summer: Product Add-on from the Apps section.
-
5
Drag to position.
-
6
Click Save.
| 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: Create your add-on products as real Shopify products with no inventory tracking — warranties, gift wrap, samples, etc. They appear in your admin like normal SKUs but never deduct from physical stock.
