Editing your theme using WebDAV in Taco HTML Edit for OSX

Taco HTML Edit from Taco Software, allows you to easily edit your theme files on the fly. Combining this with the WebDAV that's built into OSX makes editing your theme in real-time super easy!  A 30 Day free trial can be downloaded from their website at http://tacosw.com

Taco is very easy to set up, and gives you an excellent editor with code highlighting built in. There a little tweak involved to get code highlighting working, which we'll detail below.

TextMate is a popular text editor for OS X, 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 realtime 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.

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.

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.

Opening your files in Taco HTML Edit

When you've got taco open, you first need to set up some file extensions, so Taco can recognise your theme's ".liquid" and ".css.liquid" files...

Setting up code highlighting

Go to "Taco HTML Edit -> Preferences" in the top menu

...and then go to the "File Types" section. Add in a new File extension for ".liquid" as an HTML document type.

Then add in a new File extension for ".css.liquid" as a CSS document type.

And then add in a new File extension for ".settings" as a "Plain Text" document type. Close the window after you've done this, which will save your preferences.

Accessing your files

The next step is to open a new project. To do this, select "File -> Open Project Folder...". 

Select the "Dav" folder, which should be inside the shortcut link in your side panel under "SHARED" that you created when setting up your computer to access your files here.

Click the "Open" button, and you should then get a list of your site's folders displayed on the panel on the left.

• 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

Important info!

Editing any of the files and saving them will result in the theme files in your store being updated IMMEDIATELY. If you're working as part of a group, and need an application that allows versioning and file check in and checkout, you may want to consider using Adobe Dreamweaver, which is also compatible with Spiffy Stores.

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