Edit Code

Power at your fingertips

We have created a powerful code editor to work right within Ordergroove. Our new code editor allows you to modify the files which make up the Subscriber Dashboard. CSS styles, Liquid HTML templates, locale files, and even custom scripts.


File navigation

You can find a full list of files displayed using a standard file tree navigation located on the left-hand side of the screen. The screen has been designed to make you feel right at home. You can click on a folder to hide the files contained within that folder. Clicking a collapsed folder reveals the folder's contents again. This feature is useful when navigating a folder structure with lots of files.

Clicking on a file opens it up in the editor window to the right of the file navigation area.

Code editor window

The code editor window has been designed to provide you with the maximum amount of horizontal and vertical space. Each file opens up as a new tab. You can easily close an open tab by clicking theXbutton within the open tab.


Syntax highlighting

We know the importance of making your code easier to read. This is why we have implemented support for syntax highlighting for all of the file types which we support in the Ordergroove code editor.

Liquid (Nunjucks variant)








Local Development

📘Ability to preview changes locally

Please note that you will soon be able to preview your changes locally without having to have to upload files back into Ordergroove.

We have worked hard to build an in-browser code editor which will be a pleasure to use. However, sometimes there is just no substitute for being able to download the code to your local machine and edit it in your favorite IDE. Another reason that you might be interested in local development is so that you may keep a copy of your files in your git or other version control repository. Regardless of your reasoning, we have you covered. We have added the ability for you to seamlessly download and upload files using the Ordergroove UI.


Clicking the DOWNLOAD button will cause your browser to start downloading a file called smitemplate(timestamp).zip to your local machine. After the .zip file is on your machine, you can unzip all of the files and open up the folder named smitemplate(timestamp) to begin your local development process.


Once you're happy with your changes you can click the UPLOAD button or just drag-and-drop files right into the editor window. Please note that we support the ability to drag-and-drop individual files, folders, or even a zip file containing a valid folder structure. Please be aware that uploading files to the Ordergroove code editor won't save those changes automatically, and that you will still have to click the SAVE button to store those changes in our system.




Article is closed for comments.