I’m releasing the full course in a few weeks. Pre-order here! 👉 Shopify App Theme Extension 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
The first 5 steps (initializing the App) can be found in the Shopify docs:
- https://shopify.dev/docs/apps/getting-started/create
- https://shopify.dev/docs/apps/online-store/theme-app-extensions/getting-started
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! 🎉 🎉 🎉
