Hello, I'm engineer Kawashima.

In our previous article, we introduced how to build a test environment for Shopify. But perhaps the most annoying aspect of Shopify development is syncing and versioning each environment.
Anyone can edit from the code editor and theme editor on the management screen, and the ability to easily reflect files into a Shopify server with Theme Kit's deploy feature is also an advantage, but it will be a risk of ancestry when developing by multiple people.

In this article, I would like to introduce some of the things we’re doing in version control to make Shopify theme development safer for multiple people.

Theme deploy procedure of the Theme Kit to prevent ancestral reversion

Theme Kit is a very useful tool for reflecting locally coded files on your Shopify server. For the initial setting of Theme Kit, please refer to this past article. ）
But if the Shopify side — in a theme or code editor on your admin screen — is being edited, Theme Kit won’t be able to detect changes. theme watch haha. theme deploy If you upload the file, Shopify will overwrite it without mercy and cause a ancestral return.
Since there are a wide variety of content that can be edited from the theme editor, it is essential to formulate operational rules to prevent ancestral return especially when participating in the development of an already operating store.

Shopify Developers Discussing Theme Kit File Overwrite on GitHub theme deploy The following steps are described in this section.

• use version control and commit all your work
• run theme download before deploying to make sure you get all the recent changes and use your version control to see what exactly changed
• run theme deploy when you are finally ready.

Use git to commit all the implementation content 2. make sure that theme download is done before theme deploy, and resolve the difference 3. make sure there are no differences before theme deploy. https://github.com/Shopify/themekit/issues/647

and follow these steps Theme download step must be inserted before theme deploy By sharing the operational rules of "human error" among developers, we can reduce the risk of overwriting to a certain extent (the risk of human errors is inevitable...).
Especially if you are developing in multiple environments, the contents of production environment before reflection theme download It is important to keep it in sync with the locals.

In 2019, when I published this article, theme download Each command took about 3 minutes to get all the files on our Shopify server, but since v1.1.0 was released in August 2020 it has become a specification that only files with differences from our Shopify servers will be downloaded, making them relatively usable.

Supplementary: Theme deploy reflective specification

Theme Kit theme deploy If you use the command as it is without option All files in the destination environment are replaced by local file contents. (As of March 2021).
Files that do not exist in the local environment will be removed from Shopify server, and no logs will be logged on which files have been changed. If a client has added an image file or other file to the asserts directory, please note that if you don't sync it up front with theme download process, they will disappear from the server.
※ --nodelete If you add the option, you can do theme deploy without deleting files.
specification details of theme deplpy command It is also in the official document, so please try it once.

Theme Kit workflow (see above) theme deploy before theme download If you follow the "do it all" principle, you can reduce your overwrite risk but people will make mistakes and sometimes forget about the process.
As an alternative, if you write the file name that you want to reflect in a command as follows, it can prevent some degree of overwriting to unintended extent.

theme deploy sections/header.liquid assets/custom.css

But there’s still a risk of making mistakes or forgetting, and we want to reduce the number of places that people can reach as much as possible.
So (although still under review) we're currently experimenting with automated reflection to Shopify using DeployBot in our test store. If things go well, I'd like to summarize it separately:).

What we're doing with shopify version control

As described in Theme Kit’s deploy procedure, we have also done the following for proper version control.

use git

This is a big prerequisite: we manage the content of our theme folder on GitHub and make sure that each member’s work is committed and pushed.
We’re still exploring the right branch operations for Shopify theme development, but basically we link production to master and development environments to feature branches.
The content of the production environment is developed in a feature branch and used by the master branch before the production reflection. theme download make sure there is no difference, and then the contents of the feature branch theme deploy I often follow the procedure of ....
I think that it will be easier if we can combine well with deployBot.
One point: theme watch It is important to note that switching a branch while executing the command will reflect even unexpected files at once.

do not edit code from the management screen

If there are multiple developers, we basically develop with Theme Kit and do not edit code editor directly on the management screen as much as possible.
I think that there are few opportunities for clients to update files in the code editor, but if it is edited we ask you to let me know.

ignore difficult-to-manage files (such as setting_data.json) from Theme Kit and git management

The most difficult part of the theme development is probably the setting_data.json file.
(When I was just getting started with Shopify, I failed to manage the diff at Set_data.json and overridden it in production...)

json contains all the changes via a theme editor, and it is hard to synchronize between production and development stores (*). as I mentioned in my previous article The data registered from the theme editor cannot be migrated between stores using an app, and all images must be duplicated manually).
For this reason, we currently exclude the setting_data.json from both git and Theme Kit management.
It is an operation that allows a difference from the test environment in consideration of overwriting risk, assuming that client edits it from production theme editor.

For the operation without setting_data.json from Theme Kit, please refer to the following article:

When an admin change a set, it is written to config/settings_data.json on the server, where the theme watch is not a two-way street. The local copy of config/settings_data.json will not reflect settings made through the admin interface, and if you edit it locally, it will push up and overwrite what is on the server. https://thoughtbot.com/blog/shopify-theme-development

yml file, you can use the following to set up an ignore in Theme Kit:

環境の名前:
  password: パスワード
  theme_id: "テーマID"
  store: ストアURL
  ignore_files:
  - config/settings_data.json

json, i. e. , configuration information on the theme editor, so if you need to change it for customization reasons, we will edit it directly from the theme editor in the management screen (the setting_data.

Also, since the liquid file generated by an app such as a custom field is often overwritten depending on the edit content of the application side, it may be included in the ignore target if you do not need to check in the test environment.

instead

Shopify can be difficult to synchronize in both directions (server and local), so if version control is not properly done, it’s apt to experience unexpected ancestral trouble.
We’re also looking for ways to improve the ingenuity introduced in this article.
If you’ve got something like “I want to do this” or “This procedure works,” I would be delighted if you could ask me via Twitter and the comments form:)