Powerful new features, services and plugins for your Shopify store

All Apps / Tools / Motifmate

Get
Price: From $0.00 / month Free Trial: 14 days More info
  • Local Development with Emulator!
  • Avoid code overwrite with Diff Viewer.
  • Manage multiple stores, Browsersync-ready, Built-in Code Editor, Emmet ready, Settings Schema Builder, Code Tasks Automation, Automatic Synchronization, Content Seeder, and many more!

Read Documentation »


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.

Local Development with Emulator


Emulator is a new Motifmate feature for working with Shopify theme totally local. You don't need to upload theme files whenever you want to preview your changes, the changes you made in local while Emulator is running won't affect your live store.

This feature is perfect if you're working with several developers or using any version control like Git. Finally, local development done right!

Read more about Emulator here.

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 (Linux & 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 three Operating Systems : macOS, Linux and Windows.

Question and Support


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

Download the App now!

Motifmate reviews

4 reviews
  1. 5 stars (2 reviews)
  2. 4 stars (1 review)
  3. 3 stars (0 reviews)
  4. 2 stars (0 reviews)
  5. 1 star (1 review)

The app is not perfect but it does save a lot of time when you have a lot of code to edit. This is perfect for developers.

Don't confuse this for your usual Coda or Sublime Text.
It's not as advanced but still has some cool features like the conflict catcher which can save you from getting fired by a client.

Motifmate is a small team of programmers but I think they do a great job of supporting their customers.

I know they keep coming up with updates and fix the bugs really quickly.

Once again, they are in their beginnings but I think a tool like this is very valuable for any designer/developer who needs to work on their client's websites.

(And this is a real review... you can check me, David, on my own Shopify websites at hardcases.ca)

posted

This app is full of bugs, and wont show the website properly at all.. Very unfinished.

Also, I paid for your Pro plan, to add several websites, but i cannot switch between them either..

Im happy to change my review when it actually works!

/Filip

PS. Im sure the below reviews are FAKE because otherwise they would have experienced these very obvious issues!!!

posted

Jesus! This app is SO WELL DONE. Worth every penny! Beautiful interface and it can detect conflicts between live and local copies. Useful because some apps change code without notice. 10/10!

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!

posted
Get
From $0.00 / month

Motifmate's core and basic features is available FREE of charge.

 

Advanced features are available at additional cost. Checkout our plan page for more details.

 

14 days

Screenshots

  • Large
  • Thumb
  • Thumb
  • Thumb

Integrations

Shopify
Browsersync

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