Shopify ThemeKit for local theme development [Install &?Setup]

Shopify ThemeKit for local theme development [Install &?Setup]


Hello Everyone,

Welcome to this new article, today we gonna talk about Shopify ThemeKit, how we can install and set it up on our local machine?.

The ThemeKit, is a tool that allows developers to create, customize, and manage Shopify themes. It is a command-line tool that enables developers to work with theme files locally and deploy changes to a Shopify store. With ThemeKit, developers can create new themes from scratch or customize an existing one using some Shopify theme templates and styles.

ThemeKit also provides a set of commands to manage and deploy changes to the desire theme, also it allows us to watch and directly make change to the theme. Including commands to download, upload a theme, and manage theme assets.

It is a useful tool for developers working on Shopify stores, as it allows them to efficiently manage and customize their store’s theme without having to use the Shopify web interface.


#Headlines

  • Install Shopify Theme Kit.
  • Get API Access.
  • Configure an existing theme or use a new one.


#1 Install Shopify ThemeKit:

? Windows Chocolatey Installation

choco install themekit        

Learn more here about installing Chocolatey.

? Linux Installation

curl -s https://shopify.dev/themekit.py | sudo python        

? macOS Installation

brew tap shopify/shopify

brew install themekit        

#2 Get API?Access

Go to Shopify Store, and search 'Theme Access'. Or go directly here.

  • Click INSTALL.

  • Click ‘Install App’.

  • From the application interface, hit ‘Create Password’.


  • Enter Your Name and Your Email. Then click ‘Create Password’.

  • Access Account is created, now


Check your Email, you will receive an email, open it. And click ‘Get Password’.

From the window opened, click ‘Show password’.

Voilà, here is your API Password. Save it for later, we will need it in the next steps.

Here is a video tutorial on how to get the API password:

#3 Configure an existing theme or use a new?one

To configure a theme, follow these steps:

— We need to get the theme ID from our Store, go to desire theme, then click customize. Now we’ll get the ID from the URL,

E.g: https://mohamed-dev-store.myshopify.com/admin/themes/138146578726/editor

— The ID is: 138146578726. — Create a new folder. ?—?In the created folder, create an empty file name it ‘config.yml’. ?—?Copy/paste and replace entries as following

dev:
  password: <API password from the previous step>
  theme_id: <Theme ID>
  store: <Store URL>        

E. g, in my case, this is my config file:

dev:
  password: shptka_76e3720a67c7cc0cea7f172e1e99ed6e
  theme_id: 138146578726
  store: mohamed-dev-store.myshopify.com        

— Now, now open up a terminal in the created folder and run the following command theme get -e dev or theme download -e devto download the theme to your local machine.

— Or run the following command on your terminal.

theme get --password=<API password from the previous step>
--store="<Store URL>" --themeid=<Theme ID>        

E. g:

theme get --password=shptka_76e3720a67c7cc0cea7f172e1e99ed6e
--store="mohamed-dev-store.myshopify.com" --themeid=138146578726        

ThemeKit Commands

Run the following command to get help about ThemeKit command.

theme help        

Get a list of all the flags for a command

theme [command] --help        

Command to create a new theme

theme new --password=<API password from the previous step> --store="<Store URL>" --name="Mohamed Theme"        

Command to watch directly on a theme:

theme watch -e dev        

Command to deploy to a specific theme:

theme deploy -e dev        

Command to get latest changes from a specific theme:

theme get -e dev        

Get a Specific file:

theme get -e dev sections/section-2.liquid        

Command to remove specific file or multiple files:

theme remove -e dev sections/section-1.liquid        
theme remove -e dev sections/section-1.liquid sections/section-2.liquid        

Manipulate commands on live?theme:

In order to use these commands on the live theme, we should force writing on the theme, especially on the command that pushes on theme, we should add a flag --allow-live

E.g: We want to deploy our local version to the live theme, we type the following command and adding the --allow-live parameter.

So, our command became:

theme deploy -e live --allow-live        

Now you should be able to use Themekit with your Shopify Store.

#Useful Resources





So, this is the end of our article today, I hope you learned something from it.

Have a wonderful, great day. Don’t hesitate to contact me if you have any questions. If you face any issues, you can reach out to me.

Follow me for?more:

Buy Me a Coffee, Maybe?
Quratulain Shoro

Senior Frontend Software Engineer @LeoaTech | Shopify Developer

1 年

Shopify theme kit was a big step forward in making theme development easier for developers but one of the biggest drawback it brought was in case a merchant or fellow developer intentionally or unintentionally made any changes to the theme code using theme editor, those changes wouldn't be reflected in our local environment, inviting conflicts and several bugs. And that's when Shopify CLI and Shopify GitHub integration was introduced if im not wrong and it ensured that changes made in the Shopify theme editor are reflected in the local environment and vice versa. I've a detailed series written on this topic, you can check it out if you want to learn more. https://dev.to/quratulaiinn/setting-up-a-local-environment-for-shopify-theme-development-2ema

回复
El Mehdi Jilali

Shopify Developer & Expert

1 年

I wonder what’s the use case of Themekit now after CLI was released. It already covers all features of themekit & provides bunch more. Maybe working on a older theme ? If yes, i feel that the merchant should consider moving to OS 2.0 asap to benefit from the full experience the the theme customizer is providing !

要查看或添加评论,请登录

Mohamed El-Ghorfi的更多文章

社区洞察

其他会员也浏览了