আপনার storefront সাজানোর গাইড

বড় screen-এ চিহ্নিত অংশ থেকে Add / Update বা Details খুলুন। ছোট screen-এ ছবির নিচের section shortcuts তালিকা ব্যবহার করুন। প্রতিটি section-এর শিরোনামের পাশে একটি Preview button আছে। পূর্ণ ছবি থেকে বড় করে screenshot দেখা যাবে।

1. Announcement Bar Login to manage → Details ↓

2. Logo, Search ও Account Header Login to manage → Details ↓

3. Navigation Login to manage → Details ↓

4. Hero Banner Login to manage → Details ↓

5. Category Shortcuts Login to manage → Details ↓

6. Campaign Login to manage → Details ↓

7. Promotional Banner Login to manage → Details ↓

8. Product Section Login to manage → Details ↓

9. আরেকটি Category/Product Section Login to manage → Details ↓

10. অতিরিক্ত Category/Product Section Login to manage → Details ↓

11. Service Benefits Login to manage → Details ↓

12. Footer Login to manage → Details ↓

শুরু করার আগে

1. নিজের Store Owner account-এ login করুন। Store ও domain ঠিক আছে কি না নিশ্চিত করুন।
2. আগে Site Settings → Categories → Products তৈরি করুন। তারপর Navigation, Banners, Campaigns ও Homepage CTAs সাজান।
3. নিজের original image ও সঠিক destination link প্রস্তুত রাখুন। এই screenshot-এর ছোট অংশগুলো নির্দেশনার জন্য; এগুলো upload করার artwork নয়।
4. Save করার পর নিজের store-এর domain খুলে desktop ও mobile দুই জায়গায় দেখুন। এই backend-এর settings দেখানোর জন্য frontend-এ সংশ্লিষ্ট integration থাকতে হবে।

ধাপে ধাপে সেটআপ

1. Announcement Bars খুলে নতুন announcement তৈরি করুন।
2. Left Text-এ নিজের পছন্দের message লিখুন। সুন্দরভাবে দেখাতে প্রায় ৬–৮ শব্দের লেখা রাখতে পারেন। উদাহরণ: “Free Shipping on Orders Over ৳500”। নিজের store-এ প্রযোজ্য offer বা অন্য তথ্যও লিখতে পারেন।
3. Center Text-এ নিজের পছন্দের message লিখুন; প্রায় ৬–৮ শব্দ রাখতে পারেন। উদাহরণ: “Cash on Delivery Available Across Bangladesh”। এই লেখাটিই ব্যবহার করা বাধ্যতামূলক নয়।
4. Right Text-এ নিজের পছন্দের message লিখুন; প্রায় ৫–৭ শব্দ রাখতে পারেন। উদাহরণ: “Need Help Call Our Support Team”। চাইলে নিজের support number বা অন্য প্রয়োজনীয় তথ্য দিন।
5. Preview-এ দেখুন: desktop-এ Left Text বামে, Center Text মাঝখানে ও Right Text ডানে দেখাবে। ছোট mobile screen-এ বর্তমান frontend শুধু Center Text দেখায়; তাই গুরুত্বপূর্ণ message মাঝখানে রাখতে পারেন।
6. নিজের brand অনুযায়ী Background Color ও Text Color নির্বাচন করুন। উদাহরণ হিসেবে গাঢ় সবুজ background ও সাদা text ব্যবহার করা যায়; অন্য পাঠযোগ্য রংও বেছে নিতে পারেন। প্রকাশ করতে Status: active দিয়ে save করুন। একাধিক বার হলে Sort Order দিয়ে নিজের পছন্দের ক্রম ঠিক করুন।

Frontend Preview · Announcement Bar — উপরের বার

Close ×

এই উদাহরণে desktop-এর বাম, মাঝ ও ডান অংশে লেখার অবস্থান দেখানো হয়েছে। নিজের store-এর message ব্যবহার করুন।

Left Text · ৬–৮ শব্দCenter Text · ৬–৮ শব্দRight Text · ৫–৭ শব্দ

Free Shipping on Orders Over ৳500Cash on Delivery Available Across BangladeshNeed Help Call Our Support Team

ছোট mobile screen-এ শুধু মাঝের message দেখাবে। Preview-টি sample; এটি আপনার saved announcement নয়।

সহায়ক তথ্যশব্দসংখ্যা সুন্দরভাবে দেখানোর পরামর্শ; এটি form-এর বাধ্যতামূলক word limit নয়। এগুলো প্রদর্শনের লেখা। Free shipping বা COD কার্যকর করতে shipping/payment configuration আলাদাভাবে লাগবে। Track Order, Help Center ও Become a Seller-এর পৃথক clickable link এবং icon layout frontend-এ তৈরি করতে হবে।

