Setting Up Checkout Upsells

What you'll achieve

You will create a checkout strategy, install its app block, apply checkout-specific branding, and test the live checkout without placing an order.

Before you begin

• Shopify Plus is required for checkout app blocks.
• You need access to edit and save the published Shopify checkout profile.
• Choose products available in each selected Shopify Market.
• Keep the strategy in Draft until the app block and customer experience are ready.

Choose a checkout placement

For Checkbox Upsell, the Checkbox Add-On template provides a useful starting point with a Single Product module. For its product sources and settings, see Setting Up Checkbox Upsell.

Create the strategy

1. Open Apps > Order Editing > Upsells.
2. Select Create strategy.
3. Choose the checkout upsell type.
4. Choose Checkout as the page, then select Continue.
5. Select the Shopify Markets that can see the offer.
6. Set the strategy to Draft.
7. Add and configure a supported product module.
8. Configure customer targeting, offer content, quantity, and discount settings.
9. Add reusable content blocks under Offer layout if the placement supports them.
10. Save the strategy.

Review the branded preview

Open the strategy preview and review the products and content blocks together. For strategies using Appearance, the preview follows the strategy's appearance draft. Existing strategies without managed appearance continue to use legacy surface branding.

Use the preview to check:

• offer headline and product text;
• product and variant information;
• content-block position;
• product-card frame and image styling;
• narrow and wide layouts.

The strategy preview does not prove live checkout targeting or installation. Complete the checkout-editor and live-checkout steps as well.

Configure strategy appearance

If Appearance is available in the strategy editor, use it to style Product List, Free Shipping and Checkbox offers independently. New strategies start from your default look for each placement, or the standard look if you haven't saved one. For an existing strategy, select Customize appearance to copy compatible app branding; Shopify editor overrides cannot be copied automatically.

1. Select Customize appearance on the Appearance card to open the unified settings and preview workspace. Expand on the preview opens the same workspace for a configured checkout placement.
2. Choose the layout and settings in the left-hand panel.
3. Compare Upsell only and Full checkout, using the mobile and desktop preview controls.
4. Select Save strategy to save the whole strategy, including other pending strategy edits.

Discard undoes workspace edits since you opened it or last saved there. It preserves unsaved strategy-page edits that were already present when you opened the workspace. Reset to default returns the placement to your default look, or the standard look if you haven't saved one, as an unsaved change. All blocks selecting the same strategy use its saved appearance.

Default look, at the bottom of the workspace, makes this placement's look the starting point for new strategies. Select Save as default and confirm. New strategies that use the placement start with it. Existing strategies, including this one, keep their own look, and nothing changes at checkout. Product List, Free Shipping and Checkbox each have their own default, which covers every workspace setting for the placement but not the offer's title, description or button text. Clear default puts new strategies back on the standard look.

Offer message is read-only in Appearance. Edit the title, description and, for Product List or Free Shipping, add-to-cart wording in the strategy's Message step. A module with its own wording keeps its override. Add-to-cart wording does not rename variant-selection controls.

Alignment affects the offer title and description together. Choose Text for left, centre or right alignment. Native Heading uses start alignment, which follows the language direction. Product names, prices, buttons and content blocks keep their own alignment.

Product List

Product List supports one to three products Shown at once, independently of the recommendation limit. Let shoppers reach the rest with arrows adds browsing arrows that only appear when there are more products to reach, including when three products are visible.

Let shoppers search your catalog adds a Search the catalog link under the products so customers can find something the recommendations missed. It is off until you turn it on. When it is on, use Catalog search button text to change the link's wording, up to 80 characters, or leave it blank for the default. Your image and price settings apply to search results, but star ratings are not shown there.

Free Shipping

Free Shipping supports carousel, list, search and threshold-only layouts. In the List layout, Let shoppers reach the rest with arrows adds arrows that page through the rest of the products. It is off until you turn it on, and the arrows only appear when there are more products to reach.

