Node.js version 14.0.0 or higher
\nyarn add --dev @the-utd/themeplify\r\n\n
development:\r\n password: XXXXXXXXXXXXXX\r\n theme_id: XXXXXXXXXXXXXX\r\n store: XXXXXXXXXXXXXX.myshopify.com\r\n preview_url: XXXXXXXXXXXXXX.shopifypreview.com <= [NOT REQUIRED]\r\n ignore_files:\r\n - config/settings_data.json\r\n\n
yarn download
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.
\nAs 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.
\nBut every great endeavor is preceded by rigorous preliminary research, where competitors and potential customers are to become the main source of analytics.
\nOur development team compiled a list of requirements from colleagues. To familiarize ourselves with competitors’ work, we used solutions that are publicly available on GitHub.
\nWe 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.
\nSeveral months of persistent brainstorming by our team yielded great results. We found an excellent alternative named Themeplify.
\nThemeplify 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”.
\nThe 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.
\nThe main mission of our company is to empower Shopify developers with an extensive tool for building high-quality themes.
\nThe development process is easy to grasp on for developers of all skill levels, providing an extensive set of configuration options.
\nThe main features of Slate that we focused on while developing a new builder are:
\nIn 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.
\nUploading files to Shopify is based on the node-themekit package as it is the main purpose of the builder.
\nWe 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.
\nAnother 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.
\n","features":{"features":[{"tabTitle":"Features","tabContent":[{"title":"Deploy environments","text":"Configure multiple deploy environments using a single config file."},{"title":"Webpack usage","text":"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."},{"title":"ES6+ support","text":"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."},{"title":"Sass/SCSS bundling","text":"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."},{"title":"Javascript bundling","text":"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."},{"title":"SVG to Liquid icons","text":"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."}]},{"tabTitle":"Updates","tabContent":[{"title":"Version: 1.0.29","text":"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"}]}],"links":[{"title":"Download","content":[{"icon":"","link":"https://github.com/the-utd/Themeplify","linkTitle":"GitHub"},{"icon":"","link":"https://www.npmjs.com/package/@the-utd/themeplify","linkTitle":null}]},{"title":"Resources","content":[{"icon":"","link":"https://github.com/the-utd/Themeplify/blob/HEAD/docs/file-structure.md","linkTitle":"File structure"},{"icon":"","link":"https://github.com/the-utd/Themeplify/blob/HEAD/docs/js.md","linkTitle":"Javascript"},{"icon":"","link":"https://github.com/the-utd/Themeplify/blob/HEAD/docs/css.md","linkTitle":"CSS"},{"icon":"","link":"https://github.com/the-utd/Themeplify/blob/main/docs/icons.md","linkTitle":"Icons"},{"icon":"","link":"https://github.com/the-utd/Themeplify/blob/HEAD/docs/example-usage.md","linkTitle":"Example of usage"}]}]},"ctaText":"Developing Shopify themes has never been so easy. Get your new Shopify theme up and running in a matter of minutes by using Themeplify.","metaData":{"title":"Themeplify","description":"Powerful Shopify theme tool. Boost development with Webpack, ES6+, Sass/SCSS bundling, JS bundling & SVG to Liquid icons. Empower your workflow."},"technologies":[{"id":"dGVybTo1Ng==","slug":"shopify","count":28,"name":"Shopify","acfTechnology":{"icon":""}},{"id":"dGVybTo2MA==","slug":"shopify-plus","count":1,"name":"Shopify Plus","acfTechnology":{"icon":""}},{"id":"dGVybToyNDI2","slug":"squarespace","count":1,"name":"Squarespace","acfTechnology":{"icon":""}},{"id":"dGVybTo2Mw==","slug":"wordpress","count":6,"name":"WordPress","acfTechnology":{"icon":""}}],"pageHeader":{"background":null,"backgroundOpacity":1,"color":null,"fieldGroupName":"page_header","title":"Empower with Themplify","opacity":1,"position":"on","size":{"desktop":64,"tablet":48,"mobile":32},"spaces":{"top":null,"bottom":null,"leftright":null,"units":"em"}},"lastmod":"2023-07-20"}}, "staticQueryHashes": ["1083880928","2115852241","2249625599","2590265254","3117944600","3394409019","3777654359","842661457"]}