In my extension Files include assets , blocks,locales,snippets and shopify.theme.extension.toml so how to react in this and want to render my react code in collection page of theme app extension . And in assets we can only use js files . Can anyone provide me step by step process ?
Topic summary
-
Goal: Run React in a Shopify Theme App Extension and render it on the collection page. Concern: the extension’s assets folder allows only JavaScript files; requester asked for a step-by-step approach.
-
Proposed approach: Use Vite plugins to bundle React into a single JS asset compatible with theme extensions. Vite is a modern build tool that compiles React code into browser-ready JavaScript.
-
Resources shared: A short guide (includes Tailwind CSS setup) and a ready-to-use template repository:
• Guide: https://dev.to/iskurbanov/shopify-app-theme-extension-with-react-tailwind-css-3n9e
• Template: https://github.com/iskurbanov/theme-app-extension-react -
Context notes: A Theme App Extension lets an app add blocks/snippets to a Shopify theme; React must be bundled into JS to be referenced from those assets/blocks.
-
Outcome/status: No confirmation or detailed steps within the thread; actionable next step is to follow the guide and template. Discussion remains open.
You can do it easily with just Vite plugins.
It took me a while to figure this out as well so I’ve put together a short guide and a template repo for this:
https://dev.to/iskurbanov/shopify-app-theme-extension-with-react-tailwind-css-3n9e
Template: https://github.com/iskurbanov/theme-app-extension-react