ধাপে ধাপে সেটআপ

1. General group-এ Site Name হিসেবে নিজের store-এর নাম লিখুন। নিজের Site Logo ও Site Favicon আপলোড করুন। Screenshot-এর OneHaat.bd নাম ও logo শুধু উদাহরণ।
2. Primary Color নিজের পছন্দ ও brand অনুযায়ী দিন। Contact group-এ নিজের Phone Number, Email Address ও Address পূরণ করে save করুন।
3. Storefront খুলে logo ও contact তথ্য যাচাই করুন। Search দিয়ে নিজের store-এর একটি product খুঁজুন; login, wishlist ও cart link-ও পরীক্ষা করুন।

Frontend Preview · Logo, Search ও Account Header

Close ×

সহায়ক তথ্যSearch box, account icon, wishlist badge ও cart total frontend component-এর কাজ। Site Settings-এ logo বদলালে এই component-গুলোর layout নিজে থেকে বদলাবে না। Logo-তে পরিষ্কার PNG/WebP ব্যবহার করুন; screenshot-এর logo crop দোকানের আসল logo file-এর বিকল্প নয়।

ধাপে ধাপে সেটআপ

1. নিজের store-এ যে menu দেখাতে চান, সেগুলোর navbar item তৈরি করুন। উদাহরণ: Home, New Arrivals বা আপনার পছন্দের কোনো category। Screenshot-এর menu-গুলো ব্যবহার করা বাধ্যতামূলক নয়।
2. নিজের পছন্দের Name, store-এর মধ্যে unique Slug এবং সংশ্লিষ্ট চালু frontend page-এর URL দিন। প্রয়োজনে পছন্দের Icon দিন।
3. Sort Order দিয়ে নিজের পছন্দের ক্রম সাজান। প্রকাশ করতে Status: active রাখুন। প্রয়োজন হলে সংশ্লিষ্ট navbar item-এর sub-navigation যোগ করুন।

Frontend Preview · Navigation — প্রধান মেনু

Close ×

সহায়ক তথ্যশুধু menu item তৈরি করলে নতুন frontend page তৈরি হয় না। বর্তমান frontend-এ category dropdown, submenu ও mobile menu আছে; destination URL ও product assignment ঠিক থাকতে হবে।

ধাপে ধাপে সেটআপ

1. নিজের campaign বা store-এর জন্য পছন্দের Title ও প্রয়োজন হলে Subtitle লিখুন। উদাহরণ: Title “Discover Our New Collection”, Subtitle “Explore our latest arrivals”। নিজের তথ্য অনুযায়ী লেখা দিন; কোনো discount লেখা বাধ্যতামূলক নয়।
2. চাইলে Small tag (smtag) লিখুন, যেমন “NEW COLLECTION”। নিজের Banner Image আপলোড করুন। সর্বোচ্চ file size 2 MB।
3. নিজের পছন্দের Primary Button-এর লেখা দিন, যেমন “Shop Now” বা “Explore Collection”। Primary Button URL-এ যে page খুলতে চান তার সঠিক link দিন। Button Color ও Button Text Color নিজের brand অনুযায়ী ঠিক করুন।
4. প্রকাশ করতে Status: active এবং নিজের পছন্দের Sort Order দিন। একাধিক slide চাইলে আলাদা banner তৈরি করুন।

Frontend Preview · Hero Banner — প্রধান ব্যানার

Close ×

সহায়ক তথ্যপ্রস্তাবিত image 1720 × 490 px (প্রায় 3.5:1); এটি design suggestion, বাধ্যতামূলক upload dimension নয়। ছবির ভেতরে লেখা থাকলে একই title overlay করে দ্বিগুণ লেখা দেখাবেন না। Slider arrows, dots, auto-play ও mobile crop frontend-এ পরিচালিত হবে।

ধাপে ধাপে সেটআপ

1. নিজের বিক্রি করা product অনুযায়ী পছন্দের category তৈরি করুন। উদাহরণ: Books, Clothing বা Groceries। Screenshot-এর category-গুলোই তৈরি করতে হবে এমন নয়।
2. নিজের পছন্দের Name, unique Slug, সংশ্লিষ্ট Image এবং Sort Order দিন। প্রকাশ করতে Status: active রাখুন। Category image সর্বোচ্চ 2 MB; square image ব্যবহার করতে পারেন, যেমন 300 × 300 px।
3. প্রতিটি shortcut থেকে সংশ্লিষ্ট category page খুলছে কি না পরীক্ষা করুন।

Frontend Preview · Category Shortcuts — গোল ছবির তালিকা

Close ×

