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!
- Shopify App CLI
- Theme Extension
- React + Tailwind CSS
In your Shopify Partner Account (it's free), create a test store.
cd your-app-name && npm install
Go through all the installation instructions
npm run deploy
Go to the Shopify Partner Dashboard -> Apps -> Versions
And check that the Shopify app was deployed with the extension.
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
Great! You now should have a working Shopify App Theme Extension that you can work on! 🎉 🎉 🎉