Edit cart prices using javascript (only visually)

Shopify Apps

Topic summary

A developer is building a product configurator app that supports more than Shopify’s standard 3 product options through virtual variants. These variants can have additional pricing that gets properly calculated at checkout via draft orders.

Current Challenge:
The main issue is displaying updated prices on the cart page before checkout. The calculated prices (including variant surcharges) need to be shown visually for individual line items and the cart total.

Attempted Solutions:

  • Creating a custom cart page app block (rejected due to losing native cart API features)
  • Observing that existing apps modify cart liquid files by adding custom class names before price elements, likely manipulating these via JavaScript to update displayed values

Status: The developer is seeking confirmation or guidance on the best approach to visually update cart prices using JavaScript while preserving Shopify’s native cart functionality.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

I am creating a product configurator app where we can have more than 3 product options. So my app allows user to create virtual variants, (Just like other apps in market). Now these variants can have additional price which I adjust in the checkout by creating draft order and returning the invoice url. However, I am struggling to show the price updates on the cart page.

How can I visually show the updated calculate price based on cart page for each line items and the total price? One solution I tried is to create my own cart page app block, which I don’t like as the cart api provides many features we could just adopt.

When looking into existing apps, I saw that they alter the cart page liquid files, and adds their own class names before the prices. So I believe they are changing the cart page texts using this classnames using javascript?