Sitemap
Muhammad Rashid

Muhammad Rashid

UX/UI Designer | WordPress Developers | Shopify Experts | Graphic Designer |

What is Liquid Programming?

4 min readApr 5, 2022

--

What is a Shopify theme?

A Shopify subject is what defines the overall layout, appearance, and sense of your store. It’s the framework that you use to build all the factors of your store round.
The subject is the muse of your save.
It’s what all your pages, apps, photos, and so on rest on, so ensuring they have a solid foundation is crucial to its fulfillment.

Can you create your own Shopify theme?

The short answer is yes!

Shopify has developed a marketplace where both premium and free pre-built themes give store owners a library of visually stunning themes that make short work of getting a store up and running.

You can save time and money by going the pre-designed route.

But if you’re reading this post, then the chances are you’re already aware of the drawbacks:

  • Limited scalability designed for non-technical users
  • Limited customization
  • Designed for aesthetics and not necessarily for conversions

The alternative to these pre-built themes is to create your own custom theme for your Shopify store.

Press enter or click to view image in full size

What is Liquid Programming?

The liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. Liquid has been in production use at Shopify since 2006 and is now used by many other hosted web applications.

Press enter or click to view image in full size

Liquid uses a combination of objects, tags, and filters inside template files to display dynamic content.

Objects

Objects contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: {{ and }}.

Input

{{ page.title }}

Output

Introduction

In this case, Liquid is rendering the content of the title property of the page object, which contains the text Introduction.

Tags

Liquid tags are used to create logic and control flow for templates. The curly-brace percentage delimiters {% %} and the text that they surround do not produce any visible output when the webpage is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.

For example, you can use Liquid tags to display different content on the product page depending on whether a product is available:

Press enter or click to view image in full size

If the product is available, then the output will be:

Press enter or click to view image in full size

If the product is not available, then the output will be:

Press enter or click to view image in full size

The above example uses, if and else Liquid tags are control flow tags.

Get Muhammad Rashid’s stories in your inbox

Join Medium for free to get updates from this writer.

Tags can be categorized into various types:

Filters

Filters are a means of formatting or performing operations on your object data. They are included in an output tag {{ }} and begin with a pipe character |. Filters can be used in combination, reading from left to right, to perform multiple actions on an object.

Default

Specifies some optional default value to be inserted when computed Liquid results in a nil value or an empty string “”.

Input

Hey {{ subscriber.first_name | default: “there” }}!

Output

<!-- If subscriber.first_name is nil -->
Hey there!
<!-- If subscriber.first_name is "Bob" -->
Hey Bob!

A simple example is the capitalize string filter:

Press enter or click to view image in full size

The filter modifies the string by capitalizing it. The output will be:

Press enter or click to view image in full size

Multiple filters can be used on one output, and they are applied from left to right:

Press enter or click to view image in full size

The string is first capitalized, and then the word world is removed. The output will be:

Press enter or click to view image in full size

You can use Liquid filters to make a wide variety of useful data manipulations. Liquid filters are categorized into the following types:

if you are read in Details, so Kindly Visit Given below Links

https://shopify.dev/api/liquid

--

--

Written by Muhammad Rashid

UX/UI Designer | WordPress Developers | Shopify Experts | Graphic Designer |