Working with Shopify App. General Notions

Developing a Shopify app you have to face the fact that an out-of-the-box version provides no possibilities for proper teamwork. We already considered some aspects of this issue in our previous article about Shopify. Briefly, it has no special tool for merging changes, and when two developers work with the same file, they erase them. That’s why we decided to share some useful working tips that should help you avoid that situation in future.

Shopify offers a vast variety of store themes (see pic. 2). They are so called “versions” of your code. Each of them can be changed independently. As the code processing takes place solely on the Shopify side, developers use a server-located text editor to change the code (pic. 1). It resembles Sublime Text in a way.

If the theme is public (a default theme, that is the one to be displayed to users) there can be only one such theme. Others are available in the administrator panel, from where you can also launch nonpublic theme preview. The launched theme is recorded into a session, and then showed as a default one, until the session is expired. It partially solves the problem of collaborative development, but at the same time another issue pops out — merging changes from different themes.

There are apps that allow for changing code locally. It enables us to use any handy CVS for merging changes. Here are some of these apps:

Changes stored in a folder with a downloaded theme are traced in a real-time mode. After saving they are deployed to a server. Nevertheless, these apps still don’t solve the problem of server-sided code processing.

Shopify theme’s structure

A theme consists of template files with a “.liquid” extension and each of them has it’s own purpose, e.g. “collection.liquid” is used to display products collections, while “product.liquid” serves to readout information concerning a particular product. Each Shopify theme also contains the “settings_schema.json” file, which is a form for the theme’s look customization.

Liquid is a special open source template language, based on Ruby and created specially for Shopify. It is used for dynamic content loading into front-end. Liquid is the basis of Shopify themes, that’s why all templates have .liquid extension.

Theme Kit: practical example

We chose it due to it’s cross-platformity, as Desktop Theme Editor is available only for Mac OS X 10.7+. You can find Theme Kit installation guide here: http://themekit.cat/install/

Next thing you need to do is create a folder with a configuration file config.yml:

A configuration file example.

To get “theme_id” one needs to log in as an administrator, and after that go to:

Online Store -> Themes -> Customize Theme

To get Access Token find:

Apps -> Private Apps -> Create Private App

Then open the app and copy the password parameter.

Next you need to download a theme. Launch the terminal in the folder where the configuration file is and run “theme download”. When finished, the theme files should appear.

To download a specific theme as an argument one can specify a path to the file on a server: “theme download templates/404.liquid”.

Now you can start the editing process, but in order to make sure all changes will automatically be sent to a server after saving, one needs to run “theme watch”. By default, there are two workers monitoring the changes. This value can be changed in the configuration file with the help of the “concurrency” property.

If you want to control the changes and send them to a server manually you can use “theme upload”.

The difference from “theme download” is that calling this command without arguments doesn’t do anything instead of uploading all files on a server. To fully upload the changed theme one needs to use “theme upload */*”.

But even in this case the problem of changes overwriting won’t be solved, though it can be avoided in two ways:

  1. Use two themes.
  2. Adjust the working process so that developers will be unable to change the file simultaneously.

Summing up

We showed the way to change code locally by means of Theme Kit, which quite a good app thanks to it’s cross-platform nature and user-friendliness. If you have questions that we overlooked you can always ask us here.

Show your support

Clapping shows how much you appreciated JetRuby Agency’s story.