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.

Create the strategy

1. Open Apps > Order Editing > Upsell Strategies.
2. Select Create Strategy.
3. Choose From scratch or From template.
4. Choose the checkout placement.
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. The preview uses the saved surface branding so you can judge the offer as a complete module instead of reviewing unstyled product cards.

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 checkout branding

Open Upsell Strategies > 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 Upgrade to Free Shipping.
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 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 the checkbox adds and removes the item.
7. Test a cart, market, or customer that should not match.
8. 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

Return to Checkout branding. Prefer one Upsell frame around the module instead of combining it with padded frames on every product card.