Edit Remaining amount message and select the Remaining amount variable button to insert the amount left. Edit Catalog search button text when search is enabled. The preview uses a sample cart, never customer carts or saved thresholds. Threshold amounts, eligibility and the choice of global or custom thresholds stay in the strategy's existing free-shipping settings, outside Appearance. There is no tier or tier-upgrade editor in this workspace, and the preview does not simulate transitions between shipping tiers.

Checkbox

Checkbox shows one to three products, each with its own checkbox, with an optional Add all button for two or three products. It offers Compact or Detailed layout, a Checkbox or Toggle control for a single product, and an optional box around the offer. For each setting, see Setting Up Checkbox Upsell.

Prices and ratings

Sale price color styles discounted prices using checkout colors. Discounted-price styling does not add a discount badge. Product List and the Free Shipping carousel and list layouts also offer Star color when ratings are shown. Ratings appear when the product has at least 3 stars and a review count.

The preview shows example ratings on unrated sample products only. It never creates real reviews or adds them to real recommendations. Shopify still controls native checkout typography, colours and the surrounding checkout layout.

If a save reports incomplete checkout publication, reopen the strategy and select Retry publication. This publishes the latest saved changes, not an unsaved draft. Already-open checkouts may take time to refresh.

Review legacy checkout branding

When strategy presentation is enabled for your store, checkout offer branding is a read-only legacy view. Existing strategies retain their old appearance until you explicitly set up presentation. The controls below remain editable only in the legacy workflow; other surface branding is unaffected.

Open Upsells > More actions > Upsell settings > Branding > Checkout.

Start with Auto values, then change only what the design needs:

• Card frame controls individual product-card chrome.
• Row dividers apply to product lists, not carousels or modals.
• Upsell frame adds one outline around the complete title, pagination, and product area.
• Space above and below separates the offer from nearby checkout sections. Content blocks stay outside this space.
• Pagination control chooses Shopify-style buttons or smaller clickable chevrons.
• Pagination style uses responsive Auto behaviour, both directions, or next-only navigation.
• Pagination spacing applies when both controls sit together.
• Pagination button style uses Auto, Primary, or Secondary styling for button controls.

Use Live preview to compare narrow and wide checkout layouts before saving.

Install the app block

1. Open the placement's setup action in Order Editing.
2. Continue to Shopify's checkout editor.
3. Add the matching block: Product List Upsell, Checkbox Upsell, or Free Shipping Upsell.
4. Position the block without competing with required checkout information.
5. Save the checkout profile.
6. Return to Order Editing and confirm the placement reports as installed.

For a dedicated Product List or Checkbox block, enable Only show this strategy when an app block requests it by ID in the strategy, then choose that strategy under Locked Strategy in the checkout block. A locked strategy is excluded from normal matching.

Test checkout

1. Activate the strategy when configuration and installation are complete.
2. Add a product that should match to the cart.
3. Continue to checkout without placing an order.
4. Confirm the offer and its content blocks appear in the installed location.
5. Add and remove the offered product.
6. For Checkbox Upsell, confirm selecting and clearing each checkbox adds and removes that item.
7. If catalog search is on, search for a product, add it, and confirm it is added at its normal price.
8. Test a cart, market, or customer that should not match.
9. Check the checkout at narrow and wide widths.

Troubleshooting

The strategy preview looks right but checkout is empty

Confirm the checkout app block is saved to the published profile, the strategy is Active, the market and audience match, and the product is available for sale.

The wrong strategy appears

Review strategy matching and priority. Use a locked strategy only when the app block should request one strategy by ID.

Content blocks appear in the wrong place

Reorder them under Offer layout and save the strategy. Checkout module spacing does not include content blocks, so check spacing around both areas in the live preview.

Pagination or frames look too heavy

Use Appearance > Customize appearance for a managed strategy, or Checkout branding in the legacy workflow. Prefer one frame around the module instead of combining it with padded frames on every product card.

A searched product has no discount

This is expected. Catalog search lets customers add any eligible product at its normal price. Only the products the strategy recommends receive its discount.