Powerful new features, services and plugins for your Shopify store

All Apps / Tools / Motifmate

Motifmate

Motifmate

Developed by Hidayat Sagita

Get
Price: $13.99 / month Free Trial: 30 days More info
  • Manage multiple stores and themes in one application.
  • Forget about clicking to refresh the Browser. Motifmate is Browsersync ready!
  • Built-in Code Editor, Emmet ready, Settings Schema Builder, Code Tasks Automation, Diff Notification, Automatic Synchronization, Content Seeder, and many more!

Watch Motifmate in action »


Download Motifmate »

Motifmate aims to help you develop Shopify themes locally in an easier and faster way than ever before. There’s no need to open up Terminal and type a command just to download/upload or save templates or assets. With Motifmate we just need to open the app, add our store, and begin coding. As simple as it sounds!

We don’t even need to switch the tab and reload the browser to see the changes we made. Motifmate use the power of Browsersync to help us do that automatically. Just make our changes, save it, and Motifmate will do the rest.

Manage Multiple Stores


Motifmate supports managing unlimited stores. You can add as many stores as you need to manage. Moving store to store or removing the unused ones are also as simple as one click.

Theme Control


There are several action Motifmate can do and everything is shown under one window :

  1. Rename, Remove, Download, Edit, and Publish theme.

  2. Create a new theme from Timber Framework or a blank one.

  3. Create a new theme for Main, Mobile version, or Unpublished.

Settings Schema Builder


We know creating Settings Schema for your theme should be faster than typing JSON, so Motifmate's Settings Schema Builder allows you to avoid typing JSON anymore, you can create your theme settings with just drag and drop!

Code Task Automation


Fasten your workflow with this feature now! You can create tasks automation like using Gulp/Grunt in just a few clicks directly to your theme assets. There are 6 task types available : JavaScript, CoffeeScript, TypeScript, SCSS/SASS, LESS & Stylus. Common tasks per type you could use are :

  1. Minify

  2. Sourcemaps

  3. Concatenate

  4. CSS Autoprefixer for SCSS/SASS, LESS & Stylus

  5. Babel Transpiler with es2015 preset for JavaScript

Diff Viewer


Don't worry to overwrite other developer works anymore! Motifmate will intellegently detect any diff changes in live server before saving. Motifmate will let you know what changes has been made in the server that your local changes hasn't, you can see the difference and apply them as required!

If you're working alone you also can turn this feature off! Just uncheck the menu : Code Editor > Live Site > Avoid Overwrite or Command+Alt+O (macOS) / Ctrl+Alt+O (Windows).

Synchronization


Motifmate has a worker in the background that watches for any file changes you’ve made locally and does any required actions (rename, upload, remove, etc). You just need to add your stores and download the theme you need to change and Motifmate will automatically watch them. There are also additional Synchronizations you can use :



  1. Synchronize installed theme with Shopify.
    In case someone on your team adds a theme through the Shopify backend, use this feature to sync your local with Shopify.


  2. Synchronize local files with Shopify.
    We can synchronize our local theme files with every file from Shopify, useful when we’re working with several developers.


  3. Synchronize Shopify with local files.
    And this feature will help you sync every file in Shopify from your local.

**CAUTION**
Never remove a theme folder through your Finder or File Explorer when Motifmate is running, Motifmate will automatically detect and remove the theme files from Shopify too. Quit Motifmate before doing this and when Motifmate is reopened, it will automatically detect the local file has gone and avoid any remove action.

Browsersync


Motifmate use Browsersync to help us watch our changes and automatically inject the changes or reload our store. This helps you save time by not having to reload manually every time you want to see the changes you’ve made. And when you need to force reload the store, Motifmate can do that too!

If you prefer to use Browsersync later when you’re done making changes, you can turn it off while working and turn it back on when needed.

Built-in Code Editor


Motifmate comes with a built-in Code Editor. There are useful features we could use inside this Code Editor : Create, Rename, Remove, Duplicate, Upload multiple assets at once and even create locale JSON file.

Motifmate works great too with other code editors like Atom, Sublime Text, Coda, etc. We just need to open the app and Motifmate will automatically read your changes and do the rest. We can even use the Browsersync functionality while working with the other code editor, just turn on Browsersync and we’re ready to work!

Emmet ready


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


Example Emmet syntax, type : div#container>ul.main-menu>li.menu-item*5>a* and hit 'Tab'

And many more! See Emmet cheatsheet for more syntaxes.

Content Seeder


Sometimes creating dummy content for looking at how our code works could takes our time. How about Motifmate does that for us? Content Seeder could generate any amount of dummy data into our store, there are 3 content types Motifmate supports so far : Product, Article and Page.

How about the product images, product variant or featured image? Don’t worry, it’s included too!

Multiple Platform


Motifmate supports two platform at the moment : macOS and Windows.

Question and Support


Please send any question or support to support@motifmate.com

Download the App now!

Motifmate reviews (1)

posted

Incredible app! The editor UX is very nice and the live-reloading makes editing fast. It's easy to update the theme settings through the schema builder and you see new content into the store. Definitely my new essential tool for developing themes!

Get
$13.99 / month
30 days

Support & Sales

Hidayat Sagita
support@motifmate.com
motifmate.com
Get Support

Screenshots

  • Large
  • Thumb
  • Thumb
  • Thumb

Integrations

Shopify
Browsersync

Are you a developer? Become a Shopify partner or submit your app.