iskurbanov

Posted on Aug 3, 2023 • Edited on Aug 10, 2023

Shopify App - Theme Extension with React + Tailwind CSS

#shopify #react #vite #tailwindcss

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! 🎉 🎉 🎉

Latest comments (45)

Ajay Yadav • Jun 5

Really well-written! While most people focus on the technical implementation of Shopify app theme extensions with React and Tailwind CSS, I’ve seen an interesting take on balancing performance optimization with design flexibility in this guide: mobisoftinfotech.com/services/shop... .

Curious to hear what you think about integrating custom Shopify website design strategies alongside modern front-end frameworks to enhance both user experience and conversion rate optimization!

Leo-so5 • Jan 14

how to get access_token in this app

Galang Ananda • Jul 22 '24

Getting an error after npm run dev, is there any fix ?

Zain Ahmad Khan • Jul 16 '24 • Edited

The CSS no longer applies in the sample project extension side, did Shopify change something? @iskurbanov

Zain Ahmad Khan • Jul 16 '24

Nevermind, I found the solution here
github.com/iskurbanov/theme-app-ex...

Nathan Yang • Jul 6 '24

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.

Irfan • Jun 29 '24

Hey @iskurbanov ,

// Handle GET request app.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); }); }); };