চেহারা ও থিম বিল্ডার: সকল অপশনের ব্যাখ্যা
আপনার দোকানের চেহারা সংক্রান্ত সবকিছুই এখন এক জায়গায়। Theme Builder নিয়ন্ত্রণ করে আপনার রঙ, ফন্ট, হেডার, ফুটার এবং প্রতিটি পেজের আসল সেকশনগুলো, আর কাজ করার সাথে সাথেই ফলাফল দেখিয়ে দেয়। এই গাইডে প্রতিটি অংশ কী করে তা যেমন আছে, তেমনি আরও কাজের একটি জিনিসও আছে: কোন কাজ কোন ক্রমে করলে টুলটির সাথে লড়াই করতে হবে না।
কোথায় পাবেন
সাইডবার থেকে Theme Builder ওপেন করুন। দুটি জিনিস এর বাইরে থাকে, শুরুতেই জেনে রাখা ভালো:
- আপনার লোগো ও ফেভিকন থাকে Settings-এ, এখানে নয়।
- পুরোনো Customize পেজটি বাতিল হয়ে গেছে। বুকমার্ক থেকে থাকলে সেটি এখন Theme Builder-এই নিয়ে আসে।
বিল্ডারটি যেভাবে সাজানো
তিনটি অংশ:
বাঁ পাশের প্যানেলে তিনটি ট্যাব:
- Pages দিয়ে কোন পেজ সাজাবেন তা বাছাই
- Sections দিয়ে ওই পেজের ব্লকগুলোর ক্রমসহ তালিকা
- Global Settings-এ রঙ, ফন্ট, হেডার, ফুটার আর সব জায়গায় প্রযোজ্য সেটিংস
মাঝখানে আপনার দোকানের লাইভ প্রিভিউ, সাথে Desktop, Tablet ও Mobile বাটন। পরিবর্তনের সাথে সাথেই এটি হালনাগাদ হয়।
উপরের বারে আছে Undo, Redo ও Save।
ওই Save বাটনটিই আসল। আপনি চাপার আগ পর্যন্ত কাস্টমারদের জন্য কোনো পরিবর্তনই লাইভ হয় না, তাই নিশ্চিন্তে পরীক্ষা করতে পারেন আর Undo দিয়ে ফিরেও আসতে পারেন। আপনি যতক্ষণ সিদ্ধান্ত নিচ্ছেন, ক্রেতারা ততক্ষণ কিছুই বদলাতে দেখেন না।
থিম প্রিসেট
সুন্দর দোকান পাওয়ার সবচেয়ে দ্রুত উপায়। প্রতিটি প্রিসেট এক ট্যাপেই আপনার রঙ, ফন্ট, লেআউট ও পেজের গঠন বসিয়ে দেয়:
| প্রিসেট | যাদের জন্য তৈরি |
|---|---|
| Default | পরিচ্ছন্ন ও ভারসাম্যপূর্ণ, শুরু করার নিরপেক্ষ ভিত্তি |
| Volt | ইলেকট্রনিক্স ও গ্যাজেট, টেক-ধাঁচের পরিচ্ছন্ন ডিজাইন |
| Bloom | বিউটি ও কসমেটিকস, কোমল ও মার্জিত |
| Fresh | মুদি ও নিত্যপ্রয়োজনীয় পণ্য, পরিচ্ছন্ন ও দ্রুত |
| Haven | হোম ও ফার্নিচার, উষ্ণ ও রুচিশীল |
| Care | ফার্মেসি ও স্বাস্থ্যসেবা, শান্ত ও নির্ভরযোগ্য |
লক্ষ্য করুন: প্রিসেট প্রয়োগ করলে আপনার বর্তমান লেআউট বদলে যায়, আর বিল্ডার তার আগে একবার নিশ্চিত করতে বলে। হাতে করা সব কাস্টমাইজেশনই মুছে যায়, তাই আগে প্রিসেট বাছুন, তারপর কাস্টমাইজ করুন, উল্টোটা নয়।
আপনি যা বিক্রি করেন তার সবচেয়ে কাছাকাছি প্রিসেট দিয়ে শুরু করুন। আগে প্রিসেট, তারপর রঙ, তারপর সেকশন, এই ক্রমেই সবচেয়ে কম পরিশ্রম হয়।
যে পাঁচটি পেজ সাজানো যায়
| পেজ | কী |
|---|---|
| Home Page | আপনার মূল ল্যান্ডিং পেজ |
| Product Page | একটি পণ্যের বিস্তারিত পেজ |
| Category Page | ক্যাটাগরি অনুযায়ী ফিল্টার করা পণ্য |
| Search Page | সার্চের ফলাফল |
| Checkout Page | অর্ডার ফর্ম ও পেমেন্ট |
চেকআউটসহ প্রতিটিই সেকশন দিয়ে তৈরি। শেষেরটি বিশেষভাবে জেনে রাখার মতো, কারণ চেকআউটে ছোট পরিবর্তনও সাধারণত হোমপেজের যেকোনো পরিবর্তনের চেয়ে বিক্রিতে বেশি প্রভাব ফেলে।
সেকশন
সেকশন মানে পেজের একটি আনুভূমিক ব্লক। এগুলো যোগ করা, ক্রম বদলানো, সেটিংস পাল্টানো বা মুছে ফেলা যায়।
| সেকশন | কোন পেজে | কী করে |
|---|---|---|
| Hero Banner | হোম | শুরুর বড় ব্যানার |
| Image Slider | হোম | ঘুরে ঘুরে দেখানো ছবির সেট |
| Product Grid | হোম | আপনার বাছাই করা পণ্যের ব্লক |
| Category Showcase | হোম | ক্যাটাগরিগুলো ছবিসহ টাইল আকারে |
| Banner ও Banner Row | হোম | একক বা পাশাপাশি প্রচার ব্যানার |
| Rich Text | হোম | মুক্ত লেখা, হেডিং ও তালিকা |
| Testimonials | হোম | কাস্টমারের মন্তব্য |
| Trust Badges | হোম, চেকআউট | ডেলিভারি, রিটার্ন ও নিরাপত্তার আশ্বাস |
| Spacer | যেকোনো | সেকশনের মাঝে ফাঁকা জায়গা |
| Product Info | পণ্য | ছবি, দাম, সংক্ষিপ্ত বিবরণ, ভ্যারিয়েন্ট, কার্টে যোগ |
| Product Description | পণ্য | আপনার পূর্ণ বিবরণ |
| Related Products | পণ্য | আর কী দেখা যেতে পারে |
| Category Header | ক্যাটাগরি | ক্যাটাগরির শিরোনাম ও ভূমিকা |
| Category Products | ক্যাটাগরি | পণ্যের তালিকা |
| Search Bar ও Search Results | সার্চ | খোঁজা ও তার ফলাফল |
| Checkout Form | চেকআউট | কাস্টমারের তথ্য, ডেলিভারি ও পেমেন্ট |
যেকোনো সেকশনে ক্লিক করলে তার সেটিংস খোলে। সেকশন অনুযায়ী সেটিংস বদলায়, তাই Product Grid জিজ্ঞেস করে কোন পণ্য দেখাবে ও কয় কলামে, আর Hero Banner চায় ছবি, লেখা ও একটি বাটন। প্রতিটি সেকশনে একটি Motion গ্রুপও আছে: সেকশনটি কীভাবে হাজির হবে তার Reveal স্টাইল (স্থির রাখতে None) আর গ্রিড-ধরনের সেকশনে Stagger items। Design ট্যাবে Animations চালু করলেই কেবল এগুলো কাজ করে।
সব সেকশন যোগ করার লোভ সামলান। ব্যানার, ক্যাটাগরি শোকেস আর দুটি প্রোডাক্ট গ্রিডের হোমপেজ নয়টি সেকশনের হোমপেজের চেয়ে ভালো ফল দেয়, কারণ পণ্যে পৌঁছাতে ছয়টি ব্লক স্ক্রল করতে হলে ক্রেতা সাধারণত আর পৌঁছানই না।
গ্লোবাল সেটিংস
এগুলো আপনার পুরো স্টোরফ্রন্টে প্রযোজ্য।
দোকানের রং
দশটি তৈরি প্যালেট: Fresh Green, Ocean Blue, Classic Black, Royal Purple, Sunset Orange, Rose Pink, Teal, Crimson Red, Chocolate ও Gold on Black। একটি বাছলেই প্রতিটি বাটন, লিংক ও অ্যাকসেন্ট একসাথে বদলে যায়।
কোনোটিই আপনার ব্র্যান্ডের সাথে না মিললে কাস্টম রং চালু করে চারটি মান নিজে ঠিক করুন: ব্যাকগ্রাউন্ড, টেক্সট, ব্র্যান্ড বা বাটন, আর অ্যাকসেন্ট বা Buy Now।
অনেক দোকান দেখে পাওয়া একটি পরামর্শ: তৈরি প্যালেটগুলো পড়ার উপযোগী কি না তা যাচাই করা আছে। হাতে বাছা রং প্রায়ই তা থাকে না, আর সাদার উপর হালকা ধূসর লেখা হলো সেই সাধারণ ভুল, যাতে দোকান চুপচাপ সেসব ক্রেতা হারায় যাঁরা স্বচ্ছন্দে পড়তে পারছেন না।
ফন্ট
বাংলা ফন্টের মধ্যে আছে Noto Sans Bengali, Hind Siliguri, Baloo Da 2, Anek Bangla ও Tiro Bangla। ইংরেজি ফন্টে আছে Inter, Manrope, DM Sans, Poppins, Nunito, Montserrat ও Work Sans, সাথে Playfair Display, Lora ও Fraunces এর মতো ডিসপ্লে ফন্ট।
আপনার স্টোরফ্রন্ট বাংলায় হলে একটি বাংলা ফন্ট বেছে নিন। কেবল ইংরেজি সমর্থন করা ফন্ট নিলে বাংলা লেখার জন্য এমন কিছু বসে যাবে যা আপনি বাছেননি, আর ফলাফলটি দেখতে সামান্য বেখাপ্পা লাগে, যদিও কারণটা সহজে চোখে পড়ে না।
স্টাইল ও লেআউট
- কোণার গোলতা, ধারালো কোণ থেকে পুরো গোল পর্যন্ত
- বাটন, এর আকৃতি ও ধরন
- পেজের প্রস্থ, পুরো চওড়া নাকি বাক্সবন্দি
- সেকশনের মাঝে ফাঁকা জায়গা
- Animations, ডিফল্টে বন্ধ, সাথে Subtle বা Normal মোশন ইনটেনসিটি
প্রোডাক্ট কার্ড বাটন
তালিকায় প্রতিটি পণ্যের কার্ডে কী দেখাবে তা ঠিক করে: Add to Cart ও Buy Now, শুধু Add to Cart, শুধু Buy Now, অথবা কোনো বাটন নয়, যাতে পুরো কার্ডেই পণ্যের লিংক থাকে। চাইলে বাটনগুলো কেবল হোভারে দেখানোর ব্যবস্থাও করা যায়।
বাংলাদেশের বেশিরভাগ দোকানে কার্ডেই Buy Now রাখলে চেকআউট পর্যন্ত পথ লক্ষণীয়ভাবে ছোট হয়ে আসে। নিজের সংখ্যার সাথে মিলিয়ে একবার পরীক্ষা করে দেখার মতো।
ডিসকাউন্ট ব্যাজ
ছাড় দেওয়া পণ্যে সাশ্রয়ের পরিমাণ কীভাবে দেখাবে। Label সেটিংয়ে দুটি ফরম্যাট আছে: Percent off ছাড়কে শতাংশে দেখায়, যেমন ছাড় 20%, আর Amount saved কত টাকা সাশ্রয় হচ্ছে তা দেখায়, যেমন সাশ্রয় ৳200। ব্যাজটি আপনার স্টোরফ্রন্টের ভাষা অনুসরণ করে, তাই ইংরেজি স্টোরফ্রন্টে এর বদলে Discount 20% বা Save ৳200 দেখাবে।
চাইলে Label text দিয়ে লেখাটি নিজের মতো বদলানো যায়: নিজের লেখা দিন এবং যেখানে সংখ্যাটি বসবে সেখানে {percent} (টাকা-সাশ্রয় ফরম্যাটে {amount}) লিখুন — যেমন {percent}% discount দেখাবে 20% discount, বা -{percent}% দেখাবে -20%। ঘরটি খালি রাখলে ডিফল্ট লেখা দেখাবে।
হেডার
- ধরন ও ব্যাকগ্রাউন্ড, যার মধ্যে স্টিকি ও স্বচ্ছ অপশনও আছে
- লোগোর অবস্থান ও পেজের প্রস্থ
- গঠন, এক লাইনে নাকি একাধিক লাইনে
- সার্চ, ক্যাটাগরি ও অর্ডার ট্র্যাক এর সুইচ
- লোগো সেটিংস, যেখানে ডেস্কটপ ও মোবাইলে সর্বোচ্চ প্রস্থ আলাদা করে দেওয়া যায়
তিনটি বাড়তি জিনিস আলাদা করে বলার মতো:
Announcement bar হলো হেডারের উপরের সেই স্ট্রিপ, যেখানে একটি বার্তা ও চাইলে একটি লিংক দেওয়া যায়। “১০০০ টাকার উপরে ফ্রি ডেলিভারি” বা ঈদের অর্ডারের শেষ তারিখ লেখার জায়গা এটিই। বার্তাটি পুরোনো হয়ে গেলে বন্ধ করে দিন, কারণ মেয়াদোত্তীর্ণ ঘোষণা না থাকার চেয়েও খারাপ।
Top utility bar হেডারের উপরে সরু একটি বার যোগ করে, যেখানে ফোন নম্বর ও ছোট কিছু লিংক রাখা যায়।
Header button আপনার হেডারে নিজের লেখা ও লিংকসহ একটি কল-টু-অ্যাকশন বাটন বসায়।
ফুটার
ফুটার তৈরি হয় ব্লক দিয়ে, আর কোনগুলো রাখবেন তা আপনি ঠিক করেন:
| ব্লক | কী দেখায় |
|---|---|
| Store name / brand | আপনার নাম বা লোগো |
| Link list (menu) | লিংকের একটি কলাম |
| Text / about | দোকান নিয়ে ছোট একটি অনুচ্ছেদ |
| Image | যেকোনো ছবি |
| Social icons | Facebook, Instagram, YouTube, TikTok, WhatsApp, Messenger, X, LinkedIn, Pinterest |
| Contact info | আপনার ফোন, ইমেইল ও ঠিকানা |
| Payment methods | আপনি যেসব পেমেন্ট নেন |
| Trust badges | ডেলিভারি, রিটার্ন, নিরাপদ পেমেন্ট, ক্যাশ অন ডেলিভারি ইত্যাদি |
বাংলাদেশে কন্টাক্ট ও ট্রাস্ট ব্লক সত্যিকারের কাজ করে। দোকানটি আসল কি না ভাবতে থাকা ক্রেতা খোঁজেন একটি ফোন নম্বর আর রিটার্নের কথা, আর দুটোর একটিও না পাওয়া চলে যাওয়ার যথেষ্ট কারণ।
লাইভ প্রিভিউ
প্রিভিউটি কোনো আনুমানিক চিত্র নয়, বরং সেভ না করা পরিবর্তনসহ আপনার আসল স্টোরফ্রন্টই। Desktop, Tablet ও Mobile বাটন দিয়ে প্রতিটি দেখে নিন।
মোবাইল ভিউটি দায়সারাভাবে নয়, ভালোভাবেই দেখুন। বাংলাদেশের বিপুল সংখ্যক ক্রেতা ফোন থেকেই আসেন, তাই যে হিরো ব্যানারের লেখা কেবল ডেস্কটপেই ধরে, সেটি আপনার বেশিরভাগ ট্রাফিকের জন্যই সমস্যা। কেবল একটি ভিউ নিখুঁত করার সময় থাকলে মোবাইলটাই নিখুঁত করুন।
কাজের যুক্তিসঙ্গত ক্রম
১. আপনি যা বিক্রি করেন তার সাথে মেলে এমন প্রিসেট বাছুন। ২. ব্র্যান্ড অনুযায়ী রঙ ও ফন্ট ঠিক করুন। ৩. হোমপেজের সেকশন সাজান, ছোট রেখে। ৪. হেডার সেট করুন, বলার মতো কিছু থাকলে ঘোষণা বারসহ। ৫. যোগাযোগের তথ্য ও ট্রাস্ট ব্যাজসহ ফুটার তৈরি করুন। ৬. প্রতিটি পেজের মোবাইল প্রিভিউ দেখে নিন। ৭. সেভ করুন।
এই ক্রমে করলে প্রিসেট কখনোই আপনার কাজ মুছে দেয় না, কারণ সেটি সবার আগে বসে।
সাধারণ প্রশ্ন
| যা দেখছেন | কারণ |
|---|---|
| পরিবর্তনগুলো লাইভ দোকানে নেই | আপনি এখনো Save চাপেননি |
| প্রিসেট আপনার কাস্টমাইজেশন মুছে দিয়েছে | প্রিসেট পুরো লেআউট বদলে দেয়। কাস্টমাইজ করার আগেই এটি প্রয়োগ করুন |
| Customize পেজটি নেই | এটি বাতিল হয়েছে, এখন Theme Builder-এ নিয়ে যায় |
| লোগো ও ফেভিকনের সেটিং খুঁজে পাচ্ছেন না | সেগুলো Settings-এ থাকে, বিল্ডারে নয় |
| বাংলা লেখা দেখতে বেখাপ্পা লাগছে | কেবল ইংরেজির ফন্ট বেছেছেন। বাংলা ফন্টগুলোর একটি নিন |
| লেখা পড়তে কষ্ট হচ্ছে | কাস্টম রঙে যথেষ্ট বৈসাদৃশ্য নেই। তৈরি প্যালেট ব্যবহার করে দেখুন |
| হোমপেজে কেনাকাটা ধীর মনে হচ্ছে | প্রথম পণ্যের আগে সেকশন অনেক বেশি |
মোবাইল অ্যাপে
মার্চেন্ট অ্যাপে স্টোরফ্রন্টের লাইভ প্রিভিউসহ পূর্ণাঙ্গ নেটিভ Theme Builder আছে, তাই ফোন থেকেই রঙ বদলানো, সেকশন সাজানো বা ঘোষণা বার সম্পাদনা করে সাথে সাথে ফল দেখা যায়। এটি কেবল ছোটখাটো সংশোধনের জন্য নয়, সত্যিকারের কাজের জন্যই ব্যবহারযোগ্য।
টিপস
- আগে প্রিসেট, পরে কাস্টমাইজেশন। উল্টো করলে নিজের কাজ নিজেই হারাবেন।
- হোমপেজ ছোট রাখুন। পেজের উপর থেকে প্রথম পণ্যের মাঝের প্রতিটি সেকশনই কিছু ক্রেতা কেড়ে নেয়।
- সেভ করার আগে প্রতিটি পেজের মোবাইল প্রিভিউ দেখে নিন। আপনার বেশিরভাগ কাস্টমারই ফোনে।
- ঘোষণা বারে একটি স্পষ্ট ও চলতি বার্তা রাখুন, আর পুরোনো হয়ে গেলে বন্ধ করে দিন।
- ফুটারে যোগাযোগের তথ্য ও ট্রাস্ট ব্যাজ রাখুন। সাজসজ্জার যেকোনো কিছুর চেয়ে এগুলোই বেশি বিক্রি এনে দেয়।
- নির্দ্বিধায় Undo ব্যবহার করুন। Save না চাপা পর্যন্ত কিছুই লাইভ হয় না।
এরপর
আলাদা আলাদা বিষয় আরও বিস্তারিত জানতে দেখুন থিম বিল্ডার দিয়ে দোকান সাজানো, হোমপেজ তৈরি, হেডার, ফুটার ও মেনু, এবং লোগো ও ফেভিকন।
আরও সাহায্য দরকার?
আমাদের টিম আপনার পাশে আছে। যোগাযোগ করুন, আমরা সমাধান করে দেব।