Documentation

Code Task Automation

If you need to have an automated task for your JavaScript and CSS assets, maybe also want use ES6 syntax for your JavaScript. This feature might fit for you. Just activate a task and Motifmate will do the rest.

Home

Basic

While Shopify compile your SCSS file on the fly, this feature will compile it directly after you save your file and the compiled file will be available within your asset folder. There are some default tasks you can use like Minification, Sourcemaps, Autoprefix, Concatenation and Transpiler for your ES6 syntax.

If a task is activated, your compiled asset will be available in your asset folder with suffix .generated as default, so if you activate SCSS task and include styles.scss in it. Motifmate will create a new file called styles.generated.css in your asset folder. This suffix won't be applied if you use Concatenation which you will set the file name.

Here's how to activate a task :

  1. Click Code EditorCode TasksAutomation (keyboard shortcut : ctrl+shift+a or cmd+shift+a for macOS)
  2. Select one of available task (example : JavaScript).
  3. Choose asset (example : timber.js) and click Activate Task. You can also click other option to activate.

    Home
  4. Click Save Settings button.
To select/unselect multiple assets, you can use ctrl+click or cmd+click for macOS and shift+click combination .

After the task activated, whenever you made changes and save timber.js, Motifmate will automatically create/update a file called timber.generate.js in your asset folder, which has been transpiled, minified and added a sourcemaps. Motifmate will also give you a notification about the compilation status.

Due to dynamic data, this feature doesn't support .liquid asset.
Stylesheet

There are three different CSS pre-processor supported by this feature : SCSS/SASS (.scss .sass), LESS (.less) and Stylus .styl. For Stylesheet, you also have an option to automatically add prefixes into your css.

JavaScript

There are also two languages suported for JavaScript : CoffeeScript (.coffee) and TypeScript (.ts). An ES6 syntax is also supported. You can activate ES6 by clicking Babel Transpiler option in JavaScript task.

The Fastest Way to Build Shopify Themes