Day 4: Working Shopify Theme Customization Locally with Theme Kit

Welcome to Day 4 of our Shopify Theme Customization series! In today’s article, I’m going to guide you through the process of working with your Shopify theme locally using Theme Kit. By the end of this tutorial, you’ll be able to download your theme's code, edit it on your local system, and sync those changes with Shopify.

Why Use Theme Kit?

Theme Kit is a powerful Shopify development tool that allows you to manage and edit your Shopify theme directly from your local system. This makes development faster and more convenient, especially for large themes or when working on multiple themes.

Step 1: Create a Custom Application for Admin Access Token

To use Theme Kit, you’ll need an Admin Access Token. Follow these steps to generate one:

• Open your Shopify Admin Head to your Shopify admin panel.
• Go to Settings On the lower-left side of your admin dashboard, click on Settings.
• Click on Apps and Sales Channels Scroll down the list and click on Apps and Sales Channels.
• Develop Apps Look for the Develop Apps button at the bottom and click on it. This will allow you to create a custom app for your store.
• Create an App Create a new app by clicking Create App. Name the app something like “Theme Kit Development” or “MyTheme Customizer.”
• Admin API Integration Click on Configure Admin API Scopes, then search for and select the Theme (read/write) scope. This will grant the app access to your theme files.
• Install the App After configuring the scope, click Install to install the app. Once the installation is complete, reveal your Admin Access Token. Make sure to save this token securely, as you’ll need it later.

Step 2: Install Chocolatey and Theme Kit

Next, we need to install Theme Kit. To do this, we'll first use Chocolatey, a Windows package manager.

Step 2.1: Install Chocolatey

1. Open CMD or PowerShell as Administrator Open a command prompt or PowerShell window with administrator access.
2. Run the Chocolatey Installation Command Paste the following command into your command prompt or PowerShell window:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

• Follow the Instructions Once you run the command, follow the on-screen instructions to complete the installation of Chocolatey.
• Restart CMD with Admin Access After installation, close the command prompt or PowerShell window, and reopen it with administrator access again.

Step 2.2: Install Theme Kit

• Run the Theme Kit Installation Command In your command prompt, run the choco install themekit command to install Theme Kit:
• Check the Installation : Once the installation is complete, restart your command prompt or PowerShell again and type the following to verify the installation: theme

You should see the Theme Kit version displayed if it installed successfully.

Step 3: Download Your Theme Code Locally

Now that we have Theme Kit installed, let's download the theme code to your local system.

Step 3.1: Create a Working Folder

1. Create a New Folder Navigate to the folder where you want to work and create a new folder. Name it after your theme (e.g., “Dawn Theme,” “Symmetry Theme”).
2. Get the Theme ID Go to your Shopify admin, click on Online Store > Themes, and select the theme you want to work on and click customize button. Look at the URL in your browser, and copy the theme ID (a long number after /themes/ in the URL).

Step 3.2: Set Up Your Configuration File

1. Create a Config File In your local theme folder, create a new file named config.yml.
2. Paste the Following Code into config.yml:

development:

password: <Copied Token From APP>

theme_id: "<ThemeId>"

store: <yourstore.myshopify.com>

Step 3.3: Download the Theme Code

1. Open VS Code Navigate to your folder and open it in Visual Studio Code (or your preferred code editor).
2. Open VS Code Terminal Open the terminal in VS Code by pressing Ctrl + ` (backtick).
3. Run the theme get Command In the terminal

Step 4: Sync Changes with Shopify

Now that you have the theme code on your local system, you can edit it and sync the changes with Shopify.

1. Connect server's theme with local :- Run the theme watch or theme watch --allow-live command it connect server's theme with local theme.
2. Edit and Save Make changes to your theme files in VS Code. As you save your changes, Theme Kit will automatically upload them to your Shopify store.

In today's article, we walked through how to take your Shopify theme code to a local environment using Theme Kit. We started by creating a custom app for admin access, installed Chocolatey and Theme Kit, and synced the theme with Shopify. Now, you're ready to make local edits and have them reflect live on your store instantly.

If you’re finding this series useful, please like and share this article with your friends or anyone in your circle who is looking to learn Shopify development! Your support helps this content reach a wider audience.

I’m also planning to create dedicated video tutorials soon, so stay tuned! If you have any doubts, feel free to drop a comment below, and I’ll be happy to assist.

Social Links :-

Instagram :- https://www.instagram.com/vikasanjana167/

Facebook :- https://www.facebook.com/profile.php?id=61565443835183

X/Twiter :- https://x.com/VikasAn78596462