Setting up Shopify theme development environment

How to work with Shopify themes on my local environment?

To get access to the owner store you need to create an account on Partners of Shopify.

The Partners is a platform for Shopify's partner developers or agencies! You can get API keys for App development, create owner stores, or request access to owner stores.

To work with themes on your computer you need to download the software Themekit created by shopify for this purpose it is available for download with Chocolately.

The Chocolately is a package manager for Windows like MacOs homebrew or APT/pacman/RPM for Linux and has the purpose of facilitating the installation of software via command line as well as keeping these software updated..

After installing Chocolately you can install the themekit by typing in the command line.

choco install themekit

Adding a store

link de teste In the shopify partners panel you go to the stores tab on the left sidebar and click on the add store button on the right side as shown in the image below.

Then click on managed store and in the address of the virtual store, put the myshopify url of the store that the customer (store owner) must provide you.

Installing the Theme Kit Access

To get the theme api key install the Theme Kit Access in the store.

Click to install the app and it should open a login screen for your partner account

Just click on your account then it will open an Oauth login screen to install the app from the store

Now click on Create Theme Kit Password Enter your name and your email the password will go to your email Click create password

Go to your email inbox You should have received an email with the title store-url.myshopify.com generated a Theme Kit password for you Enter this email click access the Theme kit password It will open an app page with the password click on display password and copy this password

Duplicating the theme

Before we download the theme to our pc, you must look for the id of the theme that will work. A good practice is to make a copy of the theme and always work on the secondary theme so as not to break anything on the production site. To create a copy just go to Virtual Store / Themes / Actions / Duplicate

Once this is done, the theme will be created.

Now we need to write down the Id of the theme that we are going to work on. there are several ways to do this, the simplest is to open the online code editor or customize it from the store and get the id in the url as below. The way to customize it is Online store / Themes / customize button (on the desired theme) or code editor actions button

Downloading the theme

Now that you already have the api key open the terminal in the folder where you want to download the theme from the store

Type the following command

theme get -s [url-da-loja].myshopify.com -p shptka_0fa2ecb48d3f4393c60b15b22e274be1 -t 1233333

The flag -s receive the store, the flag -p receive the password and the -t receive the theme id.

Common mistakes that happen is having the slash at the end of the store domain myshopify.com/

Another mistake is to put https:// (When you use the themekit with the private app key which is an old and deprecated method of doing this, https in front works)

Working on the theme

To open the VSCode in the folder where you download the themekit you can type in the terminal:

code .

Or you can use another editor of your choice.

The themekit now loaded into your folder the whole theme and created a file called config.yml in this file are the store credentials and theme id, so it is not necessary to enter this information, just use the commands theme get to get the theme of the store and theme deploy to upload the changes in the theme. You can use the theme watch command so that every time you save a change the themekit automatically uploads the file to the store this is a very efficient method of working

If you using the production theme you can use the flag allow-live

theme watch --allow-live

To upload changes to the store, be very careful with stores in production

If you are going to work with code versioning, it is interesting to add the file config.yml to gitignore as anyone with this file can change and delete store themes for more information about the themekit see the documentation