Editing your theme using WebDAV in TextMate for OSX

From Spiffy Stores Knowledge Base

TextMate is a popular text editor for OSX, which includes excellent code highlighting, and a bunch of useful features that you can read about on their site at http://macromates.com/

(For those of us not lucky enough to have a Mac, check out E text Editor, which lets you use TextMate bundles and many of TextMate's features on Windows.)

To edit your files in real-time using TextMate, you first need to set up your computer to access your theme files. Luckily OSX includes native WebDAV support, so you can use the "Connect to Server" command to access your Spiffy Store theme files using WebDAV.

Setting up WebDAV on OSX

In the Finder, choose "Go -> Connect To Server", type the address of the server in the Server Address field, and click Connect.


Webdav osx 1.png

The server address should be in a form similar to this:

https://yourstorename.spiffystores.com/dav/

Note: You must specify https to ensure that you are using a secure session.

Webdav osx 2.png

You will be prompted to enter your username and password. Use your email address and password that you use to log on to your Spiffy Store toolbox.

After you've authenticated, you should be able to see a list of the folders that make up your theme. You can then edit your theme using TextMate by following the instructions below.

Webdav osx 3.png

Opening your files in TextMate

To activate code highlighting features for liquid in TextMate, you just need to download the liquid TextMate bundle, unzip it, and open it. Double clicking on it should install it into TextMate for you. The TextMate bundle can be downloaded from here: http://www.spiffystores.com/downloads/Liquid.zip

Your theme files can be easily accessed in TextMate by selecting "File -> Open" from the top menu, and selecting the "dav" folder that you've connected to above.


Webdav-textmate-1.png Webdav-textmate-2.png

You'll then be able to see your files and folders listed in the left panel. Selecting a file opens it in TextMate. If you save it, it's saved to the server, and your theme is updated on the live server automagically!

Webdav-textmate-3.png


  • The "assets" folder contains any images, stylesheets and JavaScript files used by your theme.
  • The "templates" folder contains templates for each of the different types of pages built into your theme.
  • The "layout" folder contains your Theme.liquid and Theme.settings files
  • The "snippets" folder contains any snippets that are used in your theme.

For more information about how your theme is constructed, please go to The Spiffy Stores Theme Guide

About WebDAV

WebDAV (World Wide Web Distributed Authoring and Versioning) is a standard for collaborative authoring on the Web. It is a set of extensions to the Hypertext Transfer Protocol (HTTP) that allows for collaborative editing and file management between users via the Internet.

For more information, check the WebDAV website at http://www.webdav.org