Use React in app block theme extension

Retired Boards Appdev Store Design
,

Topic summary

Developers are exploring how to use React within Shopify theme app extensions, which traditionally rely on Liquid templates and vanilla JavaScript. The core challenge is that app blocks don’t natively support React frameworks.

Established Solution:

  • Bundle React apps into a single JavaScript file using tools like Webpack or Vite
  • Reference the bundled file (e.g., bundle.js) in the app-block’s Liquid schema under the javascript property
  • Create React source code in a separate folder outside the extension directory
  • Configure the build tool to output the compiled bundle into the extension’s /assets folder

Common Implementation Issues:

  • React requires a DOM element to mount to, which must be defined in the .liquid file
  • Asset management (images, CSS) becomes complicated when transitioning from Liquid to React
  • Developers struggle with proper folder structure and build configuration
  • Size limits and Shopify’s restrictions on extension folder contents create constraints

Resources & Alternatives:

  • A community member shared a template repository demonstrating React + Tailwind CSS setup
  • Settings can be passed from Liquid schema to React via data attributes on the root div
  • At least one developer abandoned this approach entirely, opting to embed their React app as an externally-hosted iframe

Status: The discussion remains open with ongoing questions about asset handling and build configuration. Multiple participants note that Shopify’s documentation lacks comprehensive guidance on React integration.

Summarized with AI on October 25. AI used: claude-sonnet-4-5-20250929.
38

To clarify, do you mean that you have one React App situated outside the extensions directory? I’m having trouble understanding how this setup would function with multiple Liquid files.

My aim is to create a variety of independent Liquid blocks that can be integrated into different pages. Consequently, in my opinion, each block should be associated with a distinct React App, or at the very least, a different React Component.

For instance:

  1. Star Rating Liquid (React App A) → Implemented on page A
  2. Additional Customer Information (React App B) → Implemented on page B
  3. Customer Custom Coupons (React App C) → Implemented on page C

These are merely illustrative examples, but I’m eager to understand if this approach is correct and it should be achieved with only Components in one React App.

Shopify has a limit of 10MB for Liquid files across the whole extensions folder. 

Yes, we are aware of Shopify’s limits for this. We have small amount of functionalities, so we should not exceed this limit.

1 Like