Full course available now! 👉 Shopify App Development Crash Course
In the last few years Shopify has been revamping their App CLI and all the tooling.
We now have the App Theme Extensions here to replace the Script Tag API and make it an improved experience for merchants and their customers.
Since these upgrades are so new, there is hardly any tutorials on it!
I am currently building a theme extension app for Shopify. I initially started with Vanilla JS and regular CSS but soon realized that I wouldn't be able to build the customer experience that I wanted to with those tools. Plus it would be a bad developer experience for me also.
So about 25% way through the project I decided to switch to React and Tailwind CSS for the Theme Extension. However, this wasn't so easy to setup. So I want to share the process with you in this walkthrough!
Full Tech Stack:
- Shopify App CLI
- Vite
- Theme Extension
- React + Tailwind CSS
Step 1: Clone Template Extension App
Extension Template Github Repo
Step 2: Create a test store
In your Shopify Partner Account (it's free), create a test store.
Step 3: Run the app and install it
cd your-app-name && npm install
Go through all the installation instructions
Step 4: Deploy the extension
npm run deploy
Step 5: Check the Deployment
Go to the Shopify Partner Dashboard -> Apps -> Versions
And check that the Shopify app was deployed with the extension.
Step 6: Enable Extension on Store
Run
npm run dev
Install the app by clicking on the link in #1. Then go to link in #2 and navigate to the contact page in the theme. Then select the app from the
Add the Extension in the Sections
See the text "Hello From React!" on your page!
Great! You now should have a working Shopify App Theme Extension that you can work on! 🎉 🎉 🎉
Top comments (43)
After complete the cmd
npm run dev, my theme editor don't show any app at contact page section, do you you know why?You also need to run
npm run deployto create a version/draft of the extensionHi @iskurbanov can we apply react to app embeded?
Yeah it’s actually the same way. You just have to create a block that will be an embed instead of app block. Just set the target to body instead of section, like this:
Thanks for your suggestion. it's working well. I have one more question that when we run
npm run deployit will delete all file in assets folder, I have a custom js folder in that so how can I ignore that file?@huykonofficial good question, you would have to adjust the "cleanup" script in the package.json
@iskurbanov can you give me an example to cleanup with ignore some specific files?
Sorry actually it’s not because of the cleanup script. What is your custom asset called? It shouldn’t be deleting it.
I see that the vite build will clean up all files inside assets folder, I have my custom js for my app block or embed, it used for setting schema. So my goal I want keep these files when vite build
It’s only set to remove .json and .gitkeep files so your .js file shouldn’t be removed by it. Are you importing your custom js file anywhere? The Shopify build command might be removing any unused js files.
Hey I was interested in this course so I spun this up last night. I used the complete version from GitHub to get an idea of what the final product would look like. While the styling looks good on the preview, it does not get applied in the editor at all for some reason, which would create a confusing experience for users of the extension. Is this just a thing isolated to working on a dev branch with HMR or would it appear to a user this way once the theme app extension is published as well?
Preview in editor:
As it appears on website (127.0.0.1:9292/):
Hey Clio,
Hmm that’s strange. It should work the same way. There might be an issue with the build process in your case. Did you make any changed to the code?
Iskandar
Try displaying the value with liquid in the block component. Do you have that option (pickup availability) enabled in your admin dashboard?
I have the same issue. Once I deploy the app to heroku, I lose all tailwind styling. I've tried this on the template without altering any code or configs. The expected result is that the "Hello From React" is colored red. While running locally this is the case, but once published the text does not have the red style.
Does anyone have a solution for this?
Struggling with this too - Tailwind styles do not appear to be getting bundled with the output js file in the extension assets folder.
Were you able to find a fix?
Hey Kyle, this is the fix: github.com/iskurbanov/theme-app-ex...
Hey! Fix is here: github.com/iskurbanov/theme-app-ex...
Hey @iskurbanov ,
// Handle GET requestapp.get("/apps/proxy", async (_req, res) => {
console.log("GET API");
try {
console.log("trying...");
res.status(200).send({ message: "Got it" });
} catch (error) {
res.status(500).send(error.message);
}
});
When i hit the URL without shopify.validateAuthenticatedSession() it work fine, but when I call on my component
const textProxy = (d) => {return new Promise((resolve, reject) => {
fetch("SHOP-URL/apps/proxy", {
method: 'POST',
redirect: 'manual',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
body: JSON.stringify(d)
})
.then(response => {
console.log(response, 'response');
return response; // Assuming the response is in JSON format
})
.then(data => {
resolve(data);
})
.catch(error => {
reject(error);
console.log("test", error);
});
});
};
its show me 404 error, I am stuck please!
hi @iskurbanov, in the page, i added multiple this app that you guide in this article. But why don't it working to add multiple apps into sections or blocks? For example, in homepage, i want to add 2 this app into 2 sections. You can see this picture to understant about my problem. (As you see, i added 3 apps, but only one app was displeyed. Why?). Thanks @iskurbanov.
Yes I think only 1 will be displayed because we target the element by id in our react code. I haven’t had to display multiple so I’m not sure a work around this unfortunately.
I saw, thank you @iskurbanov
After completed the cmd npm run dev, my terminal don't show me link to install app in step 6.
In addition, i have this error
can you help me?
Maybe you need to run "shopify login" to connect your app to your partner account.
Hi, after complete cmd
npm run deploy, my app don't create release version, do you know why ?What does it say in your terminal window? Any errors?
No error in my terminal
Make sure you’re deploying to the correct app in your dashboard. This one has a different name. So maybe you created 2?
Just wondering why you didn't go with the Hydrogen and Oxygen stack?
Hey, totally different use cases. This is for an app, Hydrogen and Oxygen are for a headless store.
Thanks for the reply. Sorry for my confusion :) I'm looking forward to all your Shopify courses. I hope you can do a screencast/course on Hydrogen and Oxygen stack one day as there are hardly any courses on the subject out there.
Hi @iskurbanov Great article! Naming the app was the only lag in this. Much appreciated! (updated message and also LinkedIn to you - willing to hire @iskurbanov ) The app can be added as a section to any page, not just the contact page.
Hi @iskurbanov, thanks for the detailed guide. I'm running into this error after running npm run dev. Have you encountered this before? My ruby version is ruby 3.3.3. if that's useful.
Hi @iskurbanov
how would you integrate settings from the editor into the react code? For example i want to implement an image picker setting.
Thanks a lot!
Hey Jonas, you can easily do this by just passing them as data- attributes in the root div. Something like this: