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