E-commerce-related articles such as E-Commerce (E-Ticaret) and The First Step in E-Commerce, as well as platforms like PrestaShop, WooCommerce, and Magento were also discussed.
Of course, each platform and/or service should be evaluated within its own environment, relationships, and framework. For this reason, we also mentioned template languages/motors such as Twig and Mustache.js, as well as integrations such as Product Information Management (PIM). This article’s focus, however, is on Liquid Template Language, a template language implemented by Shopify and also usable independently afterward. However, before diving into the details, a basic explanation regarding Shopify would be beneficial.
What is Shopify?
Shopify is the name of an e-commerce platform headquartered in Ottawa, Ontario, Canada, offering solutions for online stores and retail point-of-sale systems. For more detailed information and examples, please refer to the Examples1 and E-commerce Stores2 pages. Let’s now move on to Liquid.
Liquid Template Language
Liquid, an open-source template language developed in Ruby and pioneered by Tobias Lütke3 (CEO) of Shopify, is used as the foundation for Shopify theme development. In addition, this template language is also used as the core for themes integrated with the Shopify system, enabling dynamic and high-performance in-store interactions. Although initially developed in tandem with Shopify, Liquid is now utilized by a wide range of services and applications—including Zendesk, Desk.com, Jekyll, 500px, and GoDaddy—across various scales4 5 6 7 8 9.
You can explore the Liquid source code and updates on the GitHub Shopify/liquid 10 11 page. Personally, I observe that Liquid bears a strong resemblance to Twig. Therefore, if you’re familiar with Twig’s syntax or are developing Grav themes, you can easily create Shopify themes based on Liquid. Additionally, you may find the following guides helpful regarding Liquid template development rules.
Liquid Usage
Liquid code can be categorized under objects, tags, and filters.
Objects (Objects)
Objects in Liquid indicate where content should be displayed on a page. Object and variable names are displayed within double curly braces: {{...}}.
{{ page.title }}
Tags (Tags)
Tags are used to create logic and control flow within templates. They are expressed using curly braces and percent signs: {%...%}.
{% if user %}
Hello {{ user.name }}!
{% endif %}
For more detailed information and usage examples, please refer to the subsections on iteration12, control flow13, and variable14.
{{ "adam!" | capitalize | prepend: "Hello " }}
You can review the page on [Introduction to Liquid]15 16 for filters ready for use such as date, divided_by, escape, join, remove, replace, and where.
Further Reading
Footnotes
- Examples. Shopify ↩
- eCommerce Solutions. Shopify ↩
- Tobi Lutke. Twitter ↩
- Wiki. Shopify/liquid. GitHub ↩
- Liquid template language reference ↩
- Twilio Docs, Liquid Template Language ↩
- Jekyll, Liquid ↩
- meta::cpan, Template::Liquid ↩
- SendOwl, Liquid Templating ↩
- Liquid for Programmers. Shopify/liquid. GitHub ↩
- Liquid for Designers. Shopify/liquid. GitHub ↩
- Iteration. Liquid ↩
- Control Flow. Liquid ↩
- Variable. Liquid ↩
- [Introduction. ↩
- An Overview of Liquid: Shopify’s Templating Language ↩