Hello, I’ve just started getting into shopify development and completed Build App Example tutorial. It was a great tutorial, but really only covered the merchant back office flow. The app I’d like to build interacts with the online store. I’ve read through the docs and started using app blocks. My …

Just in case you haven’t solved this yet. Is is possible to use React within an extension. You can use tools like webpack and babel to bundle up your react app into a single file (i.e. bundle.js). Then in your block, just include that one file. Your app-block.liquid file may look something like th…

Hi, I have been stuck on this for some time. I have a custom shopify app which is deployed and working but I need to embed it in a theme extension so I can display it in the clients shopify store. What you have described above is for embedding a new react app in a theme but what about an existing a…

You should be able to accomplish it the way you described; your app code should not need to be in the extensions folder alongside the block. (in fact it probably shouldn’t as there is something like a 10MB size limit for these and Shopify is very strict about the extensions folder’s architecture). A…

Ok thanks for you reply, what’s the purpose of the app root div should something in my app be targeting that? Also if you have any advise for packaging or refs to useful docs for setting this up that would be greatly appreciated.

Yes your app will need something to target since the liquid file is essentially taking place of the index.html in the extension (to my knowledge). So wherever you use ReactDOM to render your app just createRoot on the element you want to target. My advice would be to look at Vite: https://vitejs.de…

I’m getting issues when building with webpack for certain scripts. Seems like I’m just constantly chasing different errors. Would it be easier to copy my app code into the extensions folder and effectively replicate the code?

Could you provide a screenshot of the folder layout with files for the extension please? Also what do you mean by this “create a sibling folder next to your extension (I named mine “[extension-name]-dev”). This is where your react source code lives. You just build your react app in this file and co…

What did you build your app in? Is it in React? If you are feeling stuck, follow this tutorial - https://shopify.dev/docs/apps/online-store/theme-app-extensions/getting-started You keep saying your “app” but what is your app built in, is it an embedded app? react app? something else? If it’s an em…

I have a react app which calls external api’s and displays data to the user. It is currently installed on the merchants store and I thought there would be a setting or configuration in shopify admin to allow direct access to the app from the store but that’s not the case. I have created a theme exte…

Wish I could say the chasing errors thing had an easy fix but that really is just kinda of the name of the game while figuring this out. I would not put anything into the extension folder that was not an extension. Shopify doesn’t seem to like that and keep in mind the size limit. Be sure to look a…

Use React in app block theme extension

Retired Boards Appdev Store Design

jlogey94 August 1, 2023, 11:58pm 22

Could you provide steps on how you achieved this please?

Topic		Replies	Views
Theme App Extensionsの実装方法として、Reactを用いることができるか Shopify アプリ	6	93	March 18, 2022
How to use React js in theme app extension? Shopify Discussion troubleshooting	5	547	June 20, 2024
App block extension Store Design	0	22	October 11, 2021
How to use React js in Theme app extension? Shopify Discussion troubleshooting	1	93	August 3, 2023
Embed react app into shopify theme Store Design	16	1104	December 25, 2020

Use React in app block theme extension

Related topics