DEV Community

Cover image for Shopify App - Theme Extension with React + Tailwind CSS
iskurbanov
iskurbanov

Posted on • Updated on

Shopify App - Theme Extension with React + Tailwind CSS

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
Enter fullscreen mode Exit fullscreen mode

Go through all the installation instructions

Step 4: Deploy the extension

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Install the App

Add the Extension in the Sections
Add Extension Section

See the text "Hello From React!" on your page!
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 (25)

Collapse
 
huykonofficial profile image
Huy Kon • Edited

After complete the cmd npm run dev, my theme editor don't show any app at contact page section, do you you know why?

Image description

Collapse
 
iskurbanov profile image
iskurbanov

You also need to run npm run deploy to create a version/draft of the extension

Collapse
 
huykonofficial profile image
Huy Kon

Hi @iskurbanov can we apply react to app embeded?

Thread Thread
 
iskurbanov profile image
iskurbanov

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:

Image description

Thread Thread
 
huykonofficial profile image
Huy Kon

Thanks for your suggestion. it's working well. I have one more question that when we run npm run deploy it will delete all file in assets folder, I have a custom js folder in that so how can I ignore that file?

Thread Thread
 
iskurbanov profile image
iskurbanov

@huykonofficial good question, you would have to adjust the "cleanup" script in the package.json

Thread Thread
 
huykonofficial profile image
Huy Kon

@iskurbanov can you give me an example to cleanup with ignore some specific files?

Thread Thread
 
iskurbanov profile image
iskurbanov

Sorry actually it’s not because of the cleanup script. What is your custom asset called? It shouldn’t be deleting it.

Thread Thread
 
huykonofficial profile image
Huy Kon

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

Thread Thread
 
iskurbanov profile image
iskurbanov

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.

Collapse
 
clioh profile image
clioh

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:
Preview in editor

As it appears on website (127.0.0.1:9292/):
Image description

Collapse
 
iskurbanov profile image
iskurbanov

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

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
iskurbanov profile image
iskurbanov

Try displaying the value with liquid in the block component. Do you have that option (pickup availability) enabled in your admin dashboard?

Collapse
 
almusamim profile image
Hadi Zakzouk

Just wondering why you didn't go with the Hydrogen and Oxygen stack?

Collapse
 
iskurbanov profile image
iskurbanov

Hey, totally different use cases. This is for an app, Hydrogen and Oxygen are for a headless store.

Collapse
 
almusamim profile image
Hadi Zakzouk

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.

Collapse
 
quocdatptit profile image
quocdatPTIT

Image description
Hi, after complete cmd npm run deploy, my app don't create release version, do you know why ?

Collapse
 
iskurbanov profile image
iskurbanov

What does it say in your terminal window? Any errors?

Collapse
 
quocdatptit profile image
quocdatPTIT

Image description

No error in my terminal

Thread Thread
 
iskurbanov profile image
iskurbanov

Make sure you’re deploying to the correct app in your dashboard. This one has a different name. So maybe you created 2?

Collapse
 
markb1 profile image
Mark • Edited

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.

Collapse
 
ilumin profile image
Teerasak Vichadee

Do you have course curriculum?

Collapse
 
arumugasundar profile image
Arumuga Sundar Arunachalam

Hi,
I am just looking into shopify.dev/docs/apps/online-store.... Is it possible to integrate remix app as a theme extension?

Collapse
 
iskurbanov profile image
iskurbanov

Yeah probably, you would have to figure out a way to replace the vite build functionality.