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.
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!
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).
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.
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.
How about the product images, product variant or featured image? Don’t worry, it’s included too!