সহায়ক তথ্যবৃত্তাকার image, horizontal scrolling এবং এক লাইনে কয়টি category থাকবে তা frontend layout নির্ধারণ করবে। শুধু category তৈরি করলে product category-তে যুক্ত হয় না; product edit করে category নির্বাচন করুন।

ধাপে ধাপে সেটআপ

1. নিজের পছন্দের campaign Name লিখুন। উদাহরণ: “Weekend Offers” বা “Flash Sale”। নিজের offer-এর Starts At ও Ends At দিন; শেষ সময় অবশ্যই শুরুর পরে হবে।
2. Campaign প্রকাশ করতে Status: active এবং Is Active চালু করুন। নিজের প্রয়োজন অনুযায়ী Is Featured ও Priority সেট করুন।
3. Campaign-এর product management থেকে নিজের পছন্দের product যোগ করুন এবং ব্যবসার সিদ্ধান্ত অনুযায়ী offer price/discount নির্ধারণ করুন। Screenshot-এর discount অনুসরণ করা বাধ্যতামূলক নয়।
4. Save করার পর offer-এর সময়, পুরোনো/নতুন দাম এবং cart-এ কার্যকর দাম যাচাই করুন।

Frontend Preview · Campaign — অফারের অংশ

Close ×

সহায়ক তথ্যবর্তমান frontend-এ campaign banner, product carousel, discount badge ও quick-add আছে। Screenshot-এর countdown বা নির্দিষ্ট ছয়টি card-এর layout একইভাবে আছে ধরে নেবেন না। ছবির rating ও review count শুধু উদাহরণ। Campaign detail page-এর ব্যবহার নিচের Campaign Detail Page topic-এ আছে।

ধাপে ধাপে সেটআপ

1. নিজের store-এ যে product, category বা campaign প্রচার করতে চান, তার জন্য CTA তৈরি করুন। Screenshot-এর Smartphones ও Beauty Essentials শুধু উদাহরণ; নিজের বিষয় নির্বাচন করুন।
2. নিজের পছন্দের Title, Subtitle, Image/Banner Image ও Button Text লিখুন। উদাহরণ: button-এ “View Collection”। Button Link-এ সংশ্লিষ্ট page দিন; CTA Style ও রং নিজের পছন্দ অনুযায়ী বেছে নিন।
3. Image সর্বোচ্চ 5 MB, Banner Image সর্বোচ্চ 10 MB। প্রস্তাবিত artwork 840 × 240 px; mobile-এ readability পরীক্ষা করুন।
4. প্রকাশ করতে Status: active এবং নিজের পছন্দের Sort Order দিয়ে save করুন।

Frontend Preview · Promotional Banner — Homepage Actions

Close ×

সহায়ক তথ্যবর্তমান storefront home API প্রতি দুইটি category section-এর পরে একটি CTA দেয়। Screenshot-এর মতো Flash Sale-এর ঠিক নিচে পাশাপাশি দুইটি CTA বসাতে frontend layout এবং প্রয়োজনে API section placement বদলাতে হবে। শুধু Sort Order দিয়ে ওই অবস্থান নিশ্চিত হবে না।

ধাপে ধাপে সেটআপ

1. নিজের যে category-র product দেখাতে চান, সেটি নির্বাচন করুন। Products থেকে নিজের product তৈরি বা edit করে সংশ্লিষ্ট category যুক্ত করুন। Screenshot-এ Electronics আছে, তবে আপনি যেকোনো প্রাসঙ্গিক category ব্যবহার করতে পারেন।
2. নিজের product-এর Name, Slug, Product Type, Image এবং variant-এর SKU ও Sale Price পূরণ করুন। প্রয়োজন হলে Compare At Price দিন। Product image প্রতি file সর্বোচ্চ 5 MB।
3. Website-এ প্রকাশ করতে Product Status: active এবং Visibility: public রাখুন। Homepage-এর জন্য নির্দিষ্ট product বেছে নিতে চাইলে Is Homepage চালু করুন।
4. নিজের পছন্দমতো product display order ঠিক করুন। বর্তমান API-তে category প্রতি নির্দিষ্ট homepage product থাকলে সেগুলোই অগ্রাধিকার পায়; না থাকলে সাধারণ visible product দেখানো হয়।

Frontend Preview · Product Section — নিজের category ও product

Close ×

সহায়ক তথ্যছয়টি card দেখানো frontend/API limit-এর বিষয়। Image-এর প্রস্তাবিত অনুপাত 1:1। Stock ও variant ঠিক রেখে Add to Cart পরীক্ষা করুন; শুধু product image upload করলে বিক্রির প্রস্তুতি সম্পূর্ণ হয় না।

ধাপে ধাপে সেটআপ

