Introduction
हेलो दोस्तों आज हम इस post में shopify liquid language के बारे में जानगे की liquid क्या है और इसका इस्तेमाल shopify में कैसे किया जाता है!. Liquid के feature और इसके example बी देखेंगे जो आपको shopify liquid language को समझने में आसानी हो!.
What is Shopify Liquid language?
Shopify Liquid एक templating language है जिसे shopify ने dynamic और customizable themes को create करने के लिए developed किया गया है!. यह HTML और Shopify backend के बीच bridge के रूप में work करता है, जिससे developers Shopify store में dynamic content को add कर सकते है!. Liquid एक open-source language है! जिसे originally shopify के द्वारा develop किया गया है अब shopify theme और e-commerce store में इसका व्यापक रूप से इस्तेमाल किया जाता है!. यह product details, collection , cart information, customer data को और dynamic content को render करने में मदद करता है!.
Shopify Liquid Key Feature
Shopify Liquid एक templating language है, जिसका उपयोग Shopify themes को dynamic और customizable बनाने के लिए किया जाता है। यह backend data(जैसे products, collections, customers) को frontend HTML pages में render करने में मदद करता है।
Liquid key Feature lists
Data rendering in Templating
Liquid का उपयोग real-time data को दिखाने के लिए किया जाता है। Developers इससे products, customers, orders जैसी जानकारी को dynamically render कर सकते हैं।
Example:
{{ product.title }} <!-- Product का title show करेगा -->
{{ customer.email }} <!-- Logged-in customer का email show करेगा -->
Objects, Tags और Filters का उपयोग
Liquid तीन मुख्य syntax का उपयोग करता है!
Objects ({{ }}) → Dynamic data को display करने के लिए
Tags ({% %}) → Logic और control flow के लिए
Filters (| inside {{ }}) → Output को modify करने के लिए
Liquid Objects ({{ }}) – Variables Ka Use
Liquid objects Shopify के *dynamic content* को दिखाने के लिए use होते हैं!. यह variables को display करते हैं जो Shopify के database से आते हैं!.
Example:
<h1>Welcome, {{ customer.first_name }}!</h1>
अगर यूजर logged in है और उसका नाम “Rahul” है, तोह यह output होगा!
Kuch common objects:
- {{ product.title }} – Product ka naam
- {{ collection.title }} – Collection ka naam
- {{ customer.email }} – Customer ka emai
Liquid Tags ({% %}) – Logic aur Control Flow
Tags का use *conditions, loops, aur logic apply* करने के लिए होता है!.
Conditional Tags (if, elsif, else)
Conditions का use करके * किसी particular element को दिखाना या छुपाना * possible है!.
Example:
{% if customer %}
<p>Welcome back, {{ customer.first_name }}!</p>
{% else %}
<p>Welcome, Guest!</p>
{% endif
अगर यूजर logged in है तोह उसका नाम show होगा, नहीं toh “Welcome, Guest!” दिखाई देगा!.
Looping Tags (for Loop)
अगर एक ही type के multiple elements दिखाने हैं, तोह for loop का उसे होता है!.
Example:
{% for product in collection.products %}
<h2>{{ product.title }}</h2>
{% endfor %}
यह loop *collection के सारे products* का title दिखायेगा!.
Liquid Filters (| Operator) – Data Manipulation
Filters का use *data को format और manipulate* करने के लिए होता है!. यह एक variable के output को modify करते हैं!.
FilterDescription Example Output capitalize पहला letter बड़ा करता है{{ “Shopify” | capitalize }} upcase सबको uppercase में करता है! {{ “hello” | upcase }} downcase सबको lowercase में करता है! {{ “Hello” | downcase }} replace एक string को replace करता है! {{ “Hello वर्ल्ड ” | replace: “World”, “Shopify” }} truncate Text को छोटा करता है! {{ “This is a long text” | truncate: 10 }}
Example:
<p>{{ product.title | upcase }}</p>
अगर product का title “T-shirt” है, तोह output hoga: T-SHIRT
Shopify Secure Environment
Shopify Liquid direct database access या server-side execution को allow नहीं करता। यह Shopify stores को secure रखता है और unauthorized access को रोकता है।
Logic और Control Flow को Support करता है
Liquid if-else conditions, loops और case switches को support करता है।
Example:
{% if customer %}
<p>Welcome back, {{ customer.first_name }}!</p>
{% else %}
<p>Welcome, Guest!</p>
{% endif %}
Logged-in user को उसका नाम दिखाएगा, बाकी users को “Guest” दिखाएगा।
Example:
{% for product in collection.products %}
<h2>{{ product.title }}</h2>
{% endfor %}
Collection के सभी products को loop करेगा और उनका title show करेगा।
Filters से Output को Modify कर सकते हैं!
Filters output को format करने के लिए उपयोग किए जाते हैं।
Example:
{{ product.price | money }} <!-- Price को currency format में दिखाएगा -->
{{ article.published_at | date: "%B %d, %Y" }} <!-- Date format को change करेगा -->
{{ product.title | upcase }} <!-- Product title को UPPERCASE में convert करेगा -->
Modular और Reusable Code
Liquid snippets और sections को support करता है, जिससे themes को modular बनाया जा सकता है। Developers बार-बार use होने वाले elements को snippets में लिख सकते हैं।
Example:
हम button element के लिए एक snippet file create कर लेंगे और अब code में जहा button की जरुरत होंगी वह पे हम इस snippet file को call करेंगे!.
Button element:
<button class="btn">{{ button_text }}</button>
Snippet file को किसी भी file में include कर सकते है!.
{% include 'button', button_text: 'Buy Now' %}
Dynamic Sections के लिए
Shopify Online Store 2.0 में Liquid + JSON को sections define करने के लिए उपयोग किया जाता है। Store owners Shopify Theme Editor में sections को drag & drop कर सकते हैं।
Example:
{% if section.settings.heading != blank %}
<h2>{{ section.settings.heading }}</h2>
{% endif %}
{
"name": "Hero Section",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Welcome to Our Store"
}
]
}
Blocks और Sections का उपयोग
Theme flexibility के Shopify online Store 2.0 में Section Everywhere feature आया है, जीएससे layouts को ज्यादा flexible बनाया जा सकता है!. Developers custom sections बना सकते हैं जो Shopify theme editor में edit किए जा सकते हैं।
Example:
{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "title",
"label": "Section Title"
}
]
}
{% endschema %}
Metafields का Support
Shopify Metafields extra data store करने के लिए उपयोग किए जाते हैं, जैसे कि custom product specifications, extra descriptions, badges, etc.
Example:
{{ product.metafields.custom.ingredients }}
Product से custom ingredient list को show करेगा।
Liquid Shopify developers के लिए एक *must-learn* language है जो dynamic content को efficiently manage करने की सुविधा देती है!.
अगर आप Shopify theme development या customization में interested हैं, तोह Liquid का अच्छा knowledge होना ज़रूरी है!.
