Liquid is LetBuyy's template language for storefronts. It's a Ruby-inspired syntax that lets you render dynamic store data in HTML templates. Every LetBuyy theme is a Liquid theme — or a React theme with Liquid fallback.
Liquid Syntax Basics
{# 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 %}Core Liquid Objects
- product — current product with title, handle, price, variants, images, metafields
- collection — current collection with products and metadata
- cart — current cart state with items, total, item count
- customer — authenticated customer with order history
- shop — store settings, currency, timezone
- request — URL, path, host information
Useful Filters
{{ product.price | money }} {# ₹1,499 #}
{{ product.description | truncate: 150 }}
{{ product.title | upcase }}
{{ image | image_url: width: 800 }}
{{ product.created_at | date: "%d %B %Y" }}Theme Architecture
- layout/theme.liquid: Root HTML wrapper, includes <head> and <body>
- templates/*.liquid: Page-specific templates (product, collection, index, cart)
- sections/*.liquid: Reusable, merchant-configurable page sections
- snippets/*.liquid: Small reusable partials (product card, price display)
- assets/: CSS, JS, and image files
- config/settings_schema.json: Defines merchant-editable theme settings
Sections: The Merchant Customization Layer
Sections make themes merchant-customizable without code. Define settings in the section's schema — text, colors, images, booleans — and merchants can edit them in the visual theme editor without touching Liquid.
React Hybrid Themes
LetBuyy supports hybrid themes where product listing and checkout use React for interactive performance, while editorial pages (homepage, about, blog) use Liquid for fast static rendering.