Liquid is a template language created by shopify. In my use case I use it for generate html that is almost similar looking but differs in data. So when iterating over my HTML, I need to preview the changes I made combined with my data.
I achieve this using 2 VS code extensions.
One is Shopify Liquid Preview this enables us to connect our data with the template file.
Another one is HTML Preview this will help us preview data connected html file inside vs code.
Install these 2 extensions.
So at first create a html file. Mine is named index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview Liquid Template Instantly in vscode</title>
</head>
<body>
<div style="width:100%; text-align: center;">
<h1>Greetings from {{name}}</h1>
<h2>{{post.title}}</h2>
<h3>{{post.description}}</h3>
{%- if conditional.enabled -%}
<p>This section is only visible when conditional is enabled</p>
{%- endif -%}
</div>
</body>
</html>
Next create a json file that contains your data that will be connected with the HTML file. Mine is named data.json
{
"name": "Minhazul Hayat Khan",
"post": {
"title": "Preview Liquid Template instantly in vscode",
"description": "This uses 2 vscode extensions to directly preview the liquid template with data connected"
},
"conditional": {
"enabled": true
}
}
Now go to your HTML file and press "CTRL + SHIFT + P" and select the "Shopify Liquid: Open Preview to the side" option.
After selecting it, select the json file you'd like to connect with the html
If everything is done properly it will generate a Preview with the connected data to the side.
Now click on the Preview html file and press CTRL + SHIFT + p again and select the HTML: Open Preview option.
It will show you the HTML's preview.
I had to struggle with checking and verifying the template changes for a very long time. I hope this helps someone. All the codes shown here can be found in my repo here.
Top comments (0)