Professional Shopify Theme Development with Theme Kit and Git

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: What is it and why should you use it?

Shopify Theme Kit is a powerful tool developed by Shopify to allow developers and store owners to manage Shopify themes easily and efficiently. It is a command-line tool that allows you to edit Shopify themes locally on your computer and then seamlessly push changes to the live store.

8 reasons to use Theme Kit:

1. Local development: Theme Kit allows you to develop themes locally on your computer, which gives you faster editing and better control over your changes. You can test changes without them appearing directly on your live store.

2. Versioning and Collaboration: Theme Kit allows you to use version control systems like Git, which facilitates collaboration between developers and teams. You can track changes, leave comments and make sure everyone in the team is up to date.

3. Efficient editing: the tool allows you to quickly edit and update large amounts of files. This is especially useful if you manage themes with a lot of customizations.

4. Troubleshooting: since you can test changes locally before committing them to the live store, you can detect and fix bugs or unwanted effects before they become visible to customers.

5. Automation: Theme Kit allows you to automate various processes and tasks, such as uploading images or updating theme files.

6. Security: with the ability to edit themes locally, you minimize the risk of accidental changes or errors on the live store.

7. Quick transfer: When you have completed changes, you can use Theme Kit to quickly and smoothly transfer your local changes to the live store.

8. Flexibility: Theme Kit supports various theme file formats, which allows you to have full control over the design and features of your store.

In summary, Shopify Theme Kit enables an efficient, secure and collaborative development environment for Shopify themes. It is a valuable tool for developers and store owners who want to optimize and customize their stores without compromising the integrity of the live store.

Why is custom theme development useful?

Customers should go for a custom theme development for their Shopify store if they are looking for a unique, engaging and customized online presence. Here are some reasons why investing in a custom theme can make sense:

Unique brand identity: A custom theme allows you to implement your branding and visual identity exactly the way you want it. You can match colors, fonts, layouts, and design elements exactly to your brand to create a unified brand identity.

Differentiation: a custom theme stands out from the standard themes used by many other stores. This helps you stand out from the competition and leave a lasting impression on your customers.

Optimized user experience: a custom theme allows you to tailor the user experience to the exact needs of your target audience. You can design the navigation, layout, and features to increase conversion rates and optimize the shopping experience.

Flexibility: Custom themes offer greater flexibility to include features and modules that are specific to your store's needs. You can ensure that the store has all the features you need without unnecessary clutter.

Better performance: custom themes can be optimized to offer better loading time and improved performance. This not only contributes to user satisfaction, but can also improve SEO rankings.

Future-proof: With a custom theme, you have control over the code base. This means you can make changes and adjustments to keep up with the changing needs of your business.

Long-term cost savings: although the initial cost of developing a custom theme may be higher, in the long run, the customizability, efficiency, and reduction of third-party dependencies can lead to cost savings.

Technological innovation: a custom theme allows you to leverage the latest technologies, trends, and best practices to create a modern and forward-thinking store.

Scalability: a custom theme can be tailored to your growth plans. It can be easily customized and expanded as your store grows and evolves.

Overall, a Custom Theme development offers the opportunity to create a unique and powerful online store that is perfectly aligned with the goals and requirements of your business.

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://shopify.dev/themekit.py | sudo python3

Alternatively, if you are using a package management tool, you can trigger the installation by entering the following in this order:

Homebrew (for Mac und Linux)

brew tap shopify/shopify
brew install themekit

Chocolatey (for Windows)

choco install themekit

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

Develop a new theme

Prepare the project folder

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, it 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.:

printf "config.yml" >> .gitignore

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: [your-store.myshopify.com]
  directory: ./dist
  timeout: 60s
  ignore_files:
    - config/settings_data.json

production:
  password: [your-password]
  theme_id: [your-theme-id-LIVE]
  store: [your-store.myshopify.com]
  directory: ./dist
  timeout: 60s
  ignore_files:
    - config/settings_data.json

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 the development of a new theme, the config.yml must still be missing at this point. Now perform the creation and customization of the config.yml as already described in the previous section under "Customize 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 opens the preview of the theme directly in your browser. Also, Theme Kit now monitors every saved change in the code and transfers it directly to the development theme in the Shopify backend.

Finish editing the theme

When you're done editing the theme for now, or even finally, you need to push the changes you've made to Git via their Git management. Describe your changes here in detail so that your team knows 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