Home > Shopify Development > How to Display Raw Code in Liquid

How to display raw code in liquid in Shopify

Sam Updated: June 30, 2024

Drive 20-40% of your revenue with Avada

Get Started

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
What is raw tag
How to display raw comment in Liquid

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.

Liquid

Liquid Highlight in Shopify Liquid Basics in Shopify Liquid Iteration: for break limit Liquid default_errors: How to Show Default Errror Messages Liquid default: How to Set Default Value in Filter Liquid time_tag: How to Convert Timestamp into HTML time Tag Liquid Highlight Formate Address in Liquid Create a set of Links for Pagination in Shopify How to Convert String to JSON Fomat in Shopify How to Add Weight with Unit Liquid date: How to Format Date, Convert to New Format How to Create a Collection-aware product URL in Shopify How to get frontend login link in shopify Liquid file_url: How to Get File URL in Shopify Liquid file_img_url: How to Get File Image URL in Shopify Liquid remove: How to Remove Specified String in String Liquid prepend: How to Add a Suffix to a String Automatically Display Singular or Plural of String Based on Number How to use money filter Liquid abs: Show absolute value of a number Merge Two Arrays into One in Liquid How to use a Layout file in Layout Folder Liquid and/or: Multiple conditions Liquid for loops Liquid case when statement Liquid unless Loops How to Display Raw Code in Liquid Comment Syntax How to Comment Out Liquid Code How to strip whitespace from the left or right side in Liquid

Sam Nguyen

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.