search
Get a demo

👋Getting Started

hashtag
Setting up the codebase

hashtag
Step 1: Clone the repository

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

hashtag
Step 2: Create your branch

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

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

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

hashtag
Setting up the Shopify CLI

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

hashtag
Step 2: Configure your scripts

Configure your npm scripts in the package.json with the following 2 scripts:

Example

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

hashtag
Step 4: Setup your dev scripts

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

For Windows

Alternatively, you can set it directly via the ./.env file.

triangle-exclamation

Adding a space before the ampersands, as follows, will not work on Windows. SHOPIFY_THEME_FOLDER=themes/{store_name} &&

For Mac

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

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

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

hashtag
Getting Started

hashtag
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

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.

  1. Ensure that your .gitignore and IDE is set to not add any files from the /themes directory to the main Git repository.

hashtag
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.comarrow-up-right) 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:

Example

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

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

Alternatively, you can set it directly via the ./.env file.

triangle-exclamation

Adding a space before the ampersands, as follows, will not work on Windows. SHOPIFY_THEME_FOLDER=themes/{store_name} &&

For Mac

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

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

PreviousFile StructureNextScripts

Last updated