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.
There are several action Motifmate can do and everything is shown under one window :
- Rename, Remove, Download, Edit, and Publish theme.
- Create a new theme from Timber Framework or a blank one.
- 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
- CSS Autoprefixer for SCSS/SASS, LESS & Stylus
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).
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 :
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.
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.
Synchronize Shopify with local files.
And this feature will help you sync every file in Shopify from your local.
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.
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!
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.
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!
Motifmate supports two platform at the moment : macOS and Windows.
Question and Support
Please send any question or support to email@example.com