Professional Shopify Theme Development with Theme Kit and Git

In order to meet individual merchant needs and create even more attractive shopping experiences for customers, developers work on the code level of Shopify themes. Themes can be customized here or even created from scratch. In addition to the online theme editor, Shopify provides Theme Kit, a cross-platform tool for theme development at the local level. The connection of additional software for workflow optimization such as Git is also possible. Learn how to install Theme Kit and how to work with it in your development team in this post.

Theme Kit development environment setup

Before you start developing your Shopify themes locally, you need to prepare the development environment. In addition to your preferred code editor, you will need

• Theme Kit

• Git

• A software for Git management, e.g. Sourcetree or GitAhead

• a hosting provider for project data, e.g. Bitbucket or SourceForge

Install Git

With Git, you control the versions of your themes, and with the addition of Git Management, you get a graphical user interface that makes Git easier to use. Finally, with the help of a hosting provider, you put your theme development data online, giving the entire team access to it. You can find the necessary installation files on the websites of the respective providers.

Install Theme Kit

To install Theme Kit on Mac or Linux, run the following installation script in the appropriate terminal:

curl-s
https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install |
sudo-python

Wenn Sie ein Paketverwaltungstool nutzen, können Sie die Installation alternativ mit folgenden Eingaben in dieser Reihenfolge auslösen:

Homebrew (für Mac und Linux)

brauen tap shopify/shopifybrew install themekit

Chocolatey (für Windows)

Choco Themekit installieren

If you want to install Theme Kit manually, you can find the executables here.

Develop a new theme

Prepare the project order

You start the development of a new Shopify theme by creating a project in your chosen hoster and an associated digital archive, the so-called repository. For this we recommend the following settings:

• Project name: Customer name

• Repository name: URL of the customer store (yourshop.myshopify.com)

• Repository access level: private

• Include README: Yes, with template

• Control system: Git

Once you have made all the settings, install the repository on your computer and open the empty project folder in your local code editor. Since every Shopify theme is based on the same folder structure, this must now be created in the project folder. The following structure is mandatory for the theme project folder: To achieve this, enter the following commands one after the other in your console:

Touch .gitignore Code .gitignoreconfig.yml

After you have created a .gitignore file with these commands, opened it with your code editor, and inserted a config.yml into it, save your progress and perform the following steps.

Generate a password for access to the Shopify backend

By using an API key, you link your local development environment to the themes in the Shopify store. To do this, create a new Private App in the Shopify backend using the Manage Private Apps link in the Apps menu item:

Use the button to create a new private app. Important: At this point, you must grant the app access to the theme files. Accordingly, set the access under Show Inactive Admin API Permissions to "Read and Write":

Customize the Config.yml

Using your console and Shopify Theme Kit, now customize the config.yml with the following input: theme configure -p=[your-password] -s=[you-store.myshopify.com] -t=[your-themeid] Here, put the password you just created, the URL of the store, and the theme ID in the appropriate sections. To find the theme ID, open the Theme Customizer under Customize in the Theme Library. There you will find the ID in the URL: https://leos-ringschmiede.myshopify.com/admin/themes/80525590591/editor Be sure to use the ID of an unreleased theme (your Developement theme) from the library, never the current theme (live theme).

Add a new theme or duplicate an existing one if necessary.

Open your config.yml and enter the ID of the published theme in the marked places (LIVE). Make further adjustments if necessary until your file looks like this:

Development: password: [your-password]

theme_id: [your-theme-id-development]

store: [you-store.myshopify.com]

directory: ./dist

Timeout: 60s

Ignore_files:

- config/settings_data.json Production:

Password: [your-password]

theme_id: [your-theme-id-LIVE]

store: [you-store.myshopify.com]

Directory: ./dist

Timeout: 60s

Ignore_files:

- config/settings_data.json the settings:

password: [your-password]

theme_id: [your-theme-id-LIVE]

store: [you-store.myshopify.com]

directory: ./dist

Timeout: 60s

Ignore_files:

- Assets/*

- Layout/*

- Sections/*

- Clippings/*

- Templates/*

Now download the theme for editing to your computer via your console with the following command: theme download.

Also create a README.md: touch README.md

Your project folder should now have the structure shown above.

Get started with the development of a theme

If you would like to join an already running theme development, download the already existing respository via their Git management or the console to your own computer. The structure of your local project folder now contains the following elements:

.gitignore dist assets configuration layout locales sections snippets templates
README.md

Compared to developing a new theme, the config.yml must still be missing at this point. Now perform the creation and customization of the config.yml as described in the previous section under Customizing the Config.yml.

Finally, download the theme file with the following console command: theme download

Work in a team

Retrieve the current development status

Since you are working with your team on the development, it is important to always download the latest version before you start or continue your own editing of the theme. This ensures that you have all the changes made by other developers. To do this, execute a Git pull with the following command: git pull

Prepare the editing of the theme

Before making any changes to the code, always run this command first: theme open && theme watch.

This will open the preview of the theme directly in your browser. Also, Theme Kit now monitors any saved changes in the code and transmits them directly to the Developement theme in the Shopify backend.

Finish editing the theme

When you are done editing the theme for now or even finally, you need to push the changes you made to Git via their Git management. Here, describe your changes in detail so that your team will know what tasks you have completed in case of any further development steps.

Finally, run the following command to also overwrite all data in the live theme with your changes via Theme Kit: theme deploy{" "}--env=production

Need help with your Shopify theme development? Just contact us.