Schema Builder

This feature can help you build your theme settings by drag and drop. You don't need to manually type the setting contents with JSON anymore. You just need to create sections and fields, drag it up or down in draggable schema and Motifmate will automatically generate a JSON schema for you.


Create a New Section

Creating a new setting section is pretty simple :

  1. Click on the plus icon, it will open a section creator popup.

  2. Type section name and choose icon.
  3. Click Create Section button.

You can also remove or edit each section by hovering the section you want to change/remove, two icons will be visible while you hover. For moving the section position, you just need to hover on the top left dots and start dragging.


Create a New Field

New section you just create will be clickable and ready to fill with new setting fields :

  1. Click any section you want to fill with new fields or edit existing fields.

  2. Click on the plus icon, it will open a field creator popup.

  3. Choose a field type and fill available inputs.
  4. When you're done, click Create Field button.
Rebuild Schema

If you manually type the JSON while using Schema Builder, Motifmate will display a button in the bottom right of your screen called 'Rebuild Schema'. You need to click this button to rebuild the draggable schema.


Copy Theme Setting Field ID

Most of the time, you need to use your theme setting value while coding a template. In Schema Builder, you can copy this setting field id and get it as a Liquid object code. Here's an example :

  1. Click a section you want to get the field id.

  2. Hover the field (example in screenshot : Twitter URL), the field id will be displayed right after field name.

  3. Click the id and Motifmate will display a notification that field id has been copied.
  4. Paste (ctrl+v or cmd+v for macOS) to any line in Editor.
Above example will output this code settings.social_twitter_link.

The Fastest Way to Build Shopify Themes