# Getting Started

* [NodeJS](https://nodejs.org/en) v18+
* A package manager -> [npm](https://www.npmjs.com/), [Yarn](https://yarnpkg.com/), or [pnpm](https://pnpm.io/) will work.
* [Shopify CLI](https://shopify.dev/docs/themes/tools/cli/install) v3
* The tech stack specified [here](https://docs.platter.com/smart-theme/smart-theme/for-developers/tech-stack).

## 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

<pre><code><strong>SHOPIFY_SECTIONS_BEFORE_RENDER=""
</strong>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
</code></pre>

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:

```json
"{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

```json
"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, *<mark style="color:green;">**and if it is the first time working on the theme,**</mark>*

1. Run the `pull` script to download the theme onto your local machine.&#x20;
2. Use your terminal to `cd themes\\{store_name}`&#x20;
3. Run `git init && git add . && git commit -m "Initial Commit"` to initiate a Git repository **for only the theme files.**&#x20;
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.&#x20;

#### Step 4: Setup your dev scripts

Make sure that your `dev` script is configured for the correct theme.

**For Windows**

```json
"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.&#x20;

{% hint style="danger" %}
Adding a space before the ampersands, as follows, will **not** work on Windows. `SHOPIFY_THEME_FOLDER=themes/{store_name} &&`
{% endhint %}

**For Mac**

```json
"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.&#x20;

{% hint style="info" %}
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.
{% endhint %}

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

* [Shopify Theme Architecture](https://shopify.dev/docs/themes/architecture) (including all subsections)
* [Shopify Section input types](https://shopify.dev/docs/themes/architecture/settings/input-settings)
* Performance Best Practices
* [Semantic HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet)&#x20;
  * The best example of semantic HTML we've seen is on [stripe.com](https://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](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript)

## 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](http://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:

```json
"{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

```json
"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, *<mark style="color:green;">**and if it is the first time working on the theme,**</mark>*
   1. Run the `pull` script to download the theme onto your local machine.&#x20;
   2. Once completed, use your terminal to `cd themes\\{store_name}`&#x20;
   3. Run `git init && git add . && git commit -m "Initial Commit"` to initiate a Git repository **for only the theme files.**&#x20;
   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**

```json
"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.&#x20;

{% hint style="danger" %}
Adding a space before the ampersands, as follows, will **not** work on Windows. `SHOPIFY_THEME_FOLDER=themes/{store_name} &&`
{% endhint %}

**For Mac**

```json
"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.&#x20;

{% hint style="info" %}
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.
{% endhint %}