👋Getting Started
NodeJS v18+
Shopify CLI v3
The tech stack specified here.
Setting up the codebase
Step 1: Clone the repository
Clone the Accelerate repository from Github and install it locally by running pnpm install
(or yarn / npm).
Step 2: Create your branch
Create a new branch with a prefix of your name, i.e. felix/dev/{name_of_feature}
Step 3: Setup your environment variables
Check that the .env
is configured properly
SHOPIFY_SECTIONS_BEFORE_RENDER=""
SHOPIFY_SECTIONS_AFTER_RENDER=""
SHOPIFY_THEME_FOLDER=themes/accelerate
SHOPIFY_CMS_LOCALES=
SHOPIFY_CMS_IGNORE_SNIPPETS=color-swatches.json.liquid
SHOPIFY_CMS_IGNORE_LAYOUTS=theme.liquid
SHOPIFY_CMS_IGNORE_SECTIONS=
SHOPIFY_CMS_IGNORE_ASSETS=swatches.json,custom.css.liquid,custom.js
#SHOPIFY_CMS_NO_LOCALIZAZTION=true
#SHOPIFY_CMS_DELETE=true
The SHOPIFY_THEME_FOLDER
variable sets your current working directory for all development scripts. It can be set in the package.json
inline your dev script, or you can change it in the .env file based on what store you are working on.
Step 4: Configure your IDE
Ensure that your .gitignore
and IDE is set to not add any files from the /themes
directory to the main Git repository.
Setting up the Shopify CLI
Step 1: Make a copy of the theme
Always make a copy of the theme that you want to work on, as it's difficult to know who made changes beforehand.
Step 2: Configure your scripts
Configure your npm scripts in the package.json
with the following 2 scripts:
"{store-name}:pull": "shopify theme pull --path themes/{store-name}--store {store-url}.myshopify.com --theme {theme-id}",
"{store-name}:serve": "shopify theme dev --path themes/{store-name}--store {store-url}.myshopify.com --theme {theme-id} --live-reload hot-reload --theme-editor-sync",
Example
"bullstrap:pull": "shopify theme pull --path themes/bullstrap --store bullstrap.myshopify.com --theme 132308631746",
"bullstrap:serve": "shopify theme dev --path themes/bullstrap --store bullstrap.myshopify.com --theme 132308631746 --live-reload hot-reload --theme-editor-sync",
Step 3: Setup your Git repository
Once the configured, and if it is the first time working on the theme,
Run the
pull
script to download the theme onto your local machine.Use your terminal to
cd themes\\{store_name}
Run
git init && git add . && git commit -m "Initial Commit"
to initiate a Git repository for only the theme files.You also want to setup a GitHub repo using the
platter-base-{store-name}
naming convention and set it as a remote.If you previously worked on the store, make sure that any previous changes on your local machine are committed first, then run the
pull
script to get any changes from the theme. It's important now to check if there are any potential breaking changes. Any changes in thetemplates/*.json
files are what the merchants have done within the Theme Editor and will not be affected by any dev tools.Before starting development, it's important to make sure that any changes that were
pulled
in are committed, so that you have a clean slate to start from.
Step 4: Setup your dev scripts
Make sure that your dev
script is configured for the correct theme.
For Windows
"dev": "set SHOPIFY_THEME_FOLDER=themes/{store_name}&& npm-run-all --parallel dev:tailwindcss dev:esbuild dev:theme dev:assets:js",
Alternatively, you can set it directly via the ./.env
file.
Adding a space before the ampersands, as follows, will not work on Windows. SHOPIFY_THEME_FOLDER=themes/{store_name} &&
For Mac
"dev": "SHOPIFY_THEME_FOLDER=themes/{store_name}&& npm-run-all --parallel dev:tailwindcss dev:esbuild dev:theme dev:assets:js",
Now you can run
pnpm run dev
in your terminal and in a second terminalpnpm run shopify:serve
to push your changes up to the Shopify Store. This will also open a new window in your browser to see your changes as you make them.
Use of the Accelerated Developer Tools also requires a thorough understanding of the following.
Shopify Theme Architecture (including all subsections)
Performance Best Practices
The best example of semantic HTML we've seen is on stripe.com. Review their source code by inspecting the page on Chrome Dev Tools. You will see a strict adherence to <section> <header> <main> <footer> tags.
Getting Started
First Steps
Clone the Accelerate repository from Github and install it locally by running
pnpm install
(or yarn / npm).Create a new branch with a prefix of your name, i.e.
felix/dev/{name_of_feature}
Check that the
.env
is configured properly
SHOPIFY_SECTIONS_BEFORE_RENDER=""
SHOPIFY_SECTIONS_AFTER_RENDER=""
SHOPIFY_THEME_FOLDER=themes/accelerate
SHOPIFY_CMS_LOCALES=
SHOPIFY_CMS_IGNORE_SNIPPETS=color-swatches.json.liquid
SHOPIFY_CMS_IGNORE_LAYOUTS=theme.liquid
SHOPIFY_CMS_IGNORE_SECTIONS=
SHOPIFY_CMS_IGNORE_ASSETS=swatches.json,custom.css.liquid,custom.js
#SHOPIFY_CMS_NO_LOCALIZAZTION=true
#SHOPIFY_CMS_DELETE=true
The SHOPIFY_THEME_FOLDER
variable sets your current working directory for all development scripts. It can be set in the package.json
inline your dev script, or you can change it in the .env file based on what store you are working on.
Ensure that your
.gitignore
and IDE is set to not add any files from the/themes
directory to the main Git repository.
Working with the Shopify CLI on any store
Same as with the integrated dev tools, unless you are working on your own development store (platter-dev.myshopify.com) always make a copy of the Theme that you want to work on, as you never know who made changes beforehand.
Configure your npm scripts in the
package.json
with the following 2 scripts:
"{store-name}:pull": "shopify theme pull --path themes/{store-name}--store {store-url}.myshopify.com --theme {theme-id}",
"{store-name}:serve": "shopify theme dev --path themes/{store-name}--store {store-url}.myshopify.com --theme {theme-id} --live-reload hot-reload --theme-editor-sync",
Example
"bullstrap:pull": "shopify theme pull --path themes/bullstrap --store bullstrap.myshopify.com --theme 132308631746",
"bullstrap:serve": "shopify theme dev --path themes/bullstrap --store bullstrap.myshopify.com --theme 132308631746 --live-reload hot-reload --theme-editor-sync",
Once the configured, and if it is the first time working on the theme,
Run the
pull
script to download the theme onto your local machine.Once completed, use your terminal to
cd themes\\{store_name}
Run
git init && git add . && git commit -m "Initial Commit"
to initiate a Git repository for only the theme files.You also want to setup a GitHub repo using the
platter-base-{store-name}
naming convention and set it as a remote.If you previously worked on the store, make sure that any previous changes on your local machine are commited first, then run the
pull
script to get any changes from the theme. Its important now to check if there are any potential breaking changes, Any changes in thetemplates/*.json
files are what the merchants have done with the Theme editor and will not be affected by any dev tools.
Before starting development, it's important to make sure that any changes that were
pulled
in are committed, so that you have a clean slate to start from. Now you need to make sure that yourdev
script is configured for the correct theme.
For Windows
"dev": "set SHOPIFY_THEME_FOLDER=themes/{store_name}&& npm-run-all --parallel dev:tailwindcss dev:esbuild dev:theme dev:assets:js",
Alternatively, you can set it directly via the ./.env
file.
Adding a space before the ampersands, as follows, will not work on Windows. SHOPIFY_THEME_FOLDER=themes/{store_name} &&
For Mac
"dev": "SHOPIFY_THEME_FOLDER=themes/{store_name}&& npm-run-all --parallel dev:tailwindcss dev:esbuild dev:theme dev:assets:js",
Now you can run
pnpm run dev
in your terminal and in a second terminalpnpm run shopify:serve
to push your changes up to the Shopify Store. This will also open a new window in your browser to see your changes as you make them.
Last updated