This is a Shopify starter MadeByShape use internally for projects. It is intended to be used on top of an existing Shopify theme.
Before running any commands first install node (v20.11.1) and shopify cli globally on your computer.
- Create a new repository for your new Shopify project.
- Add your theme files into the repository.
- Download a copy of this repository to your computer using the Code button above.
- Move these files into your repository.
- Login to your Shopify store and go to Online Store > Themes.
- Connect your new repository as a new theme.
Update the following lines in package.json
with your Shopify store ID e.g. xxxxxx-xx
.
"shopify-dev": "shopify theme dev --store=xxxxxx-xx",
"shopify-list": "shopify theme list --store=xxxxxx-xx",
"shopify-pull-dev": "shopify theme pull -d -n --store=xxxxxx-xx",
npm install
This step when vary per theme, but typically, you will need to add the following lines to your layout/theme.liquid
file:
Add your custom.css
stylesheet link within the <head>
tags.
<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">
Add your custom.js
script tag at the bottom of the <body>
tag.
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
Once you've completed these steps, you should be ready to start working on your theme!
Command | Description |
---|---|
npm run shopify-dev |
Runs the Shopify site locally, creating a new dev theme. |
npm run shopify-list |
Shows a list of all themes for the current shopify site you are working on. |
npm run shopify-pull-dev |
Pulls any CMS changes from you local dev environment into the repository. |
npm run dev |
Starts Webpack + TailwindCSS development. |
npm run build |
Runs Webpage + TailwindCSS production build. |
By default, the TailwindCSS config is set to prefix all classes with tw-
. This is to prevent any issues with the themes existing CSS classes.
Some Shopify theme files come with custom.css
and custom.js
included out the box, so be sure to check this.
You can either overrite these files if that is possible, OR you can update the naming of them in your setup. This would require you updating the watch:tailwind
script in package.json
and also the filename in webpack.config.js
.