How to update cart item image and add custom preview popup via Theme App Extension?

Extensions
1

Hi everyone,

We’re building a Theme App Extension to allow merchants to add custom personalization fields to their product pages. So far, we’ve successfully implemented this via an app-block.liquid that renders on the product template. Now, we’re looking to enhance the cart experience and are running into some questions:

Goals:

  1. Update product image in cart – Replace the standard product image with a custom image uploaded/generated via our app on the product page.
  2. Add “Preview Design” button – Include a button in the cart that opens a popup to show the custom design preview (e.g. personalized t-shirt).
  3. Auto-enable on cart page – We want the cart update to be seamless, meaning if the merchant enables the app block on the product page, it should automatically render required elements on the cart page too, without asking them to manually add or enable a separate app block.

Questions:

  1. How can we target the cart page through the same app extension or block? Is it possible to render elements on the cart page using our current app-block.liquid setup or do we need a separate extension instance/template?
  2. What’s the recommended way to customize the product image in the cart (e.g. show personalized image based on line item properties)?
  3. Can we inject a “Preview Design” popup via JS in the cart? If so, any best practices to do this via an extension while keeping performance and compatibility in mind?
  4. We’ve seen apps like Customily and Teeinblue do this — any insight into how they structure their extension for both product and cart?

Any help or guidance from the community would be greatly appreciated!
Thanks in advance!

2

Hi Irfan,

App blocks (like your app-block.liquid) can only be rendered in sections that support app blocks, and only if the merchant adds them via the theme editor. By default, app blocks are not automatically rendered on every page (like the cart) unless the theme’s cart template or a section within it supports app blocks and the merchant adds your block there.

App embed blocks are more flexible: they can be injected into the <head> or <body> of every page, including the cart, and can be enabled globally by the merchant. These are ideal for floating UI, overlays, or injecting JS/CSS across multiple pages.

If you want your extension to work on both product and cart pages without requiring merchants to manually add blocks to each template, consider creating an app embed block in addition to your app block. The app embed block can inject your JS/CSS and DOM elements into the cart page automatically when enabled.