1. আরেকটি product group দেখাতে চাইলে নিজের পছন্দের category তৈরি বা নির্বাচন করুন। Screenshot-এর Women’s Fashion একটি উদাহরণ। নিজের Name, Image, Slug, Status ও Sort Order দিন।
2. নিজের নির্বাচিত category-র উপযুক্ত product যুক্ত করুন। যেমন clothing store হলে dress বা অন্য পোশাক দিতে পারেন; অন্য ধরনের store হলে তার প্রাসঙ্গিক product দিন। প্রতিটির ছবি, variant/SKU, price ও availability ঠিক করুন।
3. প্রকাশ করতে product active/public রাখুন। Homepage-এ বাছাই করা product চাইলে Is Homepage ব্যবহার করুন। Category Sort Order দিয়ে নিজের পছন্দের অবস্থান ঠিক করুন।

Frontend Preview · আরেকটি Category/Product Section — উদাহরণ

Close ×

সহায়ক তথ্যCategory নির্বাচন ও Navbar selection আলাদা বিষয়। Wishlist, rating ও “View All” link-এর সঠিক আচরণ frontend-এ পরীক্ষা করুন।

ধাপে ধাপে সেটআপ

1. প্রয়োজন হলে নিজের পছন্দের আরও category তৈরি বা নির্বাচন করুন। Screenshot-এর Home & Living নাম বা তার অবস্থান ব্যবহার করা বাধ্যতামূলক নয়। প্রকাশ করতে active করুন এবং নিজের পছন্দমতো Sort Order দিন।
2. নিজের store-এর প্রাসঙ্গিক product সেই category-তে যুক্ত করুন। উদাহরণ: furniture store হলে table বা sofa; অন্য store হলে তার নিজস্ব product।
3. নিজের product-এর Image, Sale Price, SKU, Status ও Visibility ঠিক করুন। প্রয়োজন অনুযায়ী Homepage selection ও product order সাজান।

Frontend Preview · অতিরিক্ত Category/Product Section — উদাহরণ

Close ×

সহায়ক তথ্যHome API category sort_order এবং তারপর name অনুযায়ী section সাজায়। CTA interleaving-এর কারণে screenshot-এর সঙ্গে পুরো section sequence মিলাতে frontend সমন্বয় লাগতে পারে।

ধাপে ধাপে সেটআপ

1. Service Benefits খুলে Add service benefit নির্বাচন করুন। Platform admin হলে সঠিক store বেছে নিন; store owner-এর store backend থেকেই নির্ধারিত হবে।
2. নিজের পছন্দের Title ও প্রয়োজন হলে Description লিখুন। উদাহরণ: “Easy Returns” এবং নিজের return policy-এর সংক্ষিপ্ত বিবরণ। উদাহরণের সংখ্যা বা লেখা অনুসরণ করা বাধ্যতামূলক নয়।
3. তালিকা থেকে Icon নির্বাচন করুন। Sort Order দিয়ে ক্রম ঠিক করুন; ছোট সংখ্যা আগে দেখাবে। প্রকাশ করতে Active নির্বাচন করে save করুন।
4. বিদ্যমান item-এর Edit benefit থেকে পরিবর্তন করুন। লুকাতে Inactive করুন অথবা প্রয়োজন না হলে Delete করুন।
5. নিজের storefront refresh করে footer-এর উপরে section দেখুন। কোনো active benefit না থাকলে পুরো section লুকানো থাকবে—কোনো default text বা placeholder দেখাবে না।

Frontend Preview · Service Benefits — সুবিধার সারি

Close ×

সহায়ক তথ্যপ্রতিটি store-এর data আলাদা। Title সর্বোচ্চ 100 এবং Description সর্বোচ্চ 255 character। Icon নির্দিষ্ট তালিকা থেকে নির্বাচন করতে হবে। Benefit-এর লেখা shipping/payment/return rule বদলায় না; নিজের বাস্তব service অনুযায়ী লিখুন।

ধাপে ধাপে সেটআপ

1. General থেকে নিজের Site Name/Logo এবং Contact থেকে নিজের Phone Number, Email Address ও Address দিন। Screenshot-এর নাম, ঠিকানা ও নম্বর নমুনা।
2. Social group-এ শুধু নিজের ব্যবহৃত social account-এর সঠিক URL দিন। উদাহরণ: নিজের Facebook page বা Instagram profile। সব social field ব্যবহার করা বাধ্যতামূলক নয়।
3. নিজের store-এ প্রয়োজনীয় footer link ও column বেছে নিন। Screenshot-এর Shop, Customer Service ও Company উদাহরণ। প্রতিটি link-এর জন্য কার্যকর frontend page যুক্ত করুন এবং নিজের Return Policy ও Terms লিখুন।
4. নিজের প্রকাশিত app থাকলে তার সঠিক URL-সহ badge দেখাতে পারেন। নিজের store-এ চালু payment method-এর logo ব্যবহার করুন। Copyright-এ নিজের store-এর নাম ও বর্তমান বছর দিন।

