Setting up Shopify theme development environment
How to work with Shopify themes on my local environment?
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.
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:
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