≡ Menu

Shopify Themes: Things You Need to Know Before PSD Conversion

It was in the year 2004, when Tobias Lütke and Scott Lake of Jaded Pixel launched an ecommerce platform named Shopify that enabled people to easily set up online stores and started selling their products in quick time. Since then, it has come a long way, and can be termed as one of the most popular ecommerce platforms of today. It currently hosts more than 30,000 online stores globally.

However, to run an eStore you not only need a great platform, but sound knowledge of it too. As a matter of fact, making Shopify themes or templates is not similar to making a WordPress theme or a even a basic HTML; instead, you should be aware of ‘Liquid.

So, what’s Liquid?

You can call Liquid as a templating engine, a programming or a markup language that is developed specifically for and used by Shopify. It is not like any other programming language or identical to PHP, but in fact, it’s totally different and whenever you code a page using Liquid, you need to give it a file name that ends with the Liquid extension i.e., ‘.liquid.’ Though when you have a closer look at a ‘.liquid’ file, you’ll notice it’s like any another HTML file, but with some embedded codes in it. As Liquid lets you customize the HTML completely, where you can easily design an eShop to make it look exactly the way you want. It has been 7 long years, since Liquid is in production, and it is somewhat inspired from Smarty, a PHP template engine.

Let’s take a look at the Liquid code:

<ul id=”products”>

{% for product in products %}

<li>

<h2>{{ product.title }}</h2>

Only {{ product.price | format_as_money }}

 

<p>{{ product.description | prettyprint | truncate: 200  }}</p>

 

</li>

{% endfor %}

</ul>

 

Liquid has got two different types of markups known as ‘Output’ and ‘Tags’. A Liquid Tag starts and ends with a “{% for product in products %}” curly brackets and percent sign, whereas, an Output starts and ends with “{{ product.title }}” two curly brackets.

Structure of a Shopify Theme

Shopify Themes have a very basic file or directory structure, and it only consists of three different file folders, namely; assets folder, layout folder, and templates folder.

1. assets folder: This file folder is used to store any file that you want to use with your Shopify theme. It primarily includes; Cascading Stylesheets, Scripts, Audio and Video files, Images, etc. which are always required to complete an online store with all the necessary elements. While converting a PSD to a Shopify theme, you can access the files located in this folder via ‘asset_url’ Filter.
2. layout folder: In this file folder you just need to place a single file named as theme.liquid. The theme.liquid file contains all the global elements of a Shopify theme, and its code will be wrapped around all the other template files available in your e-shop. And there are two vital elements that, you must ensure, hat are present in this file, which are; {{ content_for_header }} and {{ content_for_layout }}.

The Requirements

The first variable must be inserted head in the theme.liquid file, as it lets Shopify to place any required code in the document head, like a script for stats tracking.

The second variable must be inserted in the body of the theme.liquid file. It will render all other existing liquid template files available in your theme.

3.     templates folder: This is where you need to place all other template files that completes your theme, which are also listed below.
1.     index.liquid: This file is the main or home page of a Shopify based eStore.
2.     product.liquid: This file is be used to display products.
3.     cart.liquid: It is used to display the current customer’s shopping cart
4.     collection.liquid: This file displays the collection of products
5.     page.liquid: It displays any static page that may have been created by the shop itself.
6.     blog.liquid: It is used to have a separate blog for an eShop.
7.     article.liquid: The main function of this file is to display any blog articles, and it also includes a separate comment form that users can use to provide you with a feedback or comment.
8.     404.liquid: It will display an error 404 page whenever the visitor will land on a non-existing page.
9.     Search.liquid: This would come in handy to offer a search option on your eStore, and it will display search results.

If you are aware of web coding, then you might have already guessed that each of the existing template file has access to different variables. For example; the blog.liquid file template will have an access to a ‘blog’ variable, whereas the index.liquid will have an access to all template files.

In order to understand the usage of variables and where you can use them in your template files, you can refer to this document.

Author Bio:- Ajeet Yadav is a seasoned Technical Writer with XhtmlJunction. He specializes in Social Media, Content Management and SEO is what he deals with, while sharing information and insights on PHP-based CMSs like WordPress and Joomla. XhtmlJunction is known for providing effective conversion to PSD from HTML transformation at reasonable prices.

{ 1 comment… add one }
  • Mark Macdonald

    April 6, 2013, 2:35 am

    Great little into into Liquid and Shopify here! If people want more information they can always check out » http://docs.shopify.com/themes/liquid-basics

    Reply

Leave a Comment