How to use Liquid in Jekyll static site generator in Shopify
Drive 20-40% of your revenue with Avada
Known as a static site generator, Jekyll is an outstanding tool for the Shopify store owners to create a website’s content. By merging templates with content files, Jekyll can allow the users to use Liquid and to add any objects, tags, and filters. While objects represent content pages, filters help manipulate strings, URLs and tags include snippets of content in others.
Jekyll enables empowering the customer’s service that boosts online sales. After pushing a Jekyll installation, the website can be built using GitHub Pages. Besides, the useful Liquid templating language contributes to the website’s content by filters and tags.
However, Jekyll use the latest version of Liquid so the listed tags and filters on the website might not work in some cases. The Shopify store owners can check the version of Liquid Jekyll used by tracking the runtime dependencies section. To output content, the shop owners can use two curly braces such as {{ variable }} and percentage sign {% if statement %}.
The users can have the basic knowledge about using Liquid in Jekyll the through this guiding article How to link to related posts on a blog in Shopify.
How to use Liquid in Jekyll static site generator in Shopify
- How to output and modify variables
- How to use a filter
- How to check logic statement
- How to loop over the content
How to output and modify variables
By very simple steps, for example, the users can add an output on the front matter. With the heading: "I like cupcakes", there are available variable sets at page.variable_name
---
heading: I like cupcakes
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1></h1>
</body>
</html>
How to use a filter
To uppercase the heading, it is possible for admins to do it by running it through the filter and modify the output. Firstly, the users can add | after the variable and then adding upcase in this case:
...
<h1>{{ page.heading | upcase }}</h1>
...
Besides, the users can choose to run the variables in different filters. In this example, we run it on a truncate with the maximum output 8 characters:
...
<h1>{{ page.heading | upcase | truncate: 8 }}</h1>
...
How to check logic statement
In the heading, admins can choose to add more variables by initializing show_heading to true. Therefore, they can control the output of the front matter easily.
---
heading: I like cupcakes
show_heading: true
---
...
{% if page.show_heading %}
<h1>{{ page.heading | upcase | truncate: 8 }}</h1>
{% endif %}
...
In the case the users do not show the heading, they can change show_heading to false.
Or adding an elsif to the if statement, admins can check other conditions. If they discover page.show_heading is false, then it will page.heading whether the heading includes cupcake or not. And if there is a word cupcake, the output will be I want cupcakes, in contrast, the output will be I don’t want cupcakes
---
heading: I like cupcakes
show_heading: false
---
...
{% if page.show_heading %}
<h1>{{ page.heading | upcase | truncate: 8 }}</h1>
{% elsif page.heading contains "cupcake" %}
<h1>I want cupcakes</h1>
{% else %}
<h1>I don't want cupcakes</h1>
{% endif %}
...
How to loop over the content
If the store owners want to make a cupcakes array in the front matter, they can use the loop over the functionality of Liquid. The output to loop in Liquid is considered as for variable in array and then they can name variable whatever they want in the loop.
---
heading: I like cupcakes
show_heading: false
cupcakes:
- chocolate
- lemon
- strawberry
---
...
<ul>
{% for cupcake in page.cupcakes %}
<li>{{ cupcake }}</li>
{% endfor %}
</ul>
...
Conclusion
Through these above tutorials How to use Liquid in Jekyll static site generator in Shopify, we hope that the Shopify store owners have better approaches to the useful generator as Jekyll. By using this effective tool, they can create and manage the powerful content that will boost their sales.
General
