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

We’ve just finished a re-design of the Hair Fairy Clips store using the new Georgia Theme.  If you’re interested in getting us to modify a theme for use in your Spiffy Store, it can generally be done in about 2 weeks and will cost you from $70 for a few changes up to $450.00 for a complete overhaul.

Contact us today to find out about our store design service.

We’re pleased to announce the release of a new Spiffy Stores theme!.  The Georgia Theme for Spiffy Stores includes a host of features including 8 different colour schemes, and 9 different font options.  Read on to find out more about this theme.

8 colour schemes.

Easily choose one of the 8 built-in colour schemes in the Theme editor section of your toolbox.

9 title fonts.

You have a choice of nine different fonts.  Hopefully you’ll find one that works with the look you’re trying to get for your store.  if not, we can easily add a new font to your store for a small fee.  We’re using a new technique to achieve native font display in browsers, and we’re hoping to extend our existing themes to include this early next year.

Upload your own logo.

Either upload your own logo to your store, or use a by-line under your store name.

Feature images on your home page.

Your store home page displays 3 feature images.  You can choose to link these images through to pages in your store, or you can just leave the link blank.

Display up to 3 collections on your home page

If you only want to display one collection on your home page, create an empty collection called none, and then choose it in the drop-down menu.

Social Media

You can choose to display social media links on product pages, and blog articles.  The store footer also includes links to your Facebook and Twitter pages, a link to your blog’s built-in RSS feed, and a link to your contact page.

With the growth in demand for social media functionality, we’ll also be expanding out existing themes to include this functionality early next year.

Accepted payment methods.

You can also choose to display what payment methods you select in your store.  If your store accepts payment by PayPal, you would choose PayPal, Visa and MasterCard here.

To preview the Georgia Theme for Spiffy Stores, head on over to the theme’s demo site.  There’s also some handy tips in the blog there on how to insert images in the built-in blog in your Spiffy Store.

We’ve just updated the minimal theme so that now it can be re-coloured in your theme editor.  You can now easily add your logo, add images to your slideshow, change your store background colour, the colour of your navigation, your links, as well as your text, footer background, and footer text.

The best thing of all is that all of your colour changes are also reflected in your checkout, which also exactly matches the colour scheme you’ve created.

It comes with a few different colour schemes built-in as well, which you can see by clicking on the image to the right.

We’re pleased to announce that we have a new feature for our theme templates… Theme Settings.

Although the Spiffy Stores Themes have always been highly configurable, this configuration necessarily required some knowledge of HTML and CSS.

Not any more.

The new Theme Settings ability means that theme designers can now create a custom settings form that allows the end-user to simply choose from basic theme configuration options such as colour scheme, custom logo configuration and design layout.

The settings are created using a simple settings configuration file which includes some industry-unique and innovative features such as colour filters which give designers the ability to create varied colour schemes from a single base colour.

More developer information is available in our Theme Settings Knowledge Base article.

For users who are not interested in designing and modifying their own themes, we’ve updated all themes in the Spiffy Stores Theme Gallery (except Zesty).

If you want to take advantage of these new customization options, please reload a new copy of the theme you are currently using from the gallery. It might be worthwhile downloading a backup copy of your current theme first. Also, you may want to take note of any customizations that you’ve made to your current theme so that you can apply the same changes to the new copy of the theme.

Theme Settings opens up a whole new world for creative and interesting theme design and modification, so look forward to some future updates in this area!

We know we’ve been teasing you a little too much with the delayed launch of this theme… well the Antiqua theme is now available to all stores in your theme gallery.  Check out the theme preview site at http://antiqua.spiffystores.com

To apply this theme to your store, just navigate to the “Theme gallery” section in your Toolbox (in the Design & assets section). You’ll see the Antiqua theme there.

If you want to try it out on your site, remember to save your current theme by downloading it first. This means that you’ll be able to restore it at a later date if you’d prefer to use your old theme.

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

We’ve been working hard on getting the shipping side of processing your orders sorted out to make it as streamlined as possible for you.

Now, when you mark an order as shipped, a notification email is sent out to the customer to let them know their items are on their way.

You can also add a tracking number so they can track their shipment.  A new Order Shipping Report is also created instead of the old Fulfilment Report, which also allows the printing of Packing Slips.

Very soon you’ll also be able to customise your emails as well, so you’ll be able to completely re-brand all aspects of your store! Check out the preview of the email to the right.

Enjoy!