Shopify is one of the largest e-commerce platforms on the planet, with a massive 20% global market share of the top 1 million websites using eCommerce technologies (According to Built with - Correct at the time of writing). This makes Shopify very lucrative for developers, from building bespoke themes for clients and reusable themes for the Theme Store to applications for the Shopify App Store.
With all that said the built-in, browser-based theme editing experience is limited and far from enjoyable. Thankfully Shopify also offers Shopify Theme Kit, Shopify Theme Kit allows us to edit themes locally in our favorite text editor and watch for changes that are automatically pushed to our Shopify store. The advantages of editing our files locally don't just stop at being able to use our favorite text editor though, it also allows us to take advantage of build tools like Webpack, Gulp, etc.
Getting started with Theme Kit
Installation
If you haven't used Theme Kit before you'll need to install it, if you have already installed Theme Kit you can skip ahead to Get API Access
macOS Installation
Use Homebrew to install Theme Kit by running the following commands:
brew tap shopify/shopify
brew install themekit
If
brew install theme kit
does not work for you, please trybrew install shopify/shopify/themekit
as pointed out by @dnirns in the comments
Windows Chocolatey Installation
If you have Chocolatey installed install Theme Kit by running the following commands:
choco install themekit
Linux Installation
If you are on a Linux based system, you can use the following installation script to automatically download and install the latest Theme Kit:
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
Get API Access
To connect Theme Kit to our store we'll need to create a private app in the stores Shopify Admin. If you've already created a private app you can skip ahead to Create a Theme Kit theme
- From the Shopify Admin area, we'll open
Apps
from the left-hand panel. - Towards the bottom of the page we need to click on
Manage private apps
- Then we'll click on
Create new private app
(If there's a notice that reads "Private app development is disabled", then we'll need to click "Enable private app development" first. Note: Only the store owner can enable private app development) - In the App details section, we must fill out the app name and contact email address.
- We need to scroll down to the Admin API section and click Show inactive Admin API permissions.
- Scroll to the
Themes
section and select Read and write from the dropdown. - Click
Save
. - Read the private app confirmation dialog, then click
Create app
.
Once we've created our app we'll be returned to our app detail page, unique access credentials are visible in the Admin API section. We'll need to copy the password, this will be needed in the next step.
Create a Theme Kit theme
Now we have Theme Kit installed and we have created our private app we are ready to create our new Theme Kit theme. First, we'll open up our chosen themes directory and create a new folder with the name of our theme, for this example, we'll call it tailwind-shopify-theme
. Upon creating our tailwind-shopify-theme
folder we'll need to navigate there with our terminal and create our Theme Kit theme by running the following command:
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]
Where [your-password]
is equal to the API password from our private application, [your-store.myshopify.com]
is equal to our stores myshopify.com
domain, and [theme name] is equal to our theme name (If our theme name has spaces we'll need to wrap this in quote marks).
If we've successfully followed the steps to create our Shopify Theme Kit theme it'll now appear in our Shopify Admin. We can see this by opening Online store
from the left-hand panel and clicking Themes
below. From the Theme's page, we can scroll down to Theme library
which should now list our new Theme.
Watching our Shopify theme for changes
Now that we are connected locally to our online Shopify theme, we can begin watching our local files for changes. To begin watching our theme we need to navigate to our theme folder from our terminal, in the case the example we used previously, tailwind-shopify-theme
. Once in the theme folder, we can run the following command to start watching our files for changes:
theme watch
If we would like to see this in action, we can preview our new theme by finding it in the Theme library
section of the Themes
page and clicking Actions
> Preview
. Then in our local text editor, edit the index.liquid
file from the templates
directory and save it. We can then refresh our theme preview and see our changes in Shopify.
Installing Tailwind
Now that we can edit our Shopify themes locally we can get started using Tailwind. The first thing we need to do is create our package.json
file by running the following command and working through the steps - defaults are fine for this example:
npm init
Once our package.json file has been created we can install Tailwind using the following command:
npm install tailwindcss
Now that tailwind is installed we can create our tailwind.config.js
file using the following command:
npx tailwindcss init
This will create a tailwind.config.js
, let's open that tailwind.config.js
file. First, let's uncomment the key-value pairs in the future object, this will save us from receiving any deprecation warnings later. Now, we need to edit the purge
array and replace it with an object that has two keys, content
and enabled
. enabled
will be a Boolean
that will tell Tailwind whether we'd like to purge our styles or not, we'll default this to false
for now but we'll back to this later. content
will be an array
telling Tailwind where to look for our styles, we'll set it up to look in the following common Shopify folders.
purge: {
enabled: false,
content: [
'./layout/*.liquid',
'./templates/*.liquid',
'./sections/*.liquid',
'./snippets/*.liquid',
],
},
Now Tailwind is installed we need to create our source stylesheet. In the root of our Shopify theme, we can create a directory called src/css
and within this folder we'll create a file called application.css
. Once we've created our applications.css
we need to paste in the following code:
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
Editing the output CSS
By default, our new Theme Kit theme will come with a folder called assets
containing a file called application.scss.liquid
, we need to edit this file name and change it to application.css.liquid
. Once we've changed the name we must open the theme.liquid
file from the layout
folder and replace the following line:
{{ 'application.scss.css' | asset_url | stylesheet_tag }}
with:
{{ "application.css" | asset_url | stylesheet_tag }}
TailwindCSS in development
When using Tailwind in development we need to ensure we have all of Tailwind's styles at our disposal. Earlier when editing the tailwind.config.js
file we set enabled
on the purge
object to false
, this means that our Tailwind build will not remove any of Tailwind's utility classes. Whenever we are developing our theme we will need to ensure that enabled
on the purge
object in tailwind.config.js
is set to false
. Now that PurgeCSS is disabled we can run:
npx tailwindcss build src/css/application.css -o assets/application.css.liquid
This will build our application.css.liquid
file and include all of Tailwind's utility classes. Now we have access to all of these styles we can deploy the stylesheet using the following command:
theme deploy
Now that the development stylesheet deployed, we can watch our theme and begin building our theme using:
theme watch
TailwindCSS in production
When using Tailwind in production we need to ensure we remove any unused styles. As in Development, PurgeCSS is enabled/disabled in the tailwind.config.js
file. Whenever we finish development and want to push our production-ready code we'll want to set enabled
on the purge
object in tailwind.config.js
to true
. Now PurgeCSS is enabled we can deploy our stylesheet:
npx tailwindcss build src/css/application.css -o assets/application.css.liquid
This will build our application.css.liquid
file and remove any unused Tailwind utility classes.
You may want to set the enabled Boolean via an environment variable
Conclusion
You should now be set to start creating Shopify themes with Tailwind CSS. Happy creating!
If you’ve found this article useful, please follow me on Medium, Dev.to and/ or Twitter.
Top comments (14)
Just a note in case anyone has the same issue, I had to run:
brew install shopify/shopify/themekit
In place of:
brew install theme kit
I’ll make a note of that in the post - Thank you 🤘
The correct command is
brew install themekit
, without the space. This works correctly.Nice, have been looking into something like this for an upcoming project, some useful info in here.
I was wondering, do you know of any ways to use React for a shopify theme with their theme-kit? The documentation I’ve been going through so far hasn’t been that useful for what I’m hoping to do. Perhaps this will end up being an easier approach for me to take?
So I use Vue rather than React but I’m planning on doing a little walk through - It’ll be a similar process to this and you could definitely use the same approach for React. Once you’re working locally with Theme Kit you can treat it almost like any other project, just install React via npm and get a build tool like Webpack etc up. I think the Vue walk through I’m planning to do should be easily transferable to React.
Oh amazing, thanks. I’ll definitely keep an eye out for that, look forward to it! 🤘🏻
Thanks for this!
Thanks for this! I have been getting back into Shopify after helping another dev with some theme tweaking and have really come to enjoy using TailwindCSS. Gonna have to take this for a spin.
This is perfect! Simplest way I've seen to use tailwind. Thanks for the great guide!
Use some pics!
Hi Banji, which part of this would you find easier to follow with pictures?
That would be your choice, But I suggest to use some pics in your posts!
Keep it up
Happy Coding Liam Hall
Liam, I'm starting a shopify project soon. are you interested in working on it using tailwind?
Hi George, I’d love to hear more about this project, please drop me an email at hello@wearethreebears.co.uk