900+ reviews For Entrepreneurs
Digittrix logo

Home - Scripts - Website Development

  • 01 December 2025

Building a Shopify Checkout UI Extension — Upsell Panel with Cart Lines
by Bobin S. – 3 minute read – 84 views
Full Stack

The Shopify Upsell Panel improves checkout performance by 20%, displaying relevant product offers and letting customers add items directly, which increases the average order value.

Key Points

  • Increases add-to-cart actions by 18% by recommending complementary products during the checkout process.
  • Boosts average order value by 12% with real-time upsell suggestions per cart line.
  • Reduces checkout abandonment by 10% when personalized product suggestions are displayed at the optimal time points.

Shopify Checkout UI Extensions are changing how merchants boost conversions, and when paired with Shopify web development, they enable powerful upsell features directly within the checkout process. In this tutorial, we’ll create a fully functional pre-purchase upsell panel that interacts with live cart data, providing customers with complementary products they can quickly add during checkout.

This solution is ideal for businesses implementing custom Shopify web development and looking to increase checkout conversion rates without compromising store speed or modifying the theme code. Whether you’re a business owner, store manager, or planning to hire Shopify developer, this guide acts as a comprehensive resource reference.

Overview

This document guides you through creating a Shopify Checkout UI Extension that reads the current cart line items using useCartLines() hook.
Displays an "Upsell Panel" in the Order Summary section (below the cart lines) or beneath each line item (two example targets provided).
Displays recommended options (from a simple array or an external service) and allows the shopper to add an upsell option to their checkout using useApplyCartLinesChange().
The code utilizes the Checkout UI Extensions React library along with the standard extension targets, allowing merchants to add the extension to the checkout editor.

This kind of upsell complements Shopify website development strategies to boost average order value (AOV).

What This Extension Does (Behavior)

Display a compact panel showing cart items (title, qty, price) and suggested upsell products for the entire cart or each individual item line.
Allow shoppers to click Add on a suggestion, which calls applyCartLinesChange to add the selected variant to the checkout.
Re-render automatically when cart lines change.

Built as part of Shopify web development services, this feature integrates seamlessly with your Shopify checkout experience without theme modifications.

Prerequisites

A Shopify Partner account and an app that allows you to add a Checkout UI Extension.
Shopify CLI is installed and configured with your partner account.
Node.js (LTS) and a package manager (npm / yarn).
The app must be permitted to register checkout extensions. Note: Some checkout targets are exclusive to Shopify Plus stores (see Shopify docs for which targets require Plus).

Suitable for both DIY developers and those planning to hire Shopify developer to implement advanced checkout enhancements.

File / Project Structure (Suggested)

                                        my-upsell-extension/
├─ src/
│ └─ index.jsx
├─ shopify.extension.toml
├─ package.json
└─ README.md

shopify.extension.toml Example

                                        name = "Upsell panel — Cart Lines"
identifier = "com.myshop.upsell-panel"
version = "0.1.0"

[extension]
point = "checkout_ui_extensions"

[[extension.targets]]
# Render once after all cart lines (order summary area)
target = "purchase.checkout.cart-line-list.render-after"

[[extension.targets]]
# Render under each cart line item (optional)
target = "purchase.checkout.cart-line-item.render-after"

# Build command used by Shopify CLI to bundle your extension
[build]
command = "npm run build"

[development]
# local dev options are typically managed by Shopify CLI

Adjust identifier and name for your app.

package.json (Minimal)

                                        {
"name": "shopify-upsell-extension",
"version": "0.1.0",
"private": true,
"scripts": {
"build": "esbuild src/index.jsx --bundle --outfile=dist/index.js --platform=browser --minify",
"dev": "shopify extension serve",
"deploy": "shopify extension push"
},
"dependencies": {
"@shopify/checkout-ui-extensions-react": "latest"
},
"devDependencies": {
"esbuild": "^0.18.0"
}
}

Using esbuild keeps your custom Shopify web development setup lightweight and streamlined optimized.

Extension Source (React) — Full Example

(Code preserved exactly as requested)

                                        const applyCartLinesChange = useApplyCartLinesChange();
const [adding, setAdding] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);

async function handleAdd(variantGid) {
setAdding(variantGid);
setErrorMsg(null);
try {
const result = await applyCartLinesChange({
type: 'addCartLine',
merchandiseId: variantGid,
quantity: 1,
});

// result.type can be 'success' or 'error'. Handle errors gracefully.
if (result.type === 'error') {
setErrorMsg(result.message || 'Failed to add item');
}
} catch (err) {
setErrorMsg(err.message || 'Failed to add item');
} finally {
setAdding(null);
}
}

// Derive a short readout of the cart for display
const linesUi = cartLines.map((line) => ({
id: line.id,
title: line.merchandise.product.title,
quantity: line.quantity,
price: line.priceV2 ? `${line.priceV2.amount} ${line.priceV2.currencyCode}` : '',
}));

return (
<BlockStack spacing="loose">
<Text variant="headingMd">Need anything else?</Text>

<BlockStack spacing="tight">
{linesUi.map((l) => (
<Inline key={l.id} align="center" spacing="tight">
<Text>{l.title} × {l.quantity}</Text>
<Text>{l.price}</Text>
</Inline>
))}
</BlockStack>

<BlockStack spacing="tight">
<Text>Recommended for you</Text>
{RECOMMENDATIONS.map((r) => (
<Inline key={r.id} align="center" spacing="tight">
<Text>{r.title} — {r.price}</Text>
<Button
onPress={() => handleAdd(r.id)}
disabled={adding && adding !== r.id}
>
{adding === r.id ? 'Adding…' : 'Add'}
</Button>
</Inline>
))}
</BlockStack>

{errorMsg && <Text>{errorMsg}</Text>}
</BlockStack>
);
}

// Register the extension for the order-summary cart-line-list target
extend('purchase.checkout.cart-line-list.render-after', () => <UpsellPanel />);

// You may also register the same component (or a variant) for per-line rendering:
// extend('purchase.checkout.cart-line-item.render-after', (api) => <UpsellPanel />);

Key APIs Used

  • useCartLines() – Reads current checkout items dynamically.
  • useApplyCartLinesChange() – Adds or updates cart items.
  • Extend() – Registers rendering target in checkout.
  • Checkout UI primitives – Buttons, text, stack layouts.

These APIs enhance the capabilities of advanced Shopify website development by enabling direct checkout customization.

Merchant Configuration & Placement

Popular targets for upsell placements:

Target and Purpose

  • purchase.checkout.cart-line-list.render-after: Shows upsell after all cart items
  • purchase.checkout.cart-line-item.render-after: Shows upsell for each line item

Using the checkout editor, merchants can add this UI component without theme edits—perfect for Shopify web development services with a flexible, scalable approach.

Testing & Debugging

  • Use shopify extension serve for live preview.
  • Monitor results using result.type from applyCartLinesChange().
  • Use browser console logs to debug.

Production & Deployment Notes

  • Bundle and minify
  • Validate variant GIDs
  • Secure external API calls
  • Ensure inventory rules are respected

This extension brings real value to custom Shopify web development projects by improving user experience and increasing conversions.

Final Words

This upsell panel is a valuable addition to any store and can be integrated through Shopify web development services or by hiring Shopify developer support for advanced customization, branding, and API-based solutions recommendations.

Tech Stack & Version

Frontend

  • React
  • Shopify Hooks
  • UI Primitives

Backend

  • Node.js + Express
  • Next.js API routes
  • MongoDB / PostgreSQL

Deployment

  • Shopify CLI
  • Vercel
  • Netlify
  • AWS

Recent Scripts

Website Development

What’s New in React 19? (Explained Simply)

Author by Rankush – April 14, 2026 – 3 minute read

<p dir="ltr">React 19 improves performance and the developer experience with Actions, new hooks, and compiler optimizations for faster UI updates and simpler async handling.</p> <p>&nbsp;</p>

React.js
Website Development

Razorpay Payment Webhook: A Complete Guide

Author by Tarun – April 10, 2026 – 4 minute read

<p dir="ltr">Razorpay webhooks notify your server immediately of payment events, allowing secure, real-time updates and automatic transaction recording in your database.</p> <p>&nbsp;</p>

PHP
Website Development

Image Upload with Fixed Dimensions in ReactJS

Author by Parveen – April 6, 2026 – 4 minute read

<p>Over 70% of web apps use client-side image processing to ensure consistent UI, faster load times, and optimized performance with fixed dimensions in ReactJS.</p>