Documentation

Editor

Motifmate comes with a built-in Code Editor. Whenever you have your theme downloaded, you can use Motifmate's Editor by clicking the theme.

Motifmate also works great with other code editors like Atom, Sublime Text, Coda, etc. You just need to open the app, click the theme to open Editor and Motifmate will automatically read your changes and do the rest.

Home

File Explorer

Within Editor you have access to your all theme files in the left sidebar which is also toggleable (ctrl+\ or cmd+\). Left click the file will open your local file, while right click (both in folder and file) will give you several options.

There are few available keyboard shortcut you can use while working with a file :

  1. ctrl+s or cmd+s to save the file.
  2. ctrl+w or cmd+w to close the tab.
  3. ctrl+tab to switch tab forward.
  4. ctrl+shift+tab to switch tab backward.
  5. ctrl+shift+w or cmd+shift+w to toggle wrap.

Home

Upload Assets

You can upload an asset or several assets at once by doing following steps :

  1. Right click on the assets folder.

    Home
  2. Choose Upload Assets.
  3. Choose your file to upload and Motifmate will start uploading your files.
When Emulator running, it will only create a file into your local asset folder. Read more Emulator.
Create New Asset/Template

You can create new asset, template, snippet, section, locale and layout by doing following steps :

  1. Right click on each folder.

    Home
  2. Choose Create New Template (or Snippet, Section, etc.).
  3. Type file name (without extension for non asset files) › Click Add Template (or Snippet, Section, etc.) button.
When Emulator running, it will only create a file into your local theme folder. Read more Emulator.
Delete/Rename/Duplicate

You will have several options to work with your files if you right click any file in the File Explorer.

  1. Right click on one of any file.

    Home
  2. Choose one of three options.
  3. Confirm deletion for Delete or type file name for Rename/Duplicate (without extension for non asset files) › Click the button.
When Emulator running, it will only create a file into your local theme folder. Read more Emulator.
Copy Asset URL

While coding your template, sometimes you need to include your asset by typing asset name along with asset_url filter. However you can just copy and paste this by doing :

  1. Right click on one of any asset.

    Home
  2. Choose Copy Liquid asset_url.
  3. Paste (ctrl+v or cmd+v for macOS) to any line in Editor.
Above example will output this code {{ 'ajax-cart.js' | asset_url }}.
Copy Snippet Include Code

You can also copy and paste while including a snippet :

  1. Right click on one of any snippet.

    Home
  2. Choose Copy Liquid include snippet.
  3. Paste (ctrl+v or cmd+v for macOS) to any line in Editor.
Above example will output this code {% include 'ajax-cart-template' %}.
Copy Section Include Code

You can also copy and paste while including a section :

  1. Right click on one of any section.

    Home
  2. Choose Copy Liquid include section.
  3. Paste (ctrl+v or cmd+v for macOS) to any line in Editor.
Above example will output this code {% section 'sample' %}.
Emmet

Motifmate built-in Editor is Emmet-ready. This feature will save your time by just typing Emmet syntax and that syntax will automatically generate HTML/CSS syntaxes after hitting Tab in keyboard.

Example Emmet syntax in HTML, type : div#container>ul.main-menu>li.menu-item*2>a*, hit Tab in keyboard and will generate following syntax :

Home

In CSS, type : @kf, hit Tab and will generate following syntax :

Home

Emmet will only be available in any liquid, html, css and scss files. See Emmet cheatsheet for more syntaxes.
Minify/Beautify

Sometimes you need to minify your pretty long snippet or readjust spaces for an ugly lines of code, you can do this within Editor :

  1. Make sure you already open any file in Editor.
  2. Click Code EditorCode TasksCurrent TabBeautify or Minify
  3. Motifmate will run beautification or minification for your code in current tab.
Minify keyboard shortcut is ctrl+shift+m or cmd+shift+m for macOS.
Beautify is ctrl+shift+b or cmd+shift+b for macOS

The Fastest Way to Build Shopify Themes