Frontend Preview · Footer — যোগাযোগ, লিংক ও Apps

Close ×

সহায়ক তথ্যFooter columns, LinkedIn link, app store badges, payment logos ও copyright-এর পূর্ণ editor বিদ্যমান default Site Settings-এ নেই। Screenshot-এর সব অংশকে editable করতে frontend component ও প্রয়োজনীয় নতুন settings লাগবে।

13. Product Search ও Search Overlay

Header-এর search box থেকে product খোঁজার overlay খোলে। এটি আলাদা search page-এর সমতুল্য নয়।

ব্যবহার ও যাচাই

1. নিজের store-এর product-এর নামের অন্তত ২টি অক্ষর লিখে search করুন।
2. প্রযোজ্য category নির্বাচন করে result দেখুন; result থেকে product detail খুলুন।
3. Owner হিসেবে product name, category, status ও public visibility যাচাই করুন; ফলাফল না এলে spelling ও store context মিলিয়ে দেখুন।

বর্তমান আচরণ ও সীমাবদ্ধতাSearch Overlay implemented আছে। তবে result-এর “View all” link /search-এ যায়; বর্তমান app-এ /search page পাওয়া যায়নি। পূর্ণ search results page চালু করতে frontend কাজ বাকি।

14. Category Listing, Submenu ও Filter

সব category, নির্দিষ্ট category এবং submenu থেকে product list দেখার page আছে।

ব্যবহার ও যাচাই

1. /categories-এ category list এবং category বেছে তার product page পরীক্ষা করুন।
2. Category product page-এ available brand filter ও sort ব্যবহার করুন। Sort-এর উদাহরণ: Latest, Price Low to High, Price High to Low, Name A–Z।
3. Submenu তৈরি করলে তার parent navbar item ও product assignment যাচাই করে /subnavbar/[slug] খুলুন।
4. Owner হিসেবে নিজস্ব category/brand ও সঠিক product association দিন; link-এর slug সংশ্লিষ্ট record-এর সঙ্গে মিলতে হবে।

বর্তমান আচরণ ও সীমাবদ্ধতাCategory link-এর সঠিক format /category/your-slug। শুধু menu name লিখলে product list তৈরি হয় না। Empty category ও invalid slug আলাদাভাবে পরীক্ষা করুন।

15. Product Details, Image Gallery ও Variants

Product detail-এ ছবি, description, variant, price, stock এবং purchase action দেখানো হয়।

ব্যবহার ও যাচাই

1. নিজের product-এর সঠিক Name, Slug, Description ও original images দিন। Gallery/zoom এবং mobile image view পরীক্ষা করুন।
2. প্রয়োজনে size, variant ও colour option তৈরি করুন। প্রতিটি বিক্রিযোগ্য variant/option-এর SKU, price ও stock তথ্য ঠিক করুন।
3. Frontend-এ variant/colour বদলে price, image ও availability সঠিকভাবে বদলাচ্ছে কি না দেখুন।
4. Quantity নির্বাচন করে Add to Cart বা উপলব্ধ purchase action পরীক্ষা করুন। Stock tracking ও Allow Backorder নিজের বিক্রির নিয়ম অনুযায়ী সেট করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাবর্তমান product URL /product/[slug]—/products/[slug] নয়। Card-এ default price এবং নির্বাচিত variant-এর price আলাদা হতে পারে; cart-এ নির্বাচিত variant-ই যাচাই করুন।

16. Product Reviews ও Related Products

Product detail-এ review submission ও related product দেখানোর ব্যবস্থা আছে।

ব্যবহার ও যাচাই

1. Review form-এ নিজের অভিজ্ঞতা অনুযায়ী rating, title ও body দিন। Login বা validation message এলে তা অনুসরণ করুন।
2. Owner/platform moderator Product Reviews page-এ review status ও moderation পরিচালনা করবেন। Approve action-এর জন্য প্রয়োজনীয় permission লাগবে।
3. Related product link ও image পরীক্ষা করুন; অন্য store-এর product ভুলভাবে আসছে কি না যাচাই করুন।

বর্তমান আচরণ ও সীমাবদ্ধতানমুনা rating বা review count বাস্তব review হিসেবে ব্যবহার করবেন না। Review form দেখা মানেই যেকোনো account review জমা দিতে পারবে এমন নয়; backend validation-ও প্রযোজ্য।

17. Cart, Quick Add ও Cart Drawer

Product থেকে quick add, cart drawer, floating cart button এবং আলাদা cart page ব্যবহার করা যায়।

