Documentation

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!

If you encounter a 'not found' message while accessing /admin/settings.json, you can access the other url : /admin/shop_settings.json
Getting Started

To start using Emulator, you just need to click Code EditorEmulatorToggle Emulator inside built-in Code Editor. If this your first time, Motifmate will ask you to generate data for Emulator, follow all instruction from Motifmate until complete.

Do not turn off your internet connection while generate data still working.

Whenever generate data is complete and Emulator is running you can access your local development in your browser with following url : http://localhost:5813/

Home

Emulator vs Live Store

We always working hard to make sure your local development similar with what you will see in your live store. Though, there are few differences you will meet while working with Emulator, scroll down to see more of this.

SASS Compiler (must read for Jumpstart/Skeleton theme users)

First of all is SASS compiler, if you're using SASS/SCSS + Liquid (i.e. : styles.scss.liquid) in your theme file, Shopify will automatically compile it for you on the fly. Motifmate Emulator will do this for you too! But we're using latest SASS compiler that compatible within our platform. Which is for pretty small case there'll be difference in your compiled stylesheet.

Note for Jumpstart
Following steps are for OLD Jumpstart user only, on March 2, 2017 Shopify released a new version that works great with Emulator. If you still using old Jumpstart version we suggest you to update it.
Note for Skeleton
Skeleton is a very old theme. If you need a starter theme, we suggest you to use latest Shopify free themes or Timber.

Known issue if you're using Jumpstart or Skeleton theme. Both theme SCSS's file (assets/theme.scss.liquid or assets/style.css.liquid) are extending outer selector within @media which is not allowed in latest SASS compiler. If you're using those theme, you can access http://localhost:5913/assets/scss/theme.scss.css which will give you more detailed information

Home

The fix is pretty simple (following steps are valid only for unmodified theme.scss.liquid or style.scss.liquid), for Jumpstart user :

  1. Open your assets/theme.scss.liquid
  2. Go to line 4605 where @extend %clearfix exists
  3. Change that line with actual %clearfix value from line 762-771
  4. Go to line 5122 where @extend .fallback-text; exists
  5. Change that line with actual .fallback-text value from line 783-789
  6. Save it then reload your browser.

For Skeleton User :

  1. Open your assets/style.scss.liquid
  2. Go to line 633 where @extend .clear-after; exists
  3. Change that line with actual .clear-after value from line 450-451
  4. Save it then reload your browser.
Checkout

Local checkout is not available in Emulator.

Third Party Apps

While some third party apps working great with Emulator, not all third party apps available in Shopify Marketplace are suported.

Tip
Some third party apps using localhost address as their development url and make the app won't work in Emulator. Try to use following url to make it work : http://127.0.0.1:5813
Customer

If you have more than 250 customers, Motifmate will only download maximum 250 of it.

Customer Login

You can access all of your existing customer login (that has been downloaded by Generate Store Data feature) by using customer email with password : motifmate

Example customer email is support@motifmate.com, you just need to use that email to login with password motifmate. This password is not applicable if you create a new customer locally, the password should follow your password when you register.

Home

Image Objects

Emulator doesn't support three attributes from image object : image.height, image.width and image.aspect_ratio. Emulator will always return 100 for image.height and image.width, and return 1 for image.aspect_ratio.

Emulator & Browsersync

Emulator can be pair up with Browsersync if you prefer to work with that. Whenever Emulator running you just need to start Browsersync and it will do the rest. While Emulator using this url http://localhost:5813/, Browsersync will use following url http://localhost:5913/.

Browsersync in Motifmate also smart enough to detect if you're using Emulator or not, it will automatically switch your working environment when you start/stop Emulator. From local to live store, vice versa.

Push Local Changes

Whenever you're ready to upload your local version, you can push everything to your live store by doing :

  1. Go to home screen
  2. Right click above the theme › Choose SynchronizeShopify with Local Files.

    Home
  3. Motifmate will ask a confirmation › Click Yes.
While above steps is working, we are working on a new way to push your local changes without pushing every files to the live store. This feature will be released in the future.

The Fastest Way to Build Shopify Themes