We’ve always believed in pushing the technical envelope to provide advanced technical solutions to make life easier for our store owners.  This is way more important to us than the hype and gloss that you may find in the rest of the industry.

Over the past year, we’ve been talking to loads of web designers who use Spiffy Stores to create online stores for their customers. Although they love creating new e-commerce shops using our software, the resounding feedback we’ve been getting is that whilst the current Theme Editor in the Toolbox is great for small changes, it get’s a bit more difficult when designing an entire theme for a store.

For larger theme updates it’s really necessary to download the theme files to your computer, edit them and then upload the new files to the server. Using the Theme Editor to do this is a bit cumbersome, and makes the design process more difficult than it should be.

We’ve listened to these concerns, and have spent considerable time and effort working on a solution… so today we’re very proud to announce a major new capability which allows all your theme files and assets to be edited directly from your computer using WebDAV enabled editors such as Adobe’s Dreamweaver, and Panic’s Coda.  If you’re on a Mac, you’re even luckier, as WebDAV is built right into OSX, and can be used in conjunction with TextMate and Taco.

To use this new feature in Windows, all you need is a WebDAV enabled editor or a utility such as NetDrive which allows WebDAV files to be mounted on your computer as a local folder. This means that you can use your favourite editor to edit your store’s theme files directly from your computer.

If you’re using a WebDAV enabled editor such as Dreamweaver, you also have access to some advanced features such a file checkout and locking so that you can work in a team without having to worry about whether someone else overwrites your changes.

If you’re a web designer and your current e-commerce software doesn’t support WebDAV, then you should seriously consider Spiffy Stores for this feature alone, as you’ll find your theme development time slashed significantly.

For more info about using WebDAV to edit your store, head over to the WebDAV section of our knowledge base.

Related articles

• Syntax highlighting – now in our Liquid template editor
• Easy image editing with the Feather Editor from Aviary.com
• Syntactically Awesome Style Sheets

Until now the Theme Editor has displayed your theme’s Liquid template files in a very boring, black text field.

We think this makes it harder to edit and change your theme files than it needs to be, so we’ve added a bit of colour to the whole process.

Now, when you go to edit a theme’s Liquid file, you’ll see the text highlighted and colour-coded according to the syntax of the language. You’ll see HTML, CSS and Javascript as well as all the Liquid tags highlighted using different colours so that it makes it a lot easier to navigate your way around the file. In addition, strings, numbers and various other bits of punctuation are highlighted as well.

To round off this update, we’ve added line numbers on the left to make it easier to locate and refer to the code.

In technical terms, this is known as a syntax-directed editor, but we just call it easy to use.

Actually, it’s really “Syntactically Awesome Stylesheets”.

For all the theme designers out there, we’ve just made your life a little bit easier. We all know that sometimes CSS stylesheets can get complicated, so anything that can help you manage that complexity is a welcome bonus.

As you may already know, when you enable the Theme Editor by creating a ‘theme.settings‘ file, you can parse your CSS files by making sure they have a suffix of ‘.css.liquid‘.

Now, as part of the CSS processing that gets initiated to deal with the Liquid tags, we’ve added a pass through the SCSS processor, which is part of the SASS CSS extensions. You can read more about these CSS extensions at http://sass-lang.com

By using the CSS extensions, you can simplify your stylesheets by using variables, conditional logic, mixins and templates, nested attributes and a whole lot more. Even better, at the end of the processing you get a compressed CSS file so you can ensure that your site loads as fast as possible. Even if you don’t use any of the CSS extensions, you still get a compressed stylesheet, so that’s got to be something to smile about!

You can read more about the Spiffy Stores Theme Customizations in our Knowledge Base.

Here’s something to help you customize your Spiffy Store’s Liquid Theme for your overseas customers.

We have added some new Liquid Theme variables that will give you access to the geolocation data for your customer. This will give you access to the Country, Country Code, City and Timezone information for the customer, based on the IP address being used.

Four new methods have been added to the request variable.

[ruby title=”Sample Geolocation methods”]
{{ request.country_code}}
{{ request.country }}
{{ request.city }}
{{ request.timezone }}
[/ruby]

You can use these methods to help you display information in your theme that is customized for your customer’s location. For example, you could provide additional shipping information or information about tax free prices. The timezone information could could be used to let your customers know what your business hours are by taking into account the time differences.

You may wish to restrict certain products or pages to local customers if you’re running a promotion, so you can use the country information to display different information to overseas customers. For example, you may be offering free shipping to local customers only.

Further information can be found at

https://www.spiffystores.com.au/kb/Liquid_Template_Variables_-_request

Here’s a quick update.

We’ve added a small improvement to our Theme support by defining a new header variable which can be used in the Theme.liquid file as part of the section.

Rather than hand-coding author, copyright, description and keywords meta tags, you can just code

[ruby]
{{ header.author }}
{{ header.copyright }}
{{ header.description }}
{{ header.keywords }}
[/ruby]

These variables will automatically generate the appropriate meta tags for your page’s content.

The advantage of these automatically generated tags is that they structure the description information in a way that makes it easy for the search engines to extract the relevant information about your product or page and this will appear as the snippet in the search results.

For details have a look at our Knowledge Base documentation

Liquid Template Variables – header