👋Getting Started

• NodeJS v18+

• A package manager -> npm, Yarn, or pnpm will work.

• 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,

1. Run the pull script to download the theme onto your local machine.

2. Use your terminal to cd themes\\{store_name}

3. Run git init && git add . && git commit -m "Initial Commit" to initiate a Git repository for only the theme files.

4. You also want to setup a GitHub repo using the platter-base-{store-name} naming convention and set it as a remote.

5. 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 the templates/*.json files are what the merchants have done within the Theme Editor and will not be affected by any dev tools.

6. 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",

5. Now you can run pnpm run dev in your terminal and in a second terminal pnpm 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.

If you are working on an old store on an older version, there might be breaking changes that need to be reviewed. This is especially likely if someone else worked on the store previously, so it is important to check the diff after running the dev script for the first time.

Use of the Accelerated Developer Tools also requires a thorough understanding of the following.

• Shopify Theme Architecture (including all subsections)

• Shopify Section input types

• Performance Best Practices

• Semantic HTML

  • 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.

• Accessibility Best Practices

Getting Started

First Steps

1. Clone the Accelerate repository from Github and install it locally by running pnpm install (or yarn / npm).

2. Create a new branch with a prefix of your name, i.e. felix/dev/{name_of_feature}

3. 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.

4. 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

1. 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.

2. 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",

3. Once the configured, and if it is the first time working on the theme,

   1. Run the pull script to download the theme onto your local machine.

   2. Once completed, use your terminal to cd themes\\{store_name}

   3. Run git init && git add . && git commit -m "Initial Commit" to initiate a Git repository for only the theme files.

   4. You also want to setup a GitHub repo using the platter-base-{store-name} naming convention and set it as a remote.

   5. 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 the templates/*.json files are what the merchants have done with the Theme editor and will not be affected by any dev tools.

4. 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 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",

5. Now you can run pnpm run dev in your terminal and in a second terminal pnpm 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.

If you are working on an old store on an older version, there might be breaking changes that need to be reviewed. This is especially likely if someone else worked on the store previously, so it is important to check the diff after running the dev script for the first time.