قالب سایت فروشگاهی سوپرمارکت، با بازه‌ی تحویل و سبد خرید
یک سوپرمارکت آنلاین یک‌صفحه‌ای برای فروشگاه محله یا انبار کوچکی که می‌خواهد سفارش اینترنتی بگیرد: قفسه‌ی میوه و سبزی و لبنیات با سبد خرید کار‌کننده، تخفیف‌های امروز با شمارش معکوس تا نیمه‌شب، سبدهای ماهانه‌ی خواربار، بررسی محدوده‌ی ارسال و انتخاب روز و بازه‌ی دوساعته‌ی تحویل. فایل HTML فارسی و راست‌چین است و روی هر هاستی بدون افزونه و دیتابیس بالا میآید. پایین همین صفحه نوشته‌ایم سایت سوپرمارکت چه صفحه‌هایی لازم دارد، قیمتی که هر روز عوض میشود را چطور صادقانه نشان دهید، با کالای تمام‌شده چه کنید و مشتری محله را از کجا پیدا کنید.
نمای دسکتاپ؛ داخل قاب اسکرول کنید تا همه‌ی بخش‌ها را ببینید.
نمای موبایل
در این قالب چه بخش‌هایی هست؟
مشتری سوپرمارکت آنلاین دو سؤال اول را همیشه می‌پرسد: «کی می‌رسد؟» و «چقدر میشود؟». صفحه هر دو را در همان نگاه اول جواب می‌دهد
هدر فروشگاهی
نوار سقف ارسال رایگان و ساعت تحویل، جست‌وجوی محصول با میان‌بر «/»، دکمه‌ی «ارسال به» با نام محله، سبد با جمع مبلغ و نوار نُه دسته که «تخفیف‌های امروز» را قرمز جدا میکند.
بخش اول با نزدیک‌ترین بازه
تیتر «خرید روزانه‌ی خانه، دو ساعته دم در» و زیرش «نزدیک‌ترین بازه‌ی خالی» که از ساعت همان لحظه حساب میشود. کنارش دو کاشی نان تازه و خواربار فله، و چهار تعهد: بازه‌ی دوساعته، زنجیره‌ی سرد، تعویض میوه‌ی نامرغوب و کارتخوان همراه پیک.
هشت دسته‌ی گرد
میوه، سبزی و صیفی، لبنیات، تخم‌مرغ، نان، برنج و حبوبات، مرغ و گوشت، خشکبار؛ با تعداد اقلام هر دسته. کلیک روی هر کدام قفسه را فیلتر میکند. در موبایل افقی اسکرول میشوند.
تخفیف‌های امروز
نوار قرمز با شمارش معکوس تا ساعت ۱۲ شب، سقف سه عدد از هر قلم تخفیف‌دار و نوار «چند درصد فروخته شد» زیر هر کارت.
قفسه با بیست محصول
تب‌های دسته، جست‌وجوی زنده، برچسب «تازه‌ی امروز» برای نان و سبزی، واحد فروش زیر نام («۱ کیلو»، «حدود ۱ کیلو»، «شانه‌ی ۱۲ عددی») و دکمه‌ای که بعد از افزودن به شمارنده‌ی تعداد تبدیل میشود.
تصویر محصول با طرح برداری
به‌جای عکس بسته‌بندی، هر کالا یک طرح SVG ساده دارد. صفحه یکدست و سبک می‌ماند و هیچ برند و برچسبی در آن نیست؛ عکس واقعی کالاهای خودتان بعداً جایش می‌نشیند.
سبدهای ماهانه‌ی خواربار
سه سبد دو، چهار و شش نفره با فهرست اقلام و وزن، قیمت قبل و بعد، و سه قول: عوض کردن اقلام پیش از ارسال، تاریخ بسته‌بندی روی هر کیسه و لغو تکرار ماهانه هر وقت خواستید.
مسیر سفارش در چهار قدم
انتخاب بازه، چیدن با ترازو (اختلاف وزن برمی‌گردد)، بسته‌بندی جدای سرد و خشک، و پیامک پیک نیم ساعت پیش از رسیدن.
درباره‌ی فروشگاه
کلاژ سه‌عکسی، داستان انبار کوچک و مسیر کوتاه، سه عدد کلیدی و سه قول روشن: قیمت روزانه، تماس پیش از جایگزینی کالای تمام‌شده و پس گرفتن میوه‌ی لک‌دار با یک عکس.
محدوده و زمان ارسال
مشتری محله‌اش را انتخاب میکند و اولین بازه‌ی خالی و فاصله‌ی تقریبی از انبار را می‌بیند. جدول سه محدوده‌ی نزدیک، میانی و دورتر هم کنارش است، با کارت تماس، ساعت کار و روش‌های پرداخت.
نظرها و سؤال‌ها
سه نظر مشتری ثابت و شش سؤال با تگ details: حداقل سفارش، فرق میوه با عکس، اختلاف وزن، نبودن سر بازه، سرد ماندن لبنیات و تغییر سفارش.
سبد کشویی و نوار موبایل
نوار پیشرفت تا ارسال رایگان، انتخاب امروز و فردا و پس‌فردا، هفت بازه‌ی دوساعته با وضعیت «خالی»، «تکمیل» و «گذشته»، محله و موبایل، بررسی حداقل مبلغ و پیام ثبت با شماره‌ی سفارش. در موبایل نوار پایین جمع سبد را نشان می‌دهد.
سوپرمارکت اینترنتی چه صفحه‌هایی لازم دارد؟
این قالب یک صفحه است و برای شروع، یا برای فروشگاهی که فعلاً سفارش تلفنی و پیام‌رسانی می‌گیرد، کافی است. اما سوپرمارکت با هزاران قلم کالا کار میکند و مشتری هر بار دنبال چیز مشخصی است: «برنج طارم فله»، «میوه‌فروشی آنلاین نزدیک من»، «سبد ماهانه‌ی خواربار». هر کدام از این‌ها صفحه‌ی خودش را می‌خواهد. اگر فروشگاه را کامل می‌کنید، این فهرست نقطه‌ی شروع خوبی است.
| صفحه | چرا لازم است | چه چیزی رویش باشد |
|---|---|---|
| صفحه‌ی اصلی | مشتری همیشگی از اینجا مستقیم سراغ قفسه می‌رود | جست‌وجو، دسته‌ها، تخفیف‌های امروز، نزدیک‌ترین بازه‌ی خالی، حداقل سفارش و سقف ارسال رایگان |
| صفحه‌ی هر دسته | «میوه»، «لبنیات» و «حبوبات» جست‌وجوهای جدایی‌اند | همه‌ی اقلام با فیلتر زیردسته و قیمت، کالای ناموجود در انتهای فهرست و نه حذف‌شده، و یک بند کوتاه درباره‌ی دسته |
| صفحه‌ی هر کالا | جست‌وجو و سایت‌های مقایسه‌ی قیمت به صفحه‌ی کالا می‌رسند | واحد فروش، وزن یا تعداد، رقم یا خاستگاه، قیمت و تاریخ آخرین تغییرش، موجودی، شرایط نگهداری و برای کالای وزنی: «وزن نهایی روی فاکتور» |
| تخفیف‌های امروز | دلیل سر زدن هر روزه به سایت | تاریخ پایان هر تخفیف، سقف تعداد، و قیمت قبلی واقعی که همین فروشگاه قبلاً گرفته است |
| سبد ماهانه و اشتراک | مشتری ثابت می‌سازد و خرید ماهانه را قابل پیش‌بینی میکند | اقلام و وزن هر سبد، امکان جابه‌جا کردن اقلام، روز ارسال هر ماه و راه ساده‌ی لغو |
| محدوده و زمان ارسال | پیش از اولین سفارش، مشتری می‌خواهد بداند به محله‌اش ارسال دارید یا نه | فهرست محله‌ها، بازههای تحویل، هزینهی ارسال، حداقل سفارش و ساعت آخر سفارش برای همان روز |
| کالای ناموجود و جایگزین | بزرگ‌ترین منبع نارضایتی در خرید آنلاین مواد غذایی | اینکه پیش از جایگزینی چطور خبر می‌دهید، اگر مشتری جواب نداد چه میشود و مبلغ قلم حذف‌شده چطور برمی‌گردد |
| تازگی، زنجیره‌ی سرد و تاریخ انقضا | مشتری لبنیات و گوشت را نمی‌بیند و باید به شما اعتماد کند | ساعت خرید روزانه‌ی میوه، نحوه‌ی بسته‌بندی سرد، حداقل فاصله‌ی تاریخ انقضا تا روز تحویل |
| مرجوعی و بازگشت وجه | خوراکی را نمیشود مثل کالای دیگر پس داد؛ قاعده باید از قبل روشن باشد | میوه‌ی له، کالای نزدیک به انقضا یا اشتباه را تا کی و با چه مدرکی خبر بدهند، و پول به کارت برمی‌گردد یا کیف پول |
| درباره و تماس | مشتری می‌خواهد بداند پشت سایت مغازه یا انباری واقعی هست | عکس واقعی فروشگاه، نشانی، ساعت پاسخ‌گویی تلفن، تحویل حضوری، نماد اعتماد و مجوزهایی که واقعاً دارید |
| مجله و راهنما | ورودی از جست‌وجوهای غیرخرید | میوه‌ی فصل چیست، نگهداری سبزی در یخچال، فهرست خرید ماهانه برای چهار نفر؛ با تاریخ و نام نویسنده |
متن سایت سوپرمارکت را چطور بنویسید؟
در سوپرمارکت آنلاین، مشتری از قبل می‌داند گوجه و شیر چیست. چیزی که نمی‌داند این است: کی می‌رسد، اگر چیزی تمام شده بود چه میشود، وزن دقیق است یا نه و قیمتی که می‌بیند واقعی است یا فردا عوض میشود. متن خوب همین‌ها را با عدد و قاعده جواب می‌دهد. شعار «تازه‌ترین و ارزان‌ترین» هیچ‌کدام را جواب نمی‌دهد و مشتری بعد از اولین سفارش بدش درباره‌اش قضاوت میکند.
| به‌جای این | این را بنویسید |
|---|---|
| در صورت ناموجود بودن، کالای مشابه ارسال میشود | اگر قلمی تمام شده بود، پیش از چیدن سبد زنگ می‌زنیم یا پیامک می‌دهیم که جایگزین بفرستیم یا نه. اگر جواب ندادید، آن قلم حذف و مبلغش برگردانده میشود |
| ارسال فوری | بازه‌ی دوساعته را خودتان انتخاب می‌کنید، از ۹ صبح تا ۱۱ شب. برای همان روز تا [ساعت] سفارش بدهید؛ محله‌های دورتر از بازه‌ی بعدی |
| ارزان‌ترین قیمت شهر | قیمت میوه و سبزی هر روز صبح با قیمت خرید از میدان به‌روز میشود. قیمتی که هنگام ثبت سفارش می‌بینید، همان است که پرداخت می‌کنید |
| ۱ کیلو گوجه | حدود ۱ کیلو؛ وزن واقعی روی فاکتور میآید و ممکن است تا ۱۰ درصد کم یا زیاد شود. مابه‌التفاوت هنگام پرداخت حساب میشود |
| لبنیات با بسته‌بندی بهداشتی | لبنیات و گوشت در کیسه‌ی خنک‌نگه‌دار، جدا از نان و خواربار. هر قلم تاریخ‌دار دست‌کم [چند] روز تا پایان انقضا فاصله دارد |
| ۴۰٪ تخفیف ویژه | قیمت خط‌خورده، قیمت همین قلم در هفته‌ی گذشته‌ی همین فروشگاه است؛ تخفیف تا ساعت ۱۲ امشب و حداکثر ۳ عدد برای هر سفارش |
| ارسال رایگان | حداقل سفارش ۳۰۰ هزار تومان؛ ارسال برای سبدهای بالای ۸۰۰ هزار تومان رایگان و زیر آن ۴۹ هزار تومان |
| کالای فروخته‌شده پس گرفته نمیشود | میوه‌ی له یا لک‌دار و کالای نزدیک به انقضا را همان روز با یک عکس خبر بدهید؛ مبلغش به کارت یا کیف پول برمی‌گردد |
تیتر بخش اول
تیتر قالب، «خرید روزانه‌ی خانه، دو ساعته دم در»، کار سوپرمارکت را می‌گوید و قول اصلی‌اش را: تحویل در یک بازه‌ی کوتاه. زیرش «نزدیک‌ترین بازه‌ی خالی» آمده تا این قول با یک ساعت مشخص ثابت شود. اگر قول اصلی شما چیز دیگری است، همان را در تیتر بیاورید؛ مثلاً «میوه و سبزی همان روز از میدان» یا «خرید ماهانه‌ی خواربار، هر ماه سر یک روز».
نام و مشخصات هر کالا
نام رایج بازار را بنویسید، چون مشتری همان را جست‌وجو میکند: «سیب قرمز دماوند»، «پرتقال تامسون شمال»، «خیار گلخانه‌ای». کنار نام، واحد فروش را دقیق بیاورید: کیلو، عدد، شانه، بطری یک‌لیتری. برای کالای وزنی بگویید وزن تقریبی است؛ برای کالای بسته‌بندی، وزن خالص روی بسته را.
قیمتی که هر روز عوض میشود
قیمت میوه و سبزی و گوشت گاهی هر روز عوض میشود. پنهان کردنش با «تماس بگیرید» مشتری را فراری می‌دهد. سه کار ساده اعتماد می‌سازد: قیمت هر کالا همیشه روی کارت باشد، تاریخ آخرین به‌روزرسانی قیمت‌های روز را بالای دسته بنویسید و قیمت لحظه‌ی ثبت سفارش را قفل کنید، حتی اگر فردا گران‌تر شود. قیمت خط‌خورده هم فقط وقتی معنا دارد که قیمت واقعی قبلی خودتان باشد، نه عددی که برای بزرگ‌تر نشان دادن تخفیف ساخته شده است.
کالای تمام‌شده و جایگزین
جایگزینی بیخبر، مثل فرستادن ماست کم‌چرب به‌جای پرچرب یا برند دیگری از برنج، رایج‌ترین دلیل شکایت از سوپرمارکت آنلاین است. قاعده را صریح بنویسید: پیش از جایگزینی می‌پرسیم و بی‌جواب چیزی جایگزین نمی‌کنیم. در سایت کامل، بهتر است مشتری کنار هر قلم سبد بتواند خودش انتخاب کند: «جایگزین مشابه قبول است» یا «اگر نبود حذف شود». قالب این قاعده را در بخش «چرا هایپر سبد» نوشته است.
تاریخ انقضا و زنجیره‌ی سرد
مشتری آنلاین تاریخ روی بسته را پیش از خرید نمی‌بیند. بنویسید لبنیات و گوشت چطور سرد می‌مانند، از انبار تا در خانه چقدر در راه‌اند و کمترین فاصله‌ی تاریخ انقضا تا روز تحویل چند روز است. فقط عددی را بنویسید که واقعاً رعایتش می‌کنید؛ قالب عدد ۴۰ دقیقه را برای طولانی‌ترین مسیر گذاشته و شما باید آن را با محدوده‌ی واقعی خودتان عوض کنید.
چه عکس‌هایی برای سایت سوپرمارکت بگیرید؟
عکس‌های بنر و بخش «درباره» از Pexels هستند و فقط جای عکس‌های شما را نگه می‌دارند؛ عمداً هیچ بسته‌بندی، برچسب یا برچسب برند میوه‌ای در آنها نیست. کارت محصولات هم به‌جای عکس طرح برداری دارند. در سوپرمارکت دو نوع عکس لازم دارید: عکس محصول برای قفسه و عکس فروشگاه برای اعتماد. هر دو را میشود با یک گوشی خوب و نور روز گرفت:
- میوه و سبزی، هر قلم جدا: روی یک پس‌زمینه‌ی ثابت روشن، از زاویه‌ی ۴۵ درجه، با همان کیفیتی که می‌فرستید. یک عکس از نزدیک که رنگ و اندازه پیدا باشد کافی است.
- کالای بسته‌بندی: عکس رسمی تولیدکننده را فقط با اجازه‌ی او بگذارید و از سایت فروشگاه‌های دیگر عکس برندارید. عکس ساده‌ی خودتان از روبه‌رو با پس‌زمینه‌ی سفید هم کافی است.
- قفسه‌ی صبح: بار تازه‌ی میوه و سبزی در انبار یا مغازه، همان روز. برای بنر و استوری «بار امروز» عالی است.
- چیدن سبد با ترازو: دست‌هایی که میوه را دست‌چین و وزن می‌کنند؛ قول «چیدن با ترازو» را بهتر از هر متنی ثابت میکند.
- بسته‌بندی سرد: کیسه‌ی خنک‌نگه‌دار یا یخچال ماشین، کنار کیسه‌ی جدای نان و خواربار.
- فروشگاه یا انبار و پیک: نمای ورودی برای پیدا کردن راه تحویل حضوری، و پیک یا ماشین حمل بدون پلاک خوانا. اگر کسی در عکس هست، با رضایت خودش.
- از نظر فنی: عکس بنر حدود ۱۶۰۰ پیکسل عرض و زیر ۲۰۰ کیلوبایت، عکس کارت محصول مربع حدود ۶۰۰ پیکسل و زیر ۶۰ کیلوبایت؛ فرمت WebP، بدون فیلتر رنگی که رنگ واقعی میوه را عوض کند، و برای هر عکس یک alt فارسی با نام کالا.
مشتری سوپرمارکت آنلاین را از کجا پیدا کنید؟
سوپرمارکت آنلاین کسب‌وکاری محلی است: فقط تا جایی می‌فروشید که پیکتان می‌رسد. پس هدف، دیده شدن در همان محدوده و تبدیل خریدار یک‌باره به مشتری هر هفته است:
- فروشگاه یا انبار را در نشان و بلد ثبت کنید. «سوپرمارکت نزدیک من» یکی از پرتکرارترین جست‌وجوهای محلی است. پروفایل کسب‌وکار گوگل برای کسب‌وکارهای داخل ایران عملاً در دسترس نیست؛ نقشه‌های داخلی جایش را می‌گیرند. نام، نشانی و تلفن را همه‌جا عیناً یکسان بنویسید.
- یک صفحه‌ی محدوده‌ی ارسال، نه ده صفحه‌ی محله‌ای. صفحه‌ای که همه‌ی محله‌ها، بازهها و هزینه‌ها را دارد، از صفحه‌های تکراری «سوپرمارکت آنلاین سعادت‌آباد» و «سوپرمارکت آنلاین پونک» با متن یکسان بهتر جواب می‌دهد. گوگل صفحه‌های تکراری را کم‌ارزش حساب میکند.
- برای دسته‌ها و کالاهای پرجست‌وجو صفحه بسازید. «برنج طارم هاشمی فله» یا «خرمای مضافتی» جست‌وجوهای خودشان را دارند. صفحه‌ی کالا با قیمت روز، واحد فروش و موجودی بیشتر از یک فهرست کلی دیده میشود.
- کالای بسته‌بندی را به ترب و ایمالز ببرید. مشتری برنج و روغن و خشکبار را قیمت‌مقایسه میکند؛ میوه و سبزی کمتر. مراحلش در اتصال به ترب و ایمالز آمده است.
- نماد اعتماد بگیرید. برای درگاه پرداخت لازم است و مشتری تازه پیش از اولین پرداخت دنبالش می‌گردد. با سنجش نماد اعتماد ببینید سایت چه کم دارد.
- بار امروز را در اینستاگرام و پیام‌رسان نشان دهید. یک استوری کوتاه از قفسه‌ی صبح و تخفیف‌های امروز، با لینک به همان دسته در سایت. سفارش را در سایت بگیرید، نه در دایرکت؛ وزن و بازه و نشانی در گفت‌وگو گم میشوند.
- مشتری اول را به مشتری هفتگی تبدیل کنید. سبد ماهانه، فهرست «خریدهای قبلی شما» و یادآوری پیامکی سر روز همیشگی خرید، برای سوپرمارکت از هر تبلیغی ارزان‌تر تمام میشود.
چرا این رنگ‌ها و این چیدمان؟
ایده‌هایی که در طراحی سایت سوپرمارکت خودتان هم به کارتان میآید
- سبز، رنگ سبزی تازه است و کنار طرح‌های رنگی محصولات آرام می‌ماند. زمینه‌ی خاکستری‌سبز روشن هم کارت‌های سفید محصول را از هم جدا میکند، بدون اینکه صفحه شلوغ شود.
- قرمز فقط یک معنا دارد: ارزان‌تر. نوار تخفیف‌های امروز، درصد روی کارت، شمارنده‌ی سبد و لینک «تخفیف‌های امروز» در منو. چون جای دیگری قرمز نیست، چشم تخفیف را در یک لحظه پیدا میکند.
- چیدمان، چیدمان فروشگاه است، نه لندینگ. جست‌وجو و سبد در هدر، دسته‌ها و تخفیف و قفسه همه در اسکرول‌های اول. مشتری سوپرمارکت فهرست خرید دارد و نمی‌خواهد از داستان فروشگاه رد شود.
- زمان تحویل همیشه جلوی چشم است: در نوار بالا، زیر تیتر، در بخش محدوده‌ی ارسال و در خود سبد. برای سوپرمارکت، «کی می‌رسد» به اندازه‌ی قیمت مهم است.
- طرح برداری به‌جای عکس محصول صفحه را یکدست و سبک نگه داشته و برند هیچ تولیدکننده‌ای را نشان نمی‌دهد. فونت وزیرمتن با ارقام فارسی قیمت‌ها را خوانا میکند و در موبایل نوار پایین جمع سبد را همیشه نشان می‌دهد.
سه پالت رنگ دیگر برای همین قالب
رنگ‌ها در ابتدای فایل بهصورت متغیر تعریف شده‌اند؛ این خطوط را جایگزین همان متغیرها کنید تا رنگ کل صفحه عوض شود
فیروزه‌ای و تمشکی، هایپر شهری
برای فروشگاه‌های بزرگ‌تر با تنوع کالای بسته‌بندی که می‌خواهند مرتب و امروزی دیده شوند.
--g:#0f766e; --g-d:#0b5d57; --g-dd:#0b2f2c; --g-l:#e1f3f1; --red:#e11d48; --red-d:#be123c; --red-l:#fde8ee; --sun:#f59e0b; --bg:#f3f7f7; --line:#dfe9e8;
نارنجی و سبز تیره، بقالی محله
گرم و خودمانی، برای مغازه‌ی قدیمی محله که حالا سفارش آنلاین هم می‌گیرد. اینجا رنگ تخفیف سبز است.
--g:#c2410c; --g-d:#9a3412; --g-dd:#431407; --g-l:#fdeee4; --red:#166534; --red-d:#14532d; --red-l:#e8f5ec; --sun:#facc15; --bg:#faf6f0; --line:#efe3d3;
زیتونی و آجری، میوه و ارگانیک
برای فروشگاهی که تمرکزش میوه و سبزی و محصول محلی است و حال‌وهوای بازار روز می‌خواهد.
--g:#4d7c0f; --g-d:#3f6212; --g-dd:#1f2a10; --g-l:#eef5e1; --red:#c2410c; --red-d:#9a3412; --red-l:#fdeee4; --sun:#eab308; --bg:#f7f7f0; --line:#e6e6d6;
--g برای رنگ اصلی و --red برای تخفیف) از پالت اصلی آمده است؛ با رنگ تازه لازم نیست عوضشان کنید.
چند رنگ مستقیم در CSS نوشته شده‌اند و بهتر است با پالت جدید هماهنگ شوند: سایه‌ی سبز روی عکس بنر (rgba(9,40,21,…)) و نوار سبد ماهانه (rgba(13,59,34,…))، رنگ «دو ساعته» در تیتر (#86efac)، رنگ متن روی بنر (#d6eadc) و لینک کاشی‌ها (#bbf7d0).
رنگ پس‌زمینه‌ی هر کارت محصول هم در آرایه‌ی P آمده است.
مشخصات فنی قالب
| ساختار | یک فایل index.html (حدود ۸۰ کیلوبایت)؛ CSS و جاوااسکریپت داخل خود فایل |
|---|---|
| حجم کل | حدود ۷۵۰ کیلوبایت همراه با ۷ عکس WebP |
| زبان و جهت | فارسی، راست‌چین (lang="fa" dir="rtl") |
| واکنش‌گرا | دسکتاپ، تبلت و موبایل (بررسی‌شده در ۱۴۰۰ و ۳۹۰ پیکسل، بدون اسکرول افقی) |
| فونت | وزیرمتن از Google Fonts، با مجوز آزاد OFL |
| تصویر محصولات | ۱۸ طرح SVG درون‌خطی (میوه، لبنیات، نان، برنج و…)، بدون هیچ برند یا برچسب |
| داده‌ی محصولات | بیست کالا در آرایه‌ی P و سه سبد ماهانه در B؛ حداقل سفارش، سقف ارسال رایگان و هزینهی ارسال در MIN، FREE و SHIP |
| بازهها و تاریخ‌ها | روزهای تحویل، بازههای خالی، نزدیک‌ترین بازه، شمارش معکوس تخفیف و سال فوتر هر بار از ساعت و تقویم مرورگر حساب میشوند؛ دمو هیچوقت تاریخ گذشته نشان نمی‌دهد |
| کتابخانه | بدون jQuery، Bootstrap یا هر فریم‌ورک دیگر؛ آیکن‌ها SVG درون‌خطی |
| سبد و فرم | محاسبه و اعتبارسنجی در مرورگر؛ سفارش جایی ارسال نمیشود و پرداختی انجام نمیشود |
| مجوز | استفادهی شخصی و تجاری آزاد |
یک توصیه برای سرعت: فونت قالب از Google Fonts بارگذاری میشود. اگر سایت روی سرور داخل ایران است و مشتری‌هایتان داخل ایران‌اند، فونت را روی هاست خودتان بگذارید. در قطعی‌ها و اختلال‌های اینترنت بین‌الملل، فونت خارجی دیر بالا میآید یا اصلاً نمی‌آید و صفحه با فونت پیش‌فرض نمایش داده میشود؛ برای فروشگاهی که هر روز سفارش می‌گیرد، این یعنی سایتی که درست در ساعت شلوغ کند و نامرتب به نظر می‌رسد.
چطور از این قالب استفاده کنید؟
- فایل را دانلود و باز کنید. فایل zip را باز کنید و index.html را در مرورگر ببینید؛ نصب هیچ برنامه‌ای لازم نیست.
- نام و اطلاعات را عوض کنید. «هایپر سبد» یک برند نمایشی است. فایل را با VS Code یا Notepad++ باز کنید و با جست‌وجوی «هایپر سبد» نام، و بعد شماره‌ی تلفن (
02191000000و «۰۲۱-۹۱۰۰ ۰۰۰۰»)، نشانی انبار و ساعت‌ها را جایگزین کنید. - کالاها و قیمت‌ها را وارد کنید. در آرایه‌ی
Pهر کالا یک خط است: شناسه، نام، واحد فروش، قیمت، قیمت قبلی (۰ یعنی بدون تخفیف)، دسته، نام طرح SVG، رنگ زمینه و درصد فروش برای نوار تخفیف. کالاهای «تازه‌ی امروز» درFRESHهستند. - محدوده و بازهها را با کار خودتان یکی کنید. محله‌ها در
<select id="zone">هستند و عدد هر گزینه (۰، ۱ یا ۲) محدوده‌ی نزدیک، میانی یا دورتر است. شروع بازهها درSLOTSو متن زمان رسیدن درZTآمده است. در دمو یک بازه‌ی امروز و یک بازه‌ی فردا عمداً «تکمیل» نشان داده میشود؛ این را با ظرفیت واقعی خودتان عوض کنید یا حذفش کنید. - عکس‌ها را عوض کنید. عکس‌های خودتان را با همان نام‌ها در پوشه‌ی img بگذارید. اگر برای کارت محصولات هم عکس می‌خواهید، در تابع
cardHTMLطرح SVG را با یک تگ img جایگزین کنید. - قاعده‌ها را بنویسید. حداقل سفارش، جایگزینی کالای تمام‌شده، اختلاف وزن و مرجوعی را در سؤال‌های متداول با قاعده‌ی واقعی خودتان یکی کنید. متن کامل قوانین را با تولید قوانین فروشگاه بنویسید.
- روی هاست بارگذاری کنید. سبد و فرم ثبت در این نسخه نمایشی‌اند: جمع مبلغ، هزینهی ارسال و حداقل سفارش را درست حساب می‌کنند و شماره را بررسی می‌کنند، ولی سفارشی ثبت نمیشود. برای فروش واقعی به سرور، پنل موجودی و درگاه پرداخت نیاز دارید؛ تا آن موقع می‌توانید دکمه‌ی ثبت را به تماس یا پیام‌رسان وصل کنید.
قالب رایگان یا سوپرمارکت آنلاین کامل؟
این قالب برای ویترین و شروع خوب است؛ فروشگاهی که هر روز ده‌ها سبد می‌فرستد چیزهای بیشتری لازم دارد
| قالب رایگان | سوپرمارکت آنلاین ادزو | |
|---|---|---|
| طراحی و چیدمان | همین قالب | اختصاصی، با رنگ و برند شما |
| کالا، قیمت و موجودی | بیست خط داخل کد | پنل مدیریت کالا، دسته، قیمت و موجودی بدون کدنویسی |
| سبد و پرداخت | نمایشی | ثبت سفارش، درگاه پرداخت یا پرداخت در محل و پیامک وضعیت |
| صفحه‌ی کالا و دسته | ندارد؛ فقط کارت قفسه | صفحه‌ی جدا برای هر کالا و دسته، با جست‌وجو |
| بازه‌ی تحویل | بر اساس ساعت مرورگر، شبیه‌سازی‌شده | طراحی بر اساس ظرفیت و محدوده‌ی واقعی شما |
| ترب و ایمالز | ندارد | اتصال برای نمایش قیمت در سایت‌های مقایسه |
| سئو و مجله | ندارد | ساختار سئوشده، مجله و نقشه‌ی سایت |
| دامنه، هاست و پشتیبانی | با خودتان | راه‌اندازی و پشتیبانی با ادزو |
| هزینه | رایگان | از ۱۲٫۹ میلیون تومان |
هزینهی کل فروشگاه را با محاسبه‌گر هزینهی فروشگاه اینترنتی تخمین بزنید.
سؤال‌های پرتکرار
این قالب واقعاً رایگان است؟
قالب وردپرس یا ووکامرس است؟
سبد خرید، سفارش واقعی ثبت میکند؟
بازههای تحویل خالی چطور حساب میشوند؟
حداقل سفارش و هزینهی ارسال را کجا عوض کنم؟
MIN حداقل سفارش، FREE سقف ارسال رایگان و SHIP هزینهی ارسال است. همین عددها در نوار بالا، بخش محدوده‌ی ارسال و سؤال‌های متداول هم بهصورت متن آمده‌اند؛ آنها را هم عوض کنید.اگر کالایی تمام شده بود، قالب چه میکند؟
قیمت‌ها هر روز عوض میشوند؛ چطور به‌روز نگهشان دارم؟
P دستی عوض کنید؛ برای بیست کالا شدنی است، برای چند صد کالا نه. فروشگاه واقعی به پنلی نیاز دارد که قیمت‌ها را یک‌جا به‌روز کند. هر روشی دارید، قیمتی که مشتری هنگام ثبت سفارش می‌بیند باید همان قیمتی باشد که پرداخت میکند.چرا محصولات عکس ندارند؟
cardHTML جایگزینشان کنید.برای فروش آنلاین مواد غذایی چه مجوزهایی لازم است؟
ادزو می‌تواند همین طرح را برای فروشگاه من راه بیندازد؟
سایت کامل و اختصاصی برای سوپرمارکت آنلاین می‌خواهید؟
یک مشاوره‌ی رایگان بگیرید؛ در چند دقیقه مسیر و هزینهی دقیق را می‌گوییم. اول مشورت، بعد تصمیم.