Tag: Shopify

What is Liquid Template Language – An Introduction

To really understand what liquid template language is, you need to delve into the world of eCommerce and take a good look at Shopify. If you are a new user of the Shopify eCommerce system, you wouldn’t know instantly what code sits behind all of the pretty interfaces and easy to build product options. But as a web designer or developer, you may wish to find out more about what goes on under the hood of Shopify.

Many developers make the mistake of believing that Shopify uses some elements of PHP in its main code base, similar to how most other eCommerce platforms do, some include WooCommerce, Magento, OpenCart and PrestaShop. Unlike these other eCommerce platforms, Shopify has its own purpose-built templating language called Liquid it uses for themes for your online store.

Is Liquid a language or engine?

Some developers call Liquid a type of templating language, whereas, other people believe that it is an engine for Shopify themes. In simple terms, this is just a label and both terms in their own right are correct. I prefer the term “language” as with other traditional coding languages such as PHP, HTML and jQuery, these have syntax with a common output, IF statements and loops. Even with these similarities to other coding languages, this is where the common factors end. Shopify’s Liquid Templating Language is intuitive and has so many benefits over conventional coding practices.

Liquid Files

Once you’ve managed to get under the hood of Shopify and start to look at the actual theme development aspect of the eCommerce platform where do you find these liquid files? Like HTML and PHP, the files will always end in the language extension. See below:

  • afilename.php
  • afilename.html
  • afilename.js

This is no different with liquid template files as these end in .liquid, for example, “afilename.liquid”. This is the easiest way to establish what code you will find inside the actual file.

Once you have opened a .liquid file you will find some code you will be familiar with, HTML. Liquid templating language is a mixture of normal HTML code and also liquid constructs. You can easily distinguish the liquid tags from HTML code as these will follow one of the following patterns:

  • The double curly brace delimiters {{ }} denote some output
  • The curly brace and percentage delimiters {% %} denote logic

For an established designer or developer with some past experience should be able to read this code easily without any extensive training.

How Does Liquid Work with Shopify?

Shopify eCommerce platform will decide which templates are to be shown to the frontend user of the website. For example, if the URL is http://myshop.myshopify.com/collections/tshirts Shopify will render the collections.liquid template.

Once Shopify understands which template to show to site user, the template will be parsed to look for Liquid placeholder tags. These placeholders are replaced with relevant data from your stored database. It does take some time to understand the connection between Shopify and how the templates work but once you get the hang of this, it will be much easier to work with.

What Are Placeholders?

Placeholder is the simplest form is a piece of code that will be changed when the template is sent to the browser to parse. The information sent to the browser will usually be some logic as discussed earlier using tags like {% %} or output using tags such as {{ }}.

[markdown]
“`html

{{ product.title }}

“`
[/markdown]

As you can see from the above example, this is a mixture of HTML tags (Heading 2) and .liquid code {{ product.liquid }}. This is using the simple output tags from Shopify’s coding language and when passed to the browser will change the Liquid into information pulled from the database. In the example below I have left the heading 2’s in:

[markdown]
“`html

My New Online Store

“`
[/markdown]

Unless you use a filter on the Liquid tag this will print exactly what is stored in that field in the database. Filters will allow you to adapt further.

Logic Tags

As with other languages, Shopify’s Liquid Templating Language allows you to apply some logic. Please see the example below:

[markdown]
“`html
{% if product.available %}
This product is available
{% else %}
Sorry, this product is sold out
{% endif %}
“`
[/markdown]

The logic example above is an IF Statement. By using Liquid logic we can determine the output that is rendered based on whether things such as product stock level is equal to in stock. Liquid code goes one step further and as well as IF, ELSE and END IF logic parameters, Liquid allows you to use boolean logic such as true or false.

Summary

Liquid, in a nutshell, is a very powerful offering brought to the table by Shopify’s ever-growing eCommerce store system. Liquid has so many benefits and advantages over its nearest rivals in terms of usability and adaptability. For any new web designer or developer with some HTML experience should be able to get off the ground quickly with Shopify theme development.

10 Benefits of using Shopify for your Ecommerce website

Shopify is a hosted eCommerce solution and is fast becoming one of the biggest and most successful eCommerce platforms in the world. To put Shopify into some numerical context, currently 270,036 websites using the Shopify platform, with a market share of 13% against other eCommerce platforms such as Magento and WooCommerce.

Here are 10 reasons while we would recommend using Shopify for your eCommerce website.

1. It’s a hosted Platform

Shopify is a hosted platform. This means instead of hosting the site on your own server it is hosted on there own optimized servers. Unlike self host platforms like Magento which require a very particular server setup to run smoothly, Shopify manages the hosting and server config which ensures your store is always run at it best.

2. Security Updates

Due to Shopify be on hosted platform and the way Shopify stores are built using Shopify’s own language (Liquid). Any security updates that need to be done on the eCommerce platform are automatically performed as needed without any downtime for your store allowing you to continue to generate revenue through your store. Platforms like Magento requires the host to perform these updates and with older stores and the multitude of 3rd party plugins these can cause your store to break, leaving you hanging while the plugin developer or host catch up and create fixes.

3. Apps

Shopify has their own app store which can be used to extend the functionality of your site. These apps are all vetted and approved by Shopify before they can be added to the store. If they are costed then they operate on a subscription base, this payment model means that as long as the app is on your store you will get updates for the plugin automatically and be able to get support from the plugin developer without extra charge. Platforms like Magento have numerous plugins which are not vetted by the platform, can cost £100’s to purchase and charge extra for future support and updates.

4. Customisable

Shopify websites are designed to be customizable and put a lot of control in the eCommerce website owners hands. Your stores theme can be edited within the control panel of the site from the simply moving the content and section on the pages to making edits to the different templates files if you wanted to. Shopify has its own vetted theme store and we can also help build a new theme to fit your brand.

5. Customer Support

In addition to the support we can offer, Shopify also has its own customer support team who can help 24/7. In addition to this they also have excellent documentation in there help center on a number question and topics you may have about your store.

6. SEO & Marketing tools

Shopify has a built suite of tools to help you manage marketing your store and to see a number of stats about your store and it performance. It also has built-in functionality to optimise it for search engines. Also on the App Store you will also find some additional options that can be bought and added in giving you better options.

7. Multiple sales channels

Shopify can act as more than just online store. The Shopify admin can also add sales channels for the following out of the box:

  • Shopify Point of sale system which can be used in your physical store(s)
  • Buys buttons which can be used to add products to other sites
  • Facebook so you can see items from your facebook page

There are also a number of apps to integrate with other external systems which help to make sure your stock level stay the same across all your platforms.

8. Abandoned cart recovery

Shopify has built-in Abandoned cart recovery which means you can alert your customers if they abandon their carts without checking out after a set amount of time.

9. Refund, privacy, and TOS statements

Shopify has a generator built directly in the admin to help to generate GDPR complaint Refund, privacy, and TOS statements. These are a great starting point and are easy to edit to your needs. As GDPR has been the flavour of 2018 so far, this has been one of the biggest benefits allowing small to medium businesses to do what they do best, rather than worrying about legal informational pages.

10. Built-in payment gateway

Shopify has its own built-in easy to set up payment gateway with competitive rates. Or if you already have a payment gateway you prefer then Shopify has support for all the popular gateways including:

  • Amazon Pay
  • Authorize.net
  • PayPal Express Checkout
  • SagePay
  • WorldPay

a full list of the UK supported gateway can be seen here: https://www.shopify.co.uk/payment-gateways/united-kingdom

Why don’t you get in contact today to see how we can help you to get your online store up and running on Shopify.