হেডার হলো আপনার স্টোরের একদম উপরের বার, যেখানে থাকে আপনার লোগো, মেনু, সার্চ, কার্ট, ও দেশ বাছাই। এই আর্টিকেলে হেডারের প্রতিটি সেটিং ও এর পাঁচটি ব্লক বোঝানো হয়েছে।
কোথায় পাবেন
বিল্ডার খুলে প্রিভিউতে হেডারে ক্লিক করুন, অথবা সেকশন ট্যাবে হেডার বেছে নিন। যোগ করতে নতুন সেকশন যোগ করুন ক্লিক করে লেআউট গ্রুপে হেডার বেছে নিন। যেকোনো পেজে প্রতি পেজে একটি হেডার রাখতে পারেন। প্রতিটি পেজ নিজস্ব কপি রাখে, তাই কাজ শেষে সব পেজে প্রয়োগ করুন ব্যবহার করুন, দেখুন সেকশন ও ব্লক।
হেডারে সবসময় একই পাঁচটি ব্লক থাকে: লোগো, মেনু, সার্চ করুন, কার্ট, এবং লোকালাইজেশন। এগুলো যোগ, সরানো বা সাজানো যায় না। এদের নিজস্ব অবস্থান ও সারি সেটিং দিয়ে আপনি এগুলো বসান।
হেডারের সেটিংস
- স্টিকি হেডার: উপরে স্ক্রল করলে কাস্টমাররা নিচে স্ক্রল করলে হেডার লুকায় এবং উপরে স্ক্রল করলে ফিরিয়ে আনে। সবসময় এটিকে উপরে ধরে রাখে। ছোট লোগোসহ স্টিকি কাস্টমাররা স্ক্রল করার পরে এটিকে উপরে রাখে এবং ছোট করে দেয় (কম প্যাডিং, ছোট লোগো)। কখনও না এটিকে পেজের সাথে স্ক্রল হয়ে চলে যেতে দেয়।
- প্রস্থ: পেজ কনটেন্টকে আপনার পেজের প্রস্থে রাখে, পুরো এক কিনারা থেকে অন্য কিনারা পর্যন্ত ছড়িয়ে দেয়।
- কালার স্কিম: হেডারের ব্যাকগ্রাউন্ড, টেক্সট ও লিংকের রং।
- স্বচ্ছ হেডার: হেডারের ব্যাকগ্রাউন্ড সরিয়ে দেয় যাতে হিরো ছবি ভেতর দিয়ে দেখা যায়। নিচে দেখুন।
- প্যাডিং (উপর, বাম, ডান, নিচ) এবং কাস্টম CSS ট্যাব।
স্বচ্ছ হেডার
এটি শুধু তখনই কাজ করে যখন হেডারের ঠিক নিচের প্রথম দৃশ্যমান সেকশনটি একটি হিরো, কারণ হেডার তার টেক্সট ও আইকনের জন্য হিরোর কালার স্কিম ধার নেয়। এটি নিজের ব্যাকগ্রাউন্ড, বর্ডার ও শ্যাডো সরিয়ে দেয়, এবং পেছনের অংশ হালকা ঝাপসা করে। কাস্টমাররা হিরো পার হয়ে স্ক্রল করলে হেডার আবার নিজের রং ফিরে পায়। সার্চ প্যানেল ও দেশের তালিকা হেডারের নিজের রং রাখে। হিরোর সেটিংস আছে হিরো সেকশন গাইডে।
লোগো
- লোগো: আপনার লোগোর ছবি বেছে নিন। ছবি না থাকলে আপনার স্টোরের নাম টেক্সট হিসেবে দেখায়।
- অবস্থান: বাম, মাঝখানে, বা ডান। প্রস্থ ও উচ্চতা: পিক্সেলে লোগো বক্সের সাইজ।
- ডেস্কটপ প্যাডিং: শুধু কম্পিউটারে লোগোর চারপাশের ফাঁকা জায়গা।
লোগোতে ক্লিক করলে আপনার হোম পেজ খোলে। এটি বন্ধ করতে লোগোতে ক্লিক করে হোমে যাওয়া আটকানো চালু করুন, দেখুন নিষেধাজ্ঞার সেটিংস।
মেনু
মেনু-তে আপনার একটি মেনু বেছে নিন। মেনু বাছাই করলে বাকি সেটিংস দেখায়। মেনু তৈরি করা হয় এখানে: কীভাবে নেভিগেশন মেনু তৈরি করে আমার হেডার ও ফুটারে যোগ করব?।
- ধরন: মেগা (কলামসহ বড় প্যানেল), ড্রপডাউন (সাধারণ তালিকা), বা ড্রয়ার (মেনু বাটনে খোলা একটি পাশের প্যানেল)।
- অবস্থান ও সারি: মেনুটি কোথায় বসবে। উপরে হলো লোগোসহ প্রধান সারি, নিচে এর নিচে একটি দ্বিতীয় সারি যোগ করে। ড্রয়ারের জন্য দেখায় না।
- কালার স্কিম: খোলা মেনু প্যানেলের রং।
- মোবাইল লেআউট: ফোন ও ট্যাবলেটে মেনু একটি ড্রয়ারে চলে যায়। এর বদলে হেডারের নিচে একটি বার হিসেবে দেখাতে নেভিগেশন বার চালু করুন, যার নিজস্ব নেভিগেশন বারের কালার স্কিম আছে। ড্রয়ারের জন্য দেখায় না।
সার্চ, কার্ট ও লোকালাইজেশন
- সার্চ করুন: একটি সার্চ আইকন যা একটি সার্চ ফিল্ড খোলে। অবস্থান (বাম বা ডান) ও সারি সেট করুন।
- কার্ট: আইটেমের সংখ্যাসহ কার্ট আইকন। কার্টের ধরন হলো ড্রয়ার (পাশের প্যানেল), ড্রপডাউন (আইকনের নিচে ছোট কার্ট), বা পেজ (কার্ট পেজ খোলে)। কালার স্কিম ড্রয়ার বা ড্রপডাউনের স্টাইল ঠিক করে। ড্রয়ার ও ড্রপডাউনে একটি ফ্রি শিপিং বার সুইচও আছে, দেখুন ফ্রি শিপিং বার কীভাবে কাজ করে?।
- লোকালাইজেশন: একটি বাটন যা আপনার মার্কেটগুলোর তালিকা দেখায় যাতে কাস্টমাররা দেশ বদলাতে পারেন। দেখাতে দেশ বাছাই চালু করুন। পতাকা দেখান বাটনে বর্তমান দেশের পতাকা দেখায়, নইলে একটি গ্লোব আইকন। অবস্থান ও সারি সেট করুন।
জেনে রাখুন
- স্বচ্ছ হেডার কাজ করছে না: হিরো হেডারের ঠিক নিচে আছে কিনা দেখুন। মাঝখানে একটি ঘোষণা বার বা অন্য কোনো সেকশন থাকলে এটি কাজ করে না।
- দেশ বাছাই দেখাচ্ছে না: এর জন্য অন্তত দুটি মার্কেট লাগে, দেখুন একাধিক দেশে বিক্রি করতে কীভাবে মার্কেট সেট আপ করব?।
- মেনুর আইটেম নেই: হেডার নয়, মেনুটিই এডিট করুন।