Shopify Liquid: থিম কাস্টমাইজেশনের জন্য সম্পূর্ণ গাইড
Shopify একটি জনপ্রিয় ই-কমার্স প্ল্যাটফর্ম, যেখানে ওয়েবসাইট ডিজাইন এবং কাস্টমাইজেশনের জন্য Liquid টেমপ্লেট ল্যাঙ্গুয়েজ ব্যবহার করা হয়। এটি Shopify-এর নিজস্ব টেমপ্লেট ইঞ্জিন, যা HTML, CSS, JavaScript-এর সাথে কাজ করে এবং ডাইনামিক কন্টেন্ট দেখানোর জন্য ব্যবহৃত হয়।
এই ব্লগ পোস্টে আমরা Liquid কী, কিভাবে এটি কাজ করে, এবং Shopify থিম কাস্টমাইজেশন এর জন্য এটি কীভাবে ব্যবহার করতে হয়, তা বিস্তারিতভাবে জানব।
---
Liquid কি এবং কেন এটি গুরুত্বপূর্ণ?
Liquid হলো একটি ওপেন-সোর্স টেমপ্লেট ল্যাঙ্গুয়েজ, যা Shopify থিম তৈরি ও কাস্টমাইজেশনের জন্য ব্যবহার করা হয়। এটি ব্যবহার করে ডাইনামিক ডেটা (যেমন: প্রোডাক্টের নাম, মূল্য, স্টক স্ট্যাটাস, গ্রাহকের তথ্য ইত্যাদি) ওয়েবসাইটে প্রদর্শন করা যায়।
✅ Shopify থিম সম্পূর্ণরূপে Liquid, HTML, CSS, এবং JavaScript দিয়ে তৈরি করা হয়।
✅ এটি ডায়নামিক কন্টেন্ট প্রদর্শন, লুপ, কন্ডিশন চেক, এবং ফরম্যাটিং এর জন্য ব্যবহৃত হয়।
✅ Shopify-এর Themes, Email Templates, Checkout Pages ইত্যাদির কাস্টমাইজেশন এর জন্য এটি অপরিহার্য।
---
Liquid এর মূল উপাদানসমূহ
1. Liquid Variables (ভ্যারিয়েবল)
Liquid ভ্যারিয়েবল ব্যবহার করে Shopify-এর বিভিন্ন ডেটা ডাইনামিকভাবে পেজে দেখানো যায়।
✅ উদাহরণ:
<h1>Welcome to {{ shop.name }}</h1>
<p>Our store currency: {{ shop.currency }}</p>
👉 এটি Shopify স্টোরের নাম ও কারেন্সি প্রদর্শন করবে।
---
2. Liquid Objects (অবজেক্টস)
Shopify-তে অনেক pre-defined objects রয়েছে, যা স্টোর, প্রোডাক্ট, কার্ট, গ্রাহক, ব্লগ ইত্যাদির তথ্য ধারণ করে।
✅ উদাহরণ:
<h2>{{ product.title }}</h2>
<p>Price: {{ product.price | money }}</p>
👉 এটি প্রোডাক্টের নাম ও মূল্য দেখাবে।
---
3. Liquid Filters (ফিল্টার)
Liquid ফিল্টার ব্যবহার করে ডেটাকে ফরম্যাট করা যায়।
✅ Example 1: টেক্সট পরিবর্তন করা
{{ "hello world" | upcase }}
Output:
HELLO WORLD
✅ Example 2: ডিসকাউন্ট প্রাইস দেখানো
Original Price: {{ product.price | money }}
Discounted Price: {{ product.price | times: 0.9 | money }}
👉 এটি মূল দামের ১০% ডিসকাউন্ট দেখাবে।
---
4. Liquid Conditions (শর্তাবলী)
Liquid-এ if, else, elsif ব্যবহার করে কন্ডিশন চেক করা যায়।
✅ উদাহরণ: প্রোডাক্টের স্টক চেক করা
{% if product.available %}
<p>In Stock</p>
{% else %}
<p>Out of Stock</p>
{% endif %}
👉 যদি প্রোডাক্ট স্টকে থাকে, তাহলে "In Stock" দেখাবে, নাহলে "Out of Stock" দেখাবে।
---
5. Liquid Loops (লুপস)
for loop ব্যবহার করে একাধিক প্রোডাক্ট বা ডেটা লিস্ট আকারে দেখানো যায়।
✅ Example: সমস্ত প্রোডাক্ট লিস্ট করা
{% for product in collection.products %}
<h3>{{ product.title }}</h3>
<p>Price: {{ product.price | money }}</p>
{% endfor %}
👉 এটি Shopify-এর একটি কালেকশনে থাকা সকল প্রোডাক্ট দেখাবে।
---
6. Liquid Comments (কমেন্ট লেখা)
Liquid-এ {% comment %} ... {% endcomment %} ব্যবহার করে কোডের মধ্যে কমেন্ট লেখা যায়।
✅ Example:
{% comment %}
এই কোডটি প্রোডাক্টের নাম দেখানোর জন্য ব্যবহার করা হচ্ছে।
{% endcomment %}
<h2>{{ product.title }}</h2>
---
Shopify থিম কাস্টমাইজেশন
1. হেডার ও ফুটার কাস্টমাইজেশন
header.liquid ফাইল এডিট করে মেনু, লোগো, সার্চ বক্স পরিবর্তন করা যায়।
footer.liquid ফাইল এডিট করে কন্টাক্ট ইনফো, সোশ্যাল মিডিয়া লিংক, কাস্টম টেক্সট যোগ করা যায়।
✅ উদাহরণ:
<div class="custom-header">
<h1>{{ shop.name }}</h1>
<p>Welcome to our Shopify Store!</p>
</div>
---
2. নতুন সেকশন বা ব্লক যোগ করা
Shopify-তে sections/ ফোল্ডারে নতুন সেকশন তৈরি করা যায়।
✅ Example: custom-section.liquid
{% schema %}
{
"name": "Custom Section",
"settings": [
{
"type": "text",
"id": "custom_text",
"label": "Enter Custom Text"
}
],
"presets": [
{
"name": "Custom Section"
}
]
}
{% endschema %}
<div class="custom-section">
<h2>{{ section.settings.custom_text }}</h2>
</div>
👉 এটি Theme Editor থেকে পরিবর্তন করা যাবে।
---
3. প্রোডাক্ট ডিসকাউন্ট ব্যাজ দেখানো
{% if product.compare_at_price > product.price %}
<span class="discount-badge">On Sale!</span>
{% endif %}
👉 যদি প্রোডাক্টের পুরাতন মূল্য বেশি হয়, তাহলে "On Sale!" ব্যাজ দেখাবে।
---
4. কার্ট ও চেকআউট কাস্টমাইজেশন
<form action="/cart" method="post">
<input type="number" name="updates[]" value="{{ item.quantity }}">
<button type="submit">Update Cart</button>
</form>
👉 এটি কার্ট আপডেটের জন্য একটি ফর্ম তৈরি করবে।
Liquid Shopify থিম ডেভেলপমেন্টের জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি HTML-এর মতো দেখতে হলেও, ডায়নামিক কন্টেন্ট ব্যবস্থাপনার জন্য অনেক বেশি শক্তিশালী। আপনি যদি Shopify-তে থিম কাস্টমাইজ করতে চান, তাহলে Liquid শেখা অপরিহার্য।
আপনি Shopify থিম নিয়ে কাজ করতে চাইলে নির্দিষ্টভাবে কোন অংশ কাস্টমাইজ করতে চান, তা আমাকে বলুন—আমি আপনাকে স্টেপ-বাই-স্টেপ গাইড করতে পারব!