This repository contains a starting point for Shopify Online Store 2.0 Theme development using Tailwind CSS and the default Dawn theme.
💡 On june 29, Shopify introduced a new git-based workflow. To learn more, visit the create a theme guide or visit shopify.dev.
A short description of this workflow:
- Edit theme locally using the Shopify CLI, Tailwind and Webpack
- Commit changes to feature branch
- Merge feature branch with main branch once feature is implemented
- Automatically publish the production build to the
dist
branch using Github Actions - Shopify automatically syncs with the
dist
branch.
- Tailwind CSS
- The main css file is located in
src/index.css
- This file will be built to
assets/index.css
- The main css file is located in
- Webpack
- All
src/entries/**.js
files will be sourced as webpack entry and the output file can be found in theassets
directory. All entries get the extension.bundle.js
instead of.js
.
- All
- Shopify CLI
- Github Actions to deploy the theme to the dist branch on push to the main branch
You can copy the Lighthouse Github Action from the original Dawn theme repository to track the performance of your theme on every push.
- Because an extra build step is involved, you need to manually copy changes
made in the Shopify theme editor. Those changes will be committed to the
dist
branch. - The tailwind
normalize.css
breaks some default styling of the Dawn theme. - The Dawn theme contains the following line in some CSS files:
Because of this line, the Tailwind font sizes and spacing do not look as expected. Please customize
html { font-size: 62.5%; }
tailwind.config.js
to edit the appearance of the utility classes.
Run the following commands:
git clone git@github.com:wesselvanree/shopify-theme-tailwind.git
cd shopify-theme-tailwind
npm install
Make sure the assets/index.css
output file is included in the
layout/theme.liquid
file. Add this line of code under the base.css stylesheet
tag.
<!-- line 98 -->
{{ 'index.css' | asset_url | stylesheet_tag }}
Once you've made your first commit, a dist branch will be created on Github. Use
the Shopify Github integration to sync your theme with the dist branch by going
to your admin dashboard
> Online Store
> Themes
> Add Theme
>
Connect from Github
.
To use React, install the following packages:
npm install react react-dom
Now you can use React in your javascript files.
You will need 2 terminal windows:
-
Serve your Shopify theme
- First, log in to your store if you was not logged in already.
shopify login --store your-store-name.myshopify.com
- Serve your theme to your development store
shopify theme serve
- First, log in to your store if you was not logged in already.
-
Compile your code: in a separate terminal window, run
npm start
to start watch for file changes and build development bundles.
If you prefer to use one single terminal window, you can add this script to
package.json
underneath watch:js
:
// package.json
"watch:theme": "shopify theme serve"
This repository contains a Github Action that uses
JamesIves/github-pages-deploy-action@4.1.4.
This action does not activate Github Pages in your repository but just commits
the build to another branch. Currently, the action is configured to deploy the
build to the dist branch. You can easily customize this by editing
.github/workflows/deploy.yml
.
Alternatively, you can create the build manually. Run npm run build
to build
for production. You can use the
Shopify Github integration
to track a branch in your Github repository.
First, install react
and react-dom
:
npm install react react-dom
Then paste the following code inside src/entries/index.js
:
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const [count, setCount] = useState(0);
const increase = () => {
setCount(prevCount => prevCount + 1);
};
const decrease = () => {
setCount(prevCount => prevCount - 1);
};
return (
<div className="px-5 py-28 max-w-md mx-auto">
<h2 className="text-5xl font-bold">React example</h2>
<p className="text-3xl font-semibold">
Count: <span className="text-blue-600">{count}</span>
</p>
<div className="mt-8">
<button
onClick={decrease}
className="py-2 px-8 rounded border border-gray-300 hover:bg-gray-100 transition-colors mr-2"
>
Decrease
</button>
<button
onClick={increase}
className="py-2 px-8 rounded border border-gray-300 hover:bg-gray-100 transition-colors"
>
Increase
</button>
</div>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('react-root'));
Now we need to add the react-root
element and index.bundle.js
to a template
to use it. I will add it to layout/theme.liquid
:
<!-- line 24 -->
<script src="{{ 'index.bundle.js' | asset_url }}" defer="defer"></script>
...
<!-- line 118 -->
<div id="react-root"></div>
...
And now you can enjoy your React component.
- Please do not use a npm package for everything, always consider if the package is worth the larger bundle size.
If you have any suggestions to improve this repository, please open an issue. I would be happy to hear from you.