ব্যবহার ও যাচাই

1. Product-এর Add to Cart/quick-add action থেকে প্রয়োজনীয় variant, colour বা size বেছে নিন।
2. Cart drawer বা /cart-এ quantity, selected variant, subtotal ও delivery charge দেখুন। প্রয়োজন হলে item remove করুন।
3. Owner product price, delivery charge ও stock পরিবর্তন করলে storefront-এ cart/checkout totals আবার যাচাই করুন।
4. Checkout-এ যাওয়ার আগে mobile cart badge, drawer এবং পূর্ণ cart page-এ একই items দেখাচ্ছে কি না পরীক্ষা করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাCart-এ যোগ করা মানেই order confirm বা payment complete নয়। আরেকটি store-এর domain খুলে আগের store-এর cart আচরণও পরীক্ষা করুন।

18. Wishlist

পছন্দের product পরে দেখার জন্য wishlist-এ রাখা যায়।

ব্যবহার ও যাচাই

1. নিজের store-এর product card/detail থেকে heart icon ব্যবহার করুন।
2. Login চাওয়া হলে customer account দিয়ে login করে /wishlist খুলুন।
3. Add/remove-এর পরে header ও mobile badge এবং wishlist list মিলিয়ে দেখুন।

বর্তমান আচরণ ও সীমাবদ্ধতাWishlist product-এর stock সংরক্ষণ করে না। Product পরে inactive বা unavailable হলে কেনার সময় availability আবার যাচাই করতে হবে।

19. Checkout, Guest Order ও Delivery Charge

Login করা customer এবং guest—দুই অবস্থার checkout flow আছে।

ব্যবহার ও যাচাই

1. Cart-এ product নিয়ে checkout খুলুন। Guest হলে full name দিন; delivery address, city ও phone পূরণ করুন। প্রয়োজন হলে delivery notes দিন।
2. Subtotal, shipping ও grand total দেখুন। বর্তমান frontend একই store-এর cart-এ সর্বোচ্চ product delivery charge একবার গণনা করে; checkout-এ live charge পুনরায় নেয়।
3. Order submit করে success message ও order number সংরক্ষণ করুন। Backend-এ তৈরি order-এর items ও total মিলিয়ে নিন।
4. একাধিক store-এর items থাকলে backend order ভাগ করতে পারে; দেখানো multiple-shipment notice ও final order totals যাচাই করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাCheckout UI-তে বর্তমানে Cash on Delivery লেখা আছে। অন্য online payment method বা coupon entry এই page-এ implemented ধরে নেবেন না। Payment gateway বা coupon backend-এ থাকলেই checkout-এ তার UI তৈরি হয় না।

20. Customer Registration, Login ও Profile

এগুলো storefront-এর customer account page। Store owner-এর backend dashboard আলাদা।

ব্যবহার ও যাচাই

1. নতুন customer /register-এ form-এর প্রয়োজনীয় তথ্য দিয়ে account তৈরি করবেন। এটি নতুন SaaS store তৈরি করার registration নয়।
2. /login-এ customer account দিয়ে login করে account menu পরীক্ষা করুন।
3. /profile-এ নিজের তথ্য দেখুন ও উপলব্ধ form দিয়ে update করুন।
4. /dashboard-এ customer welcome/profile link আছে। Store পরিচালনার জন্য backend admin-panel URL ব্যবহার করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাStorefront-এর /dashboard-কে inventory/order management dashboard হিসেবে বর্ণনা করা ঠিক নয়। Customer login এবং store owner-এর management access আলাদা।

21. Forgot, Reset ও Change Password

Password ভুলে গেলে email reset এবং login অবস্থায় password পরিবর্তনের page আছে।

ব্যবহার ও যাচাই

1. Password ভুলে গেলে /forgot-password-এ নিজের account email দিয়ে request করুন।
2. প্রাপ্ত email-এর link থেকে /reset-password খুলুন। Email/token-সহ link-এর তথ্য ঠিক রেখে নতুন password ও confirmation দিন।
3. Login অবস্থায় password পরিবর্তনের জন্য /change-password form ব্যবহার করুন।
4. Owner/platform team হিসেবে reset email delivery ও expired/invalid token-এর response পরীক্ষা করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাReset link-এর token সংবেদনশীল তথ্য। Documentation example বা screenshot-এ বাস্তব reset token প্রকাশ করবেন না।

22. Customer Orders ও Delivery Timeline

Customer নিজের order list, details এবং delivery timeline দেখতে পারেন।

ব্যবহার ও যাচাই

1. Customer account দিয়ে login করে /orders খুলুন; available status filter ব্যবহার করুন।
2. Order নির্বাচন করে items, total, delivery address ও timeline দেখুন। Tracking number থাকলে তা details-এ দেখাবে।
3. Owner backend-এ বাস্তব order ও shipment progress update করবেন; customer view-তে ফলাফল মিলিয়ে দেখুন।

বর্তমান আচরণ ও সীমাবদ্ধতাGuest checkout-এর order number থাকা মানেই customer account-এর order list-এ স্বয়ংক্রিয় access নয়। Guest tracking flow আলাদাভাবে যাচাই করুন। Header/footer-এর /order-status link-এর আলাদা page বর্তমানে পাওয়া যায়নি।

23. Product Request Page ও Modal

ক্রেতা প্রয়োজনীয় product না পেলে request page বা header-এর request modal ব্যবহার করতে পারেন।

ব্যবহার ও যাচাই

1. Request page/modal-এ চাওয়া product ও যোগাযোগের প্রয়োজনীয় তথ্য নিজের মতো পূরণ করুন।
2. Form submit করে success/error message দেখুন। Success-এর পরে page বা modal বন্ধ হওয়ার আচরণ পরীক্ষা করুন।
3. Owner Product Requests menu-তে সঠিক store-এর request দেখুন এবং প্রয়োজন অনুযায়ী follow-up করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাRequest জমা দিলে product স্বয়ংক্রিয়ভাবে catalog-এ প্রকাশ হয় না এবং order তৈরি হয় না। Product যোগ করতে owner-কে আলাদা product record তৈরি করতে হবে।

24. Campaign Detail Page

Homepage-এর offer section ছাড়াও নির্দিষ্ট campaign-এর detail page আছে।

ব্যবহার ও যাচাই

1. নিজের পছন্দের campaign name, সময় ও active status দিন এবং campaign-এর product যুক্ত করুন।
2. Homepage campaign link থেকে detail page খুলুন; সঠিক slug, campaign banner ও products দেখাচ্ছে কি না পরীক্ষা করুন।
3. Quick add/cart-এ offer price ও selected variant-এর কার্যকর দাম যাচাই করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাCampaign না থাকলে homepage campaign component লুকানো থাকে; campaign-এর জন্য নতুন empty-state placeholder যোগ করা হয়নি। Countdown বা layout screenshot-এর মতো হবে এমন নিশ্চয়তা নেই।

25. CTA Styles, Buttons ও Content Position

বর্তমান CTA component-এ style1–style5, image, text, button ও position-related rendering আছে।

ব্যবহার ও যাচাই

1. নিজের content অনুযায়ী available CTA Style বেছে Title, Subtitle, Description, Image বা Banner Image দিন।
2. প্রয়োজনে Primary/Secondary Button Text ও Link, Badge, colours এবং সর্বোচ্চ তিনটি feature text/icon পূরণ করুন।
3. Available field অনুযায়ী Content Alignment, Button Position ও margin নিজের layout অনুযায়ী ঠিক করুন। সব style-এ সব field একইভাবে ব্যবহার হয় না।
4. Desktop ও mobile-এ দেখে text overlap, crop ও button destination পরীক্ষা করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাHome API category section-এর মধ্যে CTA interleave করে। শুধু CTA sort order বদলে পুরো homepage-এ যেকোনো অবস্থান নিশ্চিত করা যায় না। Homepage-এ CTA না এলে category/CTA data এবং API section output মিলিয়ে দেখুন।

26. Mobile Navigation ও Responsive ব্যবহার

Mobile-এ header/menu ও search-এর পাশাপাশি Home, Cart, Request, Wishlist ও Account-এর bottom navigation আছে।

ব্যবহার ও যাচাই

1. Mobile width-এ header search, menu ও category navigation ব্যবহার করুন। Desktop-এর menu সবসময় একই অবস্থানে থাকবে না।
2. Bottom navigation-এর পাঁচটি destination ও cart/wishlist badge পরীক্ষা করুন।
3. Cart drawer, image gallery, variant modal, checkout form ও order details ছোট screen-এ ব্যবহার করে দেখুন।

বর্তমান আচরণ ও সীমাবদ্ধতাMobile bottom navigation-এর item list বর্তমানে frontend code-এ নির্ধারিত; Primary Navigation editor থেকে ওই পাঁচটি item স্বয়ংক্রিয়ভাবে পরিবর্তন হয় না।

27. নতুন Store, Empty State ও Unknown Domain

সক্রিয় কিন্তু খালি store এবং যে domain-এ store নেই—এ দুটি আলাদা অবস্থা।

ব্যবহার ও যাচাই

1. সক্রিয় নতুন store-এ announcement, nav item, banner, category, products ও CTA data না থাকলে সংশ্লিষ্ট setup placeholder ও Documentation link দেখানো হয়। Header/footer তাদের বর্তমান component থেকেই থাকে।
2. প্রয়োজনীয় content যোগ করলে সংশ্লিষ্ট section-এর placeholder সরে বর্তমান display আসে। Category section-এ অন্তত একটি product থাকলে real product card দেখাবে।
3. Banner record থাকলেও image না থাকলে banner image placeholder দেখায়।
4. Configured wildcard suffix-এর unregistered store host খুলে /store-not-found state পরীক্ষা করুন। Store slug, active status ও domain configuration মিলিয়ে দেখুন।

বর্তমান আচরণ ও সীমাবদ্ধতাবর্তমান setup placeholder owner-only নয়; খালি store-এ সাধারণ visitor-ও সেটি দেখতে পাবেন। Unknown domain check মূলত configured wildcard suffix-এ করা হয়; verified custom domain-এর routing/HTTPS আলাদাভাবে যাচাই করুন।

28. Brand, SEO, Sitemap ও Analytics

Site settings, metadata, sitemap এবং analytics integration-এর কিছু অংশ frontend-এ আছে; সব পরিচয়সম্পর্কিত লেখা dynamic নয়।

ব্যবহার ও যাচাই

1. নিজের site name, logo, favicon, primary colour, contact, social ও SEO field পূরণ করুন। Page title, favicon, shared preview এবং footer আলাদাভাবে পরীক্ষা করুন।
2. Sitemap index /sitemap.xml খুলে তার static ও product chunk link অনুসরণ করুন। /sitemap/static.xml এবং /robots.txt-ও পরীক্ষা করুন। নিজের store-এর product URL আসছে কি না দেখুন; /sitemap-chunk/[id] internal route target।
3. GTM ব্যবহার করলে settings-এ enable/configure করে frontend-এ tag ও event যাচাই করুন। Search, cart/checkout এবং purchase flow-তে event call আছে; শুধু ID save হলেই tag execution নিশ্চিত নয়।

বর্তমান আচরণ ও সীমাবদ্ধতাRoot/home metadata-তে এখনো OneHaat.bd-সংক্রান্ত fixed text আছে। Footer-এও কিছু fallback name/contact ও static links আছে। শুধু Site Settings বদলালেই সব SEO text বা footer item বদলে যাবে বলে ধরে নেবেন না।

29. চালু Feature, Missing Page ও Launch Checklist

Link থাকা, dashboard feature থাকা এবং frontend page implemented থাকা আলাদা বিষয়। নিচের সীমাবদ্ধতাগুলো বর্তমান source audit থেকে পাওয়া।

ব্যবহার ও যাচাই

1. /shop, /search, /help, /order-status, /shipping-info ও /returns-এর link আছে, কিন্তু সংশ্লিষ্ট page.tsx পাওয়া যায়নি। Customer-কে link দেওয়ার আগে destination তৈরি বা সঠিক page-এ পরিবর্তন করুন।
2. Footer-এর /contact, /about, /careers, /terms, /privacy ও /blog-এর page-ও পাওয়া যায়নি। Menu-তে URL লিখলেই এসব page তৈরি হয় না; নিজের তথ্য ও policy দিয়ে destination প্রস্তুত করুন।
3. নতুন category/product দিয়ে browse → search → product variant → cart → guest/login checkout → order details পুরো flow পরীক্ষা করুন।
4. নিজস্ব domain, mobile layout, empty state, reset email, product images, order total ও customer-visible policy মিলিয়ে তারপর launch করুন।

বর্তমান আচরণ ও সীমাবদ্ধতাএই গাইড source-code অনুযায়ী ব্যবহার ও সীমাবদ্ধতা ব্যাখ্যা করে; production-এ প্রতিটি feature কাজ করছে এমন live certification নয়। নতুন implementation এলে এই তালিকাও update করতে হবে।

শেষে যা পরীক্ষা করবেন

• কোনো content না দেখালে সঠিক store, active status, product-এর public visibility ও category assignment পরীক্ষা করুন।
• Homepage product না মিললে Is Homepage এবং product/category Sort Order পরীক্ষা করুন।
• ছবি না এলে file upload ও public storage link platform admin দিয়ে পরীক্ষা করান।
• প্রতিটি menu, Shop Now, View All, search, cart ও wishlist link পরীক্ষা করুন।
• Flash Sale-এর সময় ও checkout price মিলিয়ে নিন। Shipping banner-এর প্রতিশ্রুতি checkout rules-এর সঙ্গে মেলে কি না দেখুন।
• দুইটি আলাদা store খুলে নিশ্চিত করুন এক store-এর logo বা product অন্য store-এ দেখাচ্ছে না।
• Mobile-এ লেখা কাটা যাচ্ছে কি না, category scrolling ও banner button কাজ করছে কি না দেখুন।