How to set variables using front matter on your site in Shopify
Drive 20-40% of your revenue with Avada
Website developers acknowledge that front matter is important to upload information on the front page. Obviously, there are a lot of methods that you can use to arrange variables in one page, of all those methods, front matter is a pretty simple one you can think of. The tutorial today will explain briefly about front matters and guide you to set variables using front matter.
Table of content
What is the front matter?
Front matter is processed by Jekyll as a special file to set variables and metadata on a page. Developers will set variables in front page and a website that clients see is the output page. Front matter exists only when it is set between triple-dashed lines, then you can write valid forms of YAML.
Let’s take a look at the following example. A variable named hello_text is put between two triple-dashed lines and this variable is given a value of “Hello there!”
In order to create front matter variables, Jekyll uses a language called Liquid. It is important for you to know about two basic tags to write codes for front matters. First, variables can be outputted by surrounding them in two curly braces. Second, logic statements can be performed by covering them in curly braces and percentage signs. Moreover, variables put in the front matter can be accessed by using page.name_of_variable .
---
hello_text: "Hello there!"
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<h1>About page</h1>
<p>{{ page.hello_text }}</p>
</body>
</html>
Now, move into the next part to see steps of how to set variables using front matters
Show and hide page section
Front matter is used to show and hide the page section of a page. Just add a simple tag, you can freely control the appearance of the page section. You add a show_footer variable to front matter then set to true. The tag will set a footer to a page when this page appears on your website.
---
hello_text: "Hello there!"
show_footer: true
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<h1>About page</h1>
<p>{{ page.hello_text }}</p>
{% if page.show_footer %}
<footer>I am a footer</footer>
{% endif %}
</body>
</html>
If you want to change the footer, then remove the tag.
Arrays
Imagine, you want to show a chain of fruits on your page. First and foremost, you generate a new array called fruit, each item is intended with spaces and begun with a hyphen. Attention: fruits are listed after show_footer.
---
hello_text: "Hello there!"
show_footer: false
fruit:
- apple
- banana
- orange
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<h1>About page</h1>
<p>{{ page.hello_text }}</p>
<ul>
{% for item in page.fruit %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% if page.show_footer %}
<footer>I am a footer</footer>
{% endif %}
</body>
</html>
Objects
Objects are used for advanced data structures. Take a chain of fruits as an example. If you want to add further details namely prices or color, then you can follow these sample below. In lieu of showing an array of all characters, you can name each detail per line on the back page but the front page will show detail in one line.
---
hello_text: "Hello there!"
show_footer: false
fruit:
- name: apple
cost: $1
color: red
- name: banana
cost: $2
color: yellow
- name: orange
cost: $1.50
color: orange
---
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
</head>
<body>
<h1>About page</h1>
<p>{{ page.hello_text }}</p>
<ul>
{% for item in page.fruit %}
<li>{{ item.name }}, cost: {{ item.cost }}, color: {{ item.color }}</li>
{% endfor %}
</ul>
{% if page.show_footer %}
<footer>I am a footer</footer>
{% endif %}
</body>
</html>
Conclusions
In conclusion, the tutorial provides you with samples of using front matters to set variables on the front page. These steps are effortless and require no coding skills, hence try to do this to upgrade your website interface. Let us know your comments.
General
