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…

I’ve put together a template on building a theme extension app using React and Tailwind CSS, hopefully this will help! Check it out here: https://github.com/iskurbanov/theme-app-extension-react

I managed to get it working through trial and error. Better documentation is needed on this kind of development. Hopefully the above helps others.

Yeah the documentation for Shopify seems to be lacking across the board. Hopefully it’s just hold over from their switch to 2.0. I only started working with Shopify 3 months ago so I am unaware if this has always been an issue (however some posts in here and on StackOverflow would lead me to believe…

Yeah the docs give basic use-cases but since the Shopify ecosystem is so huge and always evolving/changing I can image it’s hard to cover everything. Thanks, I appreciate the kind words! I also added a blog post on how to set everything up: https://dev.to/iskurbanov/shopify-app-theme-extension-wi…

Thanks for sharing this! If anyone is using Remix for their embedded admin app, but want to use @iskurbanov1 's vite dev/build/deploy process for bundling a react theme extension within the same repository, I merged his logic for the extension into the Remix fullstack template: https://github.com/j…

If anyone needs a more detailed explanation, I’ve created this article on Medium, which describes how to inject React (with Tailwind) into a Shopify theme app extension by using Webpack.

Everything seems to be great, but I’m wondering if there is a possibility to directly use block settings and translations located in the /locales directory in theme-app-extensions in the React code? For example: I would like to be able to define the color of a certain element. I would like to use…

I may be misunderstanding your question but to define the color of a certain element you could just use App Block Schema’s and then pass the settings into the react app via data attributes on the root div. We’ve used this to accomplish several settings on within a React App. As for the translations…

Thanks @Jamflynt for the answer. Yes, it seems that it can be achieved by passing the data in data-attributes. I will test it. It would probably look something like this? <div id="react-container" data-theme-color="{{ settings.color_id }}" data-theme-title="{{ 'title' | t }}" data-theme-label="{{ '…

Use React in app block theme extension

Retired Boards Appdev Store Design

iskurbanov1 September 30, 2023, 1:33am 32

Wow amazing job! Thank you, will keep this in mind if I end up migrating an app to Remix.

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

Use React in app block theme extension

Related topics