Step Towards Customizing Shopify Theme with Liquid Template

Tudip

06 August 2019

We all know how CMS is growing over the era of e-commerce platform. If we think in case of Shopify which is also gearing up to compete with other e-commerce based CMS. Hence, we can say Shopify is one of the most simple and easy to use platforms ever for building our store.

Why To Use Shopify?

If we go in depth and study well, we will get knowledge of why we should use Shopify for our web store. Following are the key points which will clear the doubts to go with Shopify.

1. Every component of Shopify are built by their own similar to how Apple designs and manufactures the software and hardware to overcome the problem of sync up.
2. Provides tons of payment gateways without adding extra extension dependent on each gateway.
3. Simple backend system for setting up administrative work.
4. It has lots of built-in tools and having professionals to take care of store to become store fast, secure etc.

Before moving to blog topic let us clear few things such as what is theme and liquid template engine in Shopify.

Shopify theme are nothing but it comprises of templates as well as the normal kind of assets such as images, CSS and Javascripts. One of the key components used as templating engine here in Shopify is liquid. It is similar to Twig and Smarty.

Liquid: language or engine?

Some called liquid as engine, while others may call it a template engine. But personally, we would like to call it as a template language which has syntax, concepts such as output, logic, and loops, and it interacts with variables the same as web-centric languages such as PHP.

1. Liquid’s file extensions and delimiters:Liquid files have the extension of .liquid format. The double curly braces delimiters {{ }} denotes output and curly braces with {% %} denote logic.Following are the basic syntax of delimiters used:

   {% section 'product-template' %}: Usually used to show the product template section.  
   {{ product.featured_image.src | img_url: image_size }}: This delimiter used to output the product’s featured image with image size.

2. Object and properties of liquid language:This features introduces us liquid dot syntax. For example taking our shop.name has shop as an object. So this variable represents all data relating shop object. These data items may include following properties.

   shop.address
   shop.currency
   shop.description
   shop.domain
   shop.enabled_payment_types etc.

3. Collection properties and loops:In shopify number of properties represent plurals form. Such as shop.enabled_payment_types these properties represent liquid collections which returns array of data instead of returning a string dataGoing towards the liquid loops, represent the same as for loop which allows us to output same piece code number of times.Let us look at the example of product.images as a liquid collection.This will output us all the images relates to our product and really useful in our theme development.
4. Liquid Filters:
   Liquid filters serves main purposes such as it will be used to manipulate output data in some way, saves theme designers time by reducing the amount of code we need to write. Let us take a closure look on liquid filters.
   
   Here ‘date’ represents filter which filter out article published date in the specified format given in the filter.
5. Liquid Logic:
   Let us look at liquid logic which final aspect of Liquid. In the given snippet we are controlling output of template using simple if else statement.
   

   How to use liquid to customize Shopify Theme templates

   Here we will take a closer insight of customizing the shopify theme using liquid template. We will demonstrate practical ways to customize the blog pages using liquid language. We can customize the Shopify blog post template using two liquid objects i.e. article and blog.

   For example while customizing the blog template which relates author. Let say admin needs to show the blog author name of the blog template then our first step here would be to locate the liquid object article.author which returns full name of author’s name. If you are using sectioned theme, then this object will likely be in the article-template.liquid file within the Sections directory.

   If we need to show the blog author using tag on Edit Article page. Let us look with an example of code block for this feature.

   
   Above code snippet gives feature to show the article based on tag selected. If the tag contains the name provided then it will show up author name on the blog page.

   Once this added we can view the article and her name appear as article author.

   

Using liquid we can also add the next and previous links to the blog section. Let us look into the code snippet to showcase the strength of liquid to show next & previous section given below. Firstly go into the article-template.liquid section file and put down the code where the social sharing buttons are located.

The output after customization is as below.

If in case we want to show the product out of stock and not available. Then we are going to customize the product.liquid file. Here is the code snippet for the same.

Above code snippet will check for availability of product. If available then the product  will show up else it will show the appropriate message.

Here we have studied what are the components used to customize the theme to showcase our store with the powerful feature of liquid language which has in built features to hold the different aspects of shopify template.