Hide and relabel cart lines

Hide lines the shopper shouldn’t see, rename lines that read badly, and control the order everything renders in, all without touching what’s actually in the cart. This replaces the older pattern of hiding cart elements with CSS or style.display = 'none'. A line transform is applied every time the cart renders, so it survives updates, re-renders, and drawer re-opens.

Hide a line

// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

Hiding is not removing. A hidden line stays in the shopper’s cart, stays in the total, and goes through to checkout; it just isn’t drawn in the drawer. It does drop out of getCart().items and itemCount, so your own code stops seeing it too. If you want it gone for real, use removeItem.

Common things worth hiding:

window.aftersell.cart.hooks.registerLineTransform((line) => {
  // An app-injected line, tagged with a private property.
  if (line.properties?._bundle_child) {
    line.setHidden(true);
  }

  // A specific SKU that shouldn't be shopper-managed.
  if (line.variantId === HIDDEN_VARIANT_ID) {
    line.setHidden(true);
  }

  // Gift cards issued by a loyalty app.
  if (line.isGiftCard && line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

Relabel a line

window.aftersell.cart.hooks.registerLineTransform((line) => {
  // Flag discounted lines.
  if (line.finalLinePrice < line.originalLinePrice) {
    line.setTitle(`${line.title} (On sale)`);
  }

  // Make the subscription cadence read naturally.
  if (line.sellingPlan) {
    line.setVariantTitle(`Delivered ${line.sellingPlan.name.toLowerCase()}`);
  }

  // Drop a meaningless variant label.
  if (line.variantTitle === 'Default Title') {
    line.setVariantTitle(null);
  }
});

The four setters available on a line:

Setter	Effect
`setHidden(bool)`	Hide the line from the drawer.
`setTitle(string)`	Change the displayed title.
`setVariantTitle(string \| null)`	Change the displayed variant label. `null` removes it.
`setInternalProperties(obj)`	Merge render-only properties, for a Custom code block to read. Never persisted to Shopify.

Control the order

A comparator takes the same shape Array.prototype.sort expects, and runs after hiding and renaming:

// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});

// Push free gifts and add-ons to the bottom.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineA.finalLinePrice === 0 ? 1 : 0) - (lineB.finalLinePrice === 0 ? 1 : 0);
});

Return 0 for pairs you don’t care about. Comparators compose as tie-breakers, so the first to return a non-zero value decides that pair and returning 0 hands the decision to the next one instead of forcing an order on it.

Hide a whole block, not a line

A line transform works on cart lines. To show different block settings by country, market, or currency (for example different Rewards tiers), use conditions in the cart editor. No code required, and it survives cart redesigns. Cart total and cart contents are not editor condition types. Reach for the SDK when your rule is something conditions can’t express (product IDs in the cart, a custom total, and so on). In that case, query the shadow root for a public cart-external-* class:

window.aftersell.cart.events.on('cart_updated', (state) => {
  const root = window.aftersell.cart.shadowRoot;
  if (!root) return;

  const rewards = root.querySelector('.cart-external-rewards');
  if (!rewards) return;

  const hasExcluded = state.items.some((line) => EXCLUDED_PRODUCT_IDS.includes(line.productId));
  rewards.style.display = hasExcluded ? 'none' : '';
});

This runs after each render, so the block can flash into view before your code hides it. Conditional rendering doesn’t have that problem, so prefer it wherever it fits.

Things to get right

Transforms are set-up calls. Register them at the top of your Initialization script; no ready() needed.
Everyone’s transforms run. Yours composes with any registered by other apps. You can’t replace theirs, and they can’t drop yours.
A transform can’t change price, quantity, or identity. It only changes what renders. Use the actions for real changes.
A transform that throws is skipped silently. The rest still run. Check aftersellCartDebugEvents while developing.
registerLineTransform returns an unregister function, if you need to undo it later.

Where to go next

Hooks: the full hook reference.
Cart object: every field you can branch on.
Custom CSS: the cart-external-* class convention.

Getting Started

Home Page

Best Practices

Post-Purchase Upsells

Aftersell Cart

Checkout Upsells (Shopify Plus)

Thank You Page

Product Page Upsells

Rokt Thanks

Strategies

Analytics & Tracking

Integrations

Aftersell MCP

Billing & Account

Troubleshooting

Hide a line

Relabel a line

Control the order

Hide a whole block, not a line

Things to get right

Where to go next

​Hide a line

​Relabel a line

​Control the order

​Hide a whole block, not a line

​Things to get right

​Where to go next

Hide a line

Relabel a line

Control the order

Hide a whole block, not a line

Things to get right

Where to go next