How to set up your local environment for Shopify theme customization

Shopify theme customization can be done in the admin panel. If your client requires specific customization, you need to add custom code to the Shopify theme files. Shopify provides its custom template language called Liquid for further customization. In this post, I will show you how to set up your local development environment for Shopify theme customization.

Prerequisites: you need to know how to set up a Shopify store, which is fairly easy to do, even if you have no technical knowledge. All you need to do is to go through the wizard provided in setting up and running an online store on Shopify.

Shopify Theme Kit

Theme kit is a command-line tool that you can utilize in developing new themes or customizing themes. After we set up the store, we need to install a Theme Kit so that we can download the theme files for customization. You also need to have basic knowledge of working with the command line/terminal.

Installing Shopify Theme Kit

As I mentioned before, first set up your online store on Shopify. Then, follow the instructions below according to the operating system you work on. Theme Kit is platform-independent, therefore, you can run on macOS, Linux, or Windows.

Installing on Windows

1.) install Chocolatey, a package manager for Windows

2.) Then, open the command prompt in Windows, and run choco install themekit

Installing on Linux

run the command curl -s https://shopify.dev/themekit.py | sudo python in the Terminal

Installing on macOS

1.) install Homebrew

2.) then, in the terminal, run the following commands

brew tap shopify/shopify

brew install themekit

Preparing to download Shopify theme files

You need to have three parameters to download your Shopify theme files to your local environment.

  1. API password
  2. Store identifier
  3. Theme identifies

Creating an API password

First, we need to create a private app.

Click on Apps the admin sidebar, and then Manage private apps in the Shopify admin panel

Shopify admin panel

When you click on Manage private apps, it will prompt the following alert, click on Enable private app development, agree with the terms of use, and click on Create private app.

Shopify enable private app alert
Shopify terms
Shopify create private app

Enter a name for your app (You do not need to have the name of the store ) and email in App details.

Afterward, click on “Show inactive Admin API permissions“. This will show more configuration options.

Shopify create app settings

Scroll down and find the themes section. Now, Change the themes access scope to Read and write. The Shopify admin panel will prompt you to save the changes at this moment. Click on the Save button.

Shopify theme access scrope

When you click on the Save button, there will be another prompt to create the private app. Click on the Create app button.

Shopify create app

This will create an API password. You can see that in the Admin API section. Copy the password and paste it into a text editor.

Shopify Admin api

Getting the store identifier

When you create the Shopify store the URL of the store should be like

https://mystore.myshopify.com

The store identifier is the mystore.myshopify.com of the URL

Getting the theme Identifier

Open the command prompt/ terminal and run the following command

theme get –list –password=[your-password] –store=”[your-store.myshopify.com]”

Ex:

theme get –list –password=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 –store=mystore.myshopify.com

This gives the theme id in a square bracket

[126011244734]

Installing Shopify theme files to the local environment

First, create a folder/directory and go to that folder/directory in the command prompt/terminal

and then run the following command

theme get –password=[your-password] –store=”[your-store.myshopify.com]” –themeid=[your-theme-id]

Ex:

This will download all the theme files and an additional config.yml file that contains configuration data.

Shopify theme files in local environment

Watch command

When you make changes to the theme files code, you can see changes live. run the following command on the terminal

theme watch –allow-live

Setting an ignore rule

As a developer, you would not want to override the styles of the theme specified by your client. The client would use the Shopify online store editor to customize the appearance of the store. All the settings selected (using the online store editor) are stored in the config\settings_data.json file. Therefore, it is important NOT to override this file with your local changes. To do this, you can specify an ignore rule as below in the config.yml file.

Note: If you are in Windows, you the backslash( \ ) to when setting the path; in macOS and Linux use the forward-slash( / ).

config.yaml file with igonre rule

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *