Skip to main content

How to Display Raw Code in Liquid

Last updated: October 07 2024

Written and researched by experts at Avada Learn more about our methodology

Displaying raw code in Liquid within your Shopify store can be tricky, especially when you need to show comments exactly as they are without processing. Many Shopify users encounter this challenge, and finding a straightforward solution is crucial. This guide will walk you through the steps to display raw code in Liquid, ensuring your comments appear correctly in your Shopify templates.

Table of content

What is Liquid template

Not only is Liquid template used in Jekyll but you can also apply Liquid on Shopify platform. Liquid has been in use at Shopify since 2006 and now become popular for a lot of hosted web application. Liquid is an open-source template created by Shopify and written in Ruby. The template language is considered as Shopify backbone because you use it to upload the dynamic content.

Liquid codes are divided into three types: objects, tags, and filters. The tutorial today will explain raw tags.

What is raw tag

First of all, you need to know about tag markup. Tag markup does not allow to change the content of the text and is surrounded by a pair of curly braces and percent signs. There are two types of tags: comments and raw. Comment enables you to leave un-rendered code inside a Liquid template while raw tag temporarily disables processing of Liquid markup.

How to display raw comment in Liquid

Like comment tag, raw tags are surrounded by two curly braces and two percent signs. In the middle of two curly braces, there are raw and endraw. Raw tags become absolutely useful when you are using syntax that conflicts with Liquid such as Mustache and Handlebars. For example, you want to show HTML code in Handlebars, you can follow this example:

Input

Output


In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.

Conclusion

By using the raw tag in Liquid, you can display raw comments in your Shopify store without processing issues. This simple method ensures your code appears as intended, giving you greater control over your Shopify templates. Start applying raw tags today to enhance your store’s customization.

Sam
linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.