Editing your theme using WebDAV in Coda for OSX

Coda is a rather nice code editing tool from Panic, which allows you to easily connect to your store, download and edit your theme files, and then re-upload them.  A free trial can be downloaded from their website at http://www.panic.com/coda/

Coda is very easy to set up, and gives you an excellent editor with code highlighting built in. After installing Coda and opening the application, you click the big + (plus) icon to enter the settings for your site.

You then enter the settings for your Spiffy Store...

• In the Nickname Section, you enter the name of your store. This is for your reference only so it doesn't matter what you put here.
• For Protocol, select "WebDAV HTTPS"
• For Server, enter the address of your Spiffy Store as displayed below. This is your Spiffy Store address, NOT the address of any domains you have added to your store.
• In the User Name field, enter your login email that you use to log in to your store's Toolbox.
• In the Password field, enter the password that you use to log in to your store's Toolbox.
• The Root URL is the address of your store when accessed through a web browser. This can be either your Spiffy Store address, or your custom domain name... depending on what settings you have added in the Preferences -> DNS & Domains section of your Store Toolbox.
• The Local URL is not used, so leave it as default.
• In Remote Root, enter "/dav/" as displayed below
• Local Root is where you will store the theme files for your store. You should create a new empty folder for your store on your computer to store your theme files locally.

After you click "Save", you should see a nice preview of your store...

Double click on the preview, and if you're not taken to the files screen, click the "Files" icon at the top of the app. Click the "Remote view" icon at the bottom to see the files that make up your theme on the server on the left, and your local folder on the right.

Highlight all of the folders in the left panel (which are on the server) and drag them to the right panel to copy them to your computer. They should take about a minute or so to download.

• The "assets" folder contains any images, stylesheets, and JavaScript files used by your theme.
• The "templates" folder contains templates for each of the dirrefent 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

Double-clicking on a file will open it in Coda, where you can make your edits.

When done, save your file by choosing File -> Save from the menu, or using the shortcut keys on your keyboard (⌘+ S).

Right click on the file in the panel on the right and choose "Publish to..." to upload it to your store. You can then preview the changes on your store by viewing it in a web browser. Please note that using the "Upload" function will upload your file to the wrong folder, so shouldn't be used.

Enabling code highlighting in Coda

You can also enable code highlighting, so that tags are easier to find. To do this, go to "Preferences -> Editor", and enter a Custom Syntax Mode for ".liquid" as "JavaScript" (we tried them all, and the highlighting in this mode was much clearer), and a Custom Syntax Mode for ".css.liquid" as "CSS".

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