Usage

Node.js version 14.0.0 or higher

• Install all dependencies with yarn

yarn add --dev @the-utd/themeplify

• Add and configure your config.yml file. The details you can take from README.md

development:
  password: XXXXXXXXXXXXXX
  theme_id: XXXXXXXXXXXXXX
  store: XXXXXXXXXXXXXX.myshopify.com
  preview_url: XXXXXXXXXXXXXX.shopifypreview.com <= [NOT REQUIRED]
  ignore_files:
    - config/settings_data.json

• Download your working theme

yarn download

Basic commands

yarn build – Build files

yarn deploy – Build and deploy files

yarn start – Build, deploy and watch files

yarn watch – Watch files

yarn server – Run Proxy server for the theme

yarn download – Download theme files

yarn zip – Archives the project

In January 2020, Shopify officially announced the end of support for Slate, a command-line tool for Shopify theme development. However, this news wasn’t upsetting for us, as support for existing Slate projects had already been difficult for some time. The presence of a problem is always the driving mechanism for finding a proper solution. A potential solution for the problem became a new challenge for us, but we were more than ready to accept it.

Test Objects

As we’ve been working with Slate closely for years, our team had a rough idea of what the new and much more powerful tool should bring to the development process.

But every great endeavor is preceded by rigorous preliminary research, where competitors and potential customers are to become the main source of analytics.

Our development team compiled a list of requirements from colleagues. To familiarize ourselves with competitors’ work, we used solutions that are publicly available on GitHub.

We were surprised to discover only a small number of abandoned ghost projects. Our company carried out a very thorough analysis of the essence of the existing builders, distinguishing their best features and carefully selecting only those features that would be necessary for the future tool.

Several months of persistent brainstorming by our team yielded great results. We found an excellent alternative named Themeplify.

What Is It?

Themeplify is a powerful command-line tool with an extensive set of features to boost the Shopify theme development process. The main inspiration behind the creation of the new scaffolding tool for working with Shopify themes was “from developers, for developers”.

The structure and logic of Slate were used as a starting point for building the functionality that we were lacking all these years. To create additional features, the daily routine of every Shopify developer was taken into account.

Our Tasks

The main mission of our company is to empower Shopify developers with an extensive tool for building high-quality themes.

The development process is easy to grasp on for developers of all skill levels, providing an extensive set of configuration options.

What Was the Emphasis?

The main features of Slate that we focused on while developing a new builder are:

• uploading files to Shopify;
• SASS/SCSS bundling;
• JavaScript bundling;
• SVG to Liquid icons.

In November 2020 Shopify announced the deprecation of Sass for theme development, causing a great outrage in the developers’ community. We, on the contrary, welcome the usage of all SASS/SCSS benefits, delivering minified versions of stylesheets for build bundles.

Uploading files to Shopify is based on the node-themekit package as it is the main purpose of the builder.

We implemented the support of PostCSS and automated styles minification when using build bundles, which allow the delivery of optimized files to the user. This is critical, as Shopify announced the end of support for Liquid styles files, meaning that Slate will no longer be an option for maintaining themes.

Webpack

Another distinctive feature for our builder is Webpack, which is also used in Slate v1. Usage of Webpack enables us to use all features of the latest JavaScript standards, such as promises, import/export, async/await and so on, as well as the use of Webpack Loaders. This allows integration of Vue and React single file components, usage of TypeScript and other features. All of these options can be configured using a single configuration file builder.config.js.