LetBuyy पर Liquid थीम कैसे काम करती हैं

Liquid सिंटैक्स की मूल बातें

{# Output — double curly braces #}
{{ product.title }}
{{ product.price | money }}

{# Tags — logic and flow control #}
{% if product.available %}
  <button>Add to Cart</button>
{% else %}
  <p>Out of Stock</p>
{% endif %}

{# Loops #}
{% for variant in product.variants %}
  <option value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}

मुख्य Liquid ऑब्जेक्ट

उपयोगी फ़िल्टर

{{ product.price | money }}              {# ₹1,499 #}
{{ product.description | truncate: 150 }}
{{ product.title | upcase }}
{{ image | image_url: width: 800 }}
{{ product.created_at | date: "%d %B %Y" }}

थीम की संरचना

• layout/theme.liquid: मूल HTML आवरण, जिसमें <head> और <body> हैं
• templates/*.liquid: पेज-विशिष्ट टेम्पलेट—product, collection, index, cart
• sections/*.liquid: दोबारा उपयोग होने वाले, व्यापारी द्वारा सेट किए जा सकने वाले अनुभाग
• snippets/*.liquid: छोटे पुनः उपयोग भाग—उत्पाद कार्ड, कीमत प्रदर्शन
• assets/: CSS, JS और चित्र फाइलें
• config/settings_schema.json: व्यापारी द्वारा संपादित थीम सेटिंग परिभाषित करता है

अनुभाग: व्यापारी अनुकूलन की परत

अनुभाग बिना कोड थीम बदलने देते हैं। स्कीमा में पाठ, रंग, चित्र और बूलियन सेटिंग परिभाषित करें; व्यापारी Liquid छुए बिना दृश्य संपादक में बदल सकता है।