Empower with Themplify

Empowering Shopify developers with an extensive tool for building high-quality themes.

About Themeplify

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”.

Deploy environments

Configure multiple deploy environments using a single config file.

Webpack usage

Harness the power of Webpack, a popular bundler and build tool, with our command-line tool. Webpack enables you to bundle not only JavaScript but also other web assets such as CSS, images, and fonts, providing a seamless and optimized development experience.

ES6+ support

Stay up-to-date with the latest advancements in JavaScript by leveraging ES6+ features. Our tool provides full support for modern JavaScript syntax, allowing you to write cleaner and more efficient code.

Sass/SCSS bundling

Simplify your CSS workflow by utilizing our tool's ability to bundle Sass/SCSS files. With our tool's integrated Sass/SCSS bundling feature, you can easily compile and bundle your stylesheets, enabling you to write modular and reusable CSS code.

Javascript bundling

Effortlessly manage your JavaScript files with our tool's built-in bundling capabilities. It intelligently combines multiple JavaScript files into a single bundle, reducing network requests and optimizing performance.

SVG to Liquid icons

Elevate your Shopify themes with stunning and scalable vector icons. Our tool streamlines the process of converting SVG (Scalable Vector Graphics) icons into Liquid, Shopify's templating language. This feature enables you to seamlessly integrate custom icons into your themes, enhancing the visual appeal and branding of your online store.

Version: 1.0.29

Fixed issue with builder modules on macOS M1 and M2. If you have an old version of the builder installed on your project, you can update the package by running the command: yarn upgrade @the-utd/themeplify

Developing Shopify themes has never been so easy. Get your new Shopify theme up and running in a matter of minutes by using Themeplify.

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.