Cart Editor

Let buyers change product variants and quantities directly at checkout β€” without leaving the checkout flow. Cart Editor reduces friction and cart abandonment by enabling quick edits right in the Order Summary sidebar.

circle-info

Requires Shopify Plus. Cart Editor uses Checkout UI Extensions, which are available on Shopify Plus plans.


What it does

Cart Editor adds editing controls to each product in the Order Summary sidebar at checkout:

  • Variant change β€” buyers can switch product options (size, color, material) via dropdown selectors directly at checkout.

  • Quantity change β€” buyers can adjust item quantity with a stepper control (plus/minus buttons).

  • Remove item β€” optionally let buyers remove products from their cart at checkout.

The widget appears as a collapsible link under each product. Buyers click to expand and make changes β€” cart updates instantly without page reload.


Step 1: Go to Extra Widgets

In the app sidebar, click Extra widget. Scroll down to find the Cart Editor card and click Select (first time) or Manage (if already created).

Cart Editor is a single-config widget β€” you have one cart editor config for your entire store (unlike Trust Badges or Custom Banners which support multiple configs).


Step 2: Configure editing options

The editor opens with a two-column layout: settings on the left and sidebar with live preview on the right.

The Editing options section controls what buyers are allowed to change at checkout:

Setting
Description
Default

Allow variant change

Buyers can change color, size, etc. via dropdown selectors

On

Allow quantity change

Buyers can adjust item quantity with a stepper

On

Minimum quantity

Lowest quantity allowed per item (shown when quantity change is on)

1

Maximum quantity

Highest quantity allowed per item

99

Allow remove item

Buyers can remove products from cart entirely (shown when quantity change is on)

Off

circle-exclamation

Step 3: Set trigger conditions (optional)

Control when the cart editor appears using trigger conditions. By default, it shows for all products and buyers.

Toggle between two modes:

Mode
Description

No condition

Cart editor always shows for all products and buyers

Set conditions

Cart editor only shows when ALL conditions are met (AND logic)

Available conditions

Condition
Description

Subtotal value

Cart subtotal meets a threshold (greater than, less than, equals, or range)

Product price

Product price meets a threshold

Included products

Cart must contain specific products

Excluded products

Cart must NOT contain specific products

Included collections

Cart must contain products from specific collections

Excluded collections

Cart must NOT contain products from specific collections

Customer tag

Buyer must have (or not have) specific customer tags

You can add up to 4 conditions. All conditions use AND logic β€” every condition must be true for the widget to appear.

circle-info

For guest checkout (no customer account), customer tag conditions are skipped β€” the cart editor still shows.


Step 4: Configure display settings

The Display section controls how the cart editor appears at checkout.

Setting
Options
Default
Description

Edit link text

Free text

"Change options"

Text shown on the collapsible link. Recommended max 25 characters

Default state

Collapsed / Expanded

Collapsed

Whether the editor starts open or closed at checkout

Variant appearance

Single dropdown

Single dropdown

How variant selectors are displayed


Step 5: Set schedule (optional)

The Schedule section controls when the cart editor is active.

Setting
Description

Active date / Start date

When the cart editor becomes active

Set end date

Check to set an end date β€” uncheck for no expiry


Step 6: Sidebar settings

The right column shows status controls and a live preview.

Section
Description

Status

Toggle between Active (live at checkout) and Expired (hidden)

Widget name

Name for your reference β€” not shown to buyers (e.g., "Cart Editor #1")

App block

Shows whether the Cart Editor block has been added in the Theme Editor. Click "Go to theme settings" to open the Theme Editor

Preview

Live preview showing how the cart editor will look at checkout. Updates in real-time as you change settings

Preview β€” expanded state

Click "Change options" in the preview to see the expanded state with variant selectors and quantity stepper:


Step 7: Add the block in Theme Editor

After saving your cart editor config in the app, add it to your checkout page:

  1. Go to Shopify Admin β†’ Online Store β†’ Customize

  2. Navigate to the Checkout page in the theme editor

  3. Click Add block β†’ select AOV Cart Editor

  4. Position the block in the Order Summary section

  5. Click Save in the theme editor

circle-exclamation

How it works at checkout

Collapsed state (default)

Below each eligible product in the Order Summary, buyers see a clickable link:

Change options β–Ό

Clicking the link expands the editing controls.

Expanded state

When expanded, buyers see:

  • Variant selectors β€” one dropdown per product option (Size, Color, etc.). Out-of-stock options show "(Out of stock)" and are disabled.

  • Quantity stepper β€” plus/minus buttons to adjust quantity within the min/max range.

  • Remove item β€” if enabled, when quantity reaches minimum, a "Remove this item from cart?" confirmation appears.

All changes apply instantly β€” cart total updates without page reload.

Edge cases

Scenario
Behavior

Single-variant product

Variant selectors are hidden, only quantity shown

Invalid variant combination

Error: "This combination is not available"

All variants out of stock

Dropdowns grayed out

Last item removed from cart

Shopify redirects buyer to cart page

Extension error

Graceful degradation β€” checkout works normally, widget hidden


Tips

  • Keep the edit link text short β€” under 25 characters to avoid wrapping on mobile

  • Use "Collapsed" as default state β€” keeps checkout clean; buyers expand only when needed

  • Set sensible min/max quantities β€” prevents buyers from ordering unreasonable amounts

  • Enable "Remove item" carefully β€” consider whether you want buyers to empty their cart at checkout

  • Use trigger conditions for specific products β€” if you sell both physical and digital products, you might only want cart editing for physical items

  • Test on mobile β€” the Order Summary sidebar collapses on mobile; verify the cart editor looks good


FAQs

General

Q: Do I need Shopify Plus for Cart Editor? A: Yes. Cart Editor uses Checkout UI Extensions, which require Shopify Plus.

Q: Can I create multiple cart editor configs? A: No. Cart Editor is a single-config widget β€” one config applies to your entire store.

Q: What happens if I deactivate the cart editor? A: It stops appearing at checkout immediately. Your config is preserved β€” reactivate it anytime.

Q: Does Cart Editor work with Volume Savings? A: Yes. When both are active for the same product, Cart Editor shows variant editing while Volume Savings handles quantity tiers β€” no duplicate controls.

Checkout behavior

Q: Where does the cart editor appear on the checkout page? A: In the Order Summary sidebar (right column), directly under each product item. It does not appear in the main checkout flow area.

Q: Do changes update the cart immediately? A: Yes. Variant and quantity changes apply instantly with automatic price updates β€” no page reload needed.

Q: What happens if a buyer selects an out-of-stock variant? A: Out-of-stock options are marked "(Out of stock)" and disabled in the dropdown. Buyers cannot select them.

Q: What if the buyer removes all items from their cart? A: Shopify automatically redirects the buyer to the cart page when the cart is empty.

Theme Editor

Q: I see a yellow warning banner about the Cart Editor block β€” what do I do? A: Follow the instructions in the banner: go to the Theme Editor, add the "AOV Cart Editor" block to the Checkout page, and save.

Q: Where should I place the Cart Editor block? A: Add it to the Order Summary section of the checkout page. The extension targets purchase.checkout.cart-line-item.render-after, so it automatically renders below each product line item.

Last updated