Take control of your design with LIQUID

One of the major improvements with Bright Sites is design flexibility.  With our previous software, you were limited to our templates and design options (though our designers can do some pretty amazing stuff within those limitations).  With Bright Sites, you can virtually do almost anything you want (in terms of design, anyways).theme-file-editor

Bright Sites uses an open source template engine named LIQUID.  Liquid was developed to be easy to use, fast, and secure – while allowing designers ultimate control over how their websites work.  After researching many other options, we decided Liquid would work best for our clients (Liquid is also used by majors such as Shopify, GoDaddy, eLocal, Sendowl, etc).

If you are interested in learning more (and know HTML – some coding knowledge is required) please visit the following site: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers 

To access the core template files of your site, simply click on Themes (from the CMS administrative area), then Theme Files next to the theme you wish to edit.  – BE CAREFUL – as edits to themes can cause your website to break!  You can always re-install a theme if you make a major mistake.

In this article we will break down the basic structure of a theme and some things to look out for.

Theme Structure

Core Files

The core file you want to focus on is theme.liquid (in the Layouts directory). This is the “container” for your site, and holds most of the code that shows up on every page. The other big file to keep an eye on is style.css.liquid or main.css.liquid (depending on the theme) under the Assets directory – these files hold the style information.

Templates

The Templates directory holds most of the page templates. For example, index.liquid is the homepage, checkout.liquid is the checkout page, cart.liquid is the shopping cart page, and so on.  Within the Templates directory is the account directory – which holds the code that creates the “My Account” areas of the site (such as my orders, dashboard, account balance, etc).

Snippets

Snippets is where you can find smaller bits of code that are contained within the in other template files. In general, the system starts with theme.liquid, then finds the relevant Templates, and any Snippets in that template.  Snippets can contain other Snippets as well.

Assets

All of the images, javascript files, and CSS that makeup your theme reside in this directory.  Some of the files may contain a .liquid extension – that’s okay! It just tells the system to read the file for Liquid code (Our CSS files contain Liquid code).  You can easily add new assets by clicking on “Add New Asset” at the bottom of the folder in the “Theme Files” section.

Configs

The Configs directory holds the theme configuration that you find on the Theme Designer page.  You don’t really need to edit these files unless you want to add your own custom configuration options to a theme.

Closing Notes

Liquid Code

Liquid code always starts with a curly bracket, either like: {{ or {%. If you see this in the HTML/Liquid files, and don’t understand what it does, it’s better to leave it alone.  Changing any of that code can cause your theme to break.

Images

If you want to call an image that resides within the Assets directory, you need to use some special syntax. If you don’t, the image will not show up properly.  It’s pretty easy – instead of putting in the entire image URL, you just need to specify the filename within the following liquid code:

<img src=”{{ ‘my_image_filename.jpg’ | asset_url }}” />

This will tell the system to automatically load ‘my_image_filename.jpg’ in the Assets directory. It’s extremely powerful if you have multiple themes, or want to transfer a theme you’ve built from one site to another, as the system will always load the right image that the theme expects, so long as it’s in the Assets directory!

Downloading and Uploading Themes

Themes can be downloaded and edited offline. This can be useful if you want to create versions of themes, or edit the themes in your favorite editor, such as Notepad++ or Adobe Dreamweaver.   When you go to upload your theme, be sure you’ve used a ZIP utility to put the theme back into a zip file.

Stay tuned for additional information in future newsletters!

If you would prefer us to design your site, no problem! Simply send us an email: storeart@brightsites.com

Category:,

This post was written by Lucy Taylor