Shopify ThemeKit for local theme development [Install &?Setup]
Mohamed El-Ghorfi
Shopify Frontend Developer | Shopify Apps | Advanced Themes Customization | Shopify Expert Consultant |
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
#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.
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,
— 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.
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
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 !