تنظیم رنگ و ظاهر فروشگاه
رنگهای روشن و تیره و گردی اجزای فروشگاه را هماهنگ کنید.
صفحهٔ «ظاهر فروشگاه» برای هماهنگکردن رنگها و شکل اجزای سایت است. از اینجا میتوانید یک ترکیب رنگ آماده انتخاب کنید، رنگهای اصلی را با هویت کسبوکارتان هماهنگ کنید و میزان گردی گوشهها را تغییر دهید. این صفحه قالب فروشگاه، لوگو، فونت یا محتوای صفحهها را عوض نمیکند؛ هرکدام در بخش جداگانهای تنظیم میشوند.
اگر میخواهید سایت بهجای رنگهای پیشفرض، رنگ برندتان را داشته باشد یا مطمئن شوید دکمهها و نوشتهها روی پسزمینه خوانا هستند، این صفحه نقطهٔ شروع خوبی است. تغییرها را میتوانید در پیشنمایش همین صفحه ببینید، اما پیشنمایش نمونهای ساده است؛ بعد از ذخیره، خود فروشگاه را هم باز کنید تا نتیجه را روی قالب و محتوای واقعیتان بررسی کنید.
دسترسی به صفحه
در پنل فروشنده از منوی «ظاهر و برند» وارد «ظاهر فروشگاه» شوید. مسیر مستقیم آن /panel/appearance است. این بخش برای مالک فروشگاه در نظر گرفته شده است. اگر آن را در منو نمیبینید یا اجازهٔ ذخیره ندارید، از مالک فروشگاه بخواهید این تغییر را انجام دهد.
اول حالت روشن یا تیره را انتخاب کنید
بالای بخش رنگبندی، دو گزینهٔ «روشن» و «تیره» میبینید. انتخاب این گزینه مشخص میکند کدام نسخهٔ رنگها را دارید تنظیم میکنید. فروشگاهی که در حالت روشن و تیره هر دو استفاده میشود، برای هرکدام رنگهای جداگانه نگه میدارد؛ هنگام ذخیره، تغییرهای هر دو حالت ثبت میشوند.
برای اینکه نوشتهها در هر دو حالت خوانا باشند، بعد از انتخاب رنگها یک بار در روشن و یک بار در تیره پیشنمایش را ببینید. رنگی که روی پسزمینهٔ روشن خوب است ممکن است روی پسزمینهٔ تیره کمرنگ یا نامشخص شود.
انتخاب یک رنگبندی آماده
در بخش «رنگبندی» چند ترکیب آماده میبینید؛ مثل آناما، آبی، نیلی، بنفش، رز، مرجانی، جنگلی یا فیروزهای. با انتخاب هرکدام، مجموعهای هماهنگ از رنگها برای حالت روشن و تیره آماده میشود. این راه برای شروع سریع مناسب است؛ اگر هیچکدام دقیقاً با برندتان جور نیست، یک ترکیب را انتخاب کنید و رنگهای اصلی را بعداً تغییر دهید.
انتخاب رنگبندی آماده فوراً آن را در سایت منتشر نمیکند. تغییرها ابتدا در فرم و پیشنمایش دیده میشوند و تا وقتی «ذخیرهٔ تغییرات» را نزنید، تنظیم تازه ثبت نشده است.
تنظیم سه رنگ اصلی
در بخش «رنگهای اصلی» سه رنگ دارید. برای هرکدام میتوانید از انتخابگر رنگ استفاده کنید یا کد رنگ را در کادر کنار آن وارد کنید. اگر کد را دستی مینویسید، پس از تمامکردن تایپ از کادر بیرون بیایید یا کلید Enter را بزنید تا تغییر اعمال شود.
- رنگ اصلی: رنگی است که در بخشهای برجسته، دکمههای مهم و نشانگرهای انتخاب دیده میشود. رنگی انتخاب کنید که متن روی آن بهراحتی خوانده شود. وقتی این رنگ را عوض میکنید، آناما رنگ نوشتهٔ روی آن را هم متناسب میکند و همان رنگ را برای نشانههای اصلی منو و نمودار اول به کار میبرد.
- رنگ مکمل: برای بخشهایی است که کنار رنگ اصلی میآیند اما نباید توجه را از دکمهٔ اصلی بگیرند. اگر رنگ خیلی تند باشد، بخشهای زیادی از صفحه با هم رقابت میکنند.
- رنگ تأکیدی: برای جلب توجه به موردهای محدود، مثل نشان یا گزینهٔ انتخابشده، به کار میآید. بهتر است این رنگ را برای همهٔ بخشها به کار نبرید تا واقعاً به چشم بیاید.
کد رنگ را میتوانید با انتخابگر پیدا کنید یا بهشکل یک رنگ وبی مثل #0C8B68 وارد کنید. بعد از تغییر، به متن روی رنگ، مرز دکمهها و بخش انتخابشده نگاه کنید؛ تنها هماهنگبودن رنگها کافی نیست، مشتری باید بتواند نوشته و اقدام اصلی را سریع تشخیص دهد.
گردی گوشهها و ساخت ترکیب متعادل
گزینهٔ «گردی گوشهها» شکل کارتها، دکمهها و بعضی بخشهای صفحه را تغییر میدهد. پنج انتخاب از کم تا خیلی گرد دارید. اگر تصویرها و کارتهای فروشگاهتان ساده و رسمیاند، میزان کم یا متعادل معمولاً با آنها هماهنگتر است؛ اگر ظاهر نرمتری میخواهید، گزینههای گردتر را در پیشنمایش امتحان کنید.
دکمهٔ «ساخت ترکیب متعادل» از رنگهای فعلی کمک میگیرد و یک ترکیب هماهنگتر برای اجزای مرتبط میسازد. اگر از نتیجه خوشتان نیامد، میتوانید رنگها را دوباره تغییر دهید یا «بازگردانی» را بزنید. بازگردانی، تغییرهای ذخیرهنشده را به مقادیری برمیگرداند که وقتی این صفحه را باز کردید در آن بودند؛ خودش تغییر را ذخیره نمیکند.
تنظیمات بیشتر برای جزئیات دقیقتر
اگر رنگهای اصلی کافی نیستند، «تنظیمات بیشتر» را باز کنید. تنظیمها در سه گروه آمدهاند:
- سطحها و متن: رنگ کارتها، منوهای بازشونده، متنهای اصلی و کمرنگ، حاشیهها و نشانهٔ انتخاب را تغییر میدهد.
- منوی کناری: رنگ پسزمینه، متن، انتخاب فعال و حاشیههای منو را تنظیم میکند.
- نمودارها: پنج رنگی را تغییر میدهد که برای دادهها و نمودارها استفاده میشوند.
این بخش برای زمانی است که میخواهید جزئیات مشخصی را هماهنگ کنید؛ لازم نیست همهٔ گزینهها را تغییر دهید. اگر مطمئن نیستید یک رنگ چه بخشی را عوض میکند، فقط همان مورد را تغییر دهید و پیشنمایش را نگاه کنید. رنگ پسزمینهٔ پایه از این صفحه قابل ویرایش نیست.
پیشنمایش چه چیزی را نشان میدهد؟
در سمت پیشنمایش، «دسکتاپ» و «موبایل» را عوض کنید تا ببینید ترکیب رنگ در دو اندازه چه حالتی دارد. این پیشنمایش یک نمونهٔ ساده از سربرگ، دکمه، کارت محصول و منوی پایین موبایل نشان میدهد تا اثر رنگها و گردی گوشهها را سریع مقایسه کنید. نام فروشگاه، عکسها، محصولها و چیدمان داخل آن نمونهای هستند و از صفحهٔ واقعی فروشگاه شما خوانده نمیشوند.
برای همین، پیشنمایش را نتیجهٔ نهایی حساب نکنید. پس از ذخیره، فروشگاه عمومیتان را باز کنید و دستکم صفحهٔ اصلی، فهرست محصولها و یک صفحهٔ محصول را ببینید. در موبایل بررسی کنید دکمهٔ خرید، قیمت و متن روی پسزمینه واضح باشند؛ در دسکتاپ هم ببینید رنگها در کنار تصویرهای واقعی فروشگاه شلوغ یا کمرنگ نشده باشند.
ذخیره و بازبینی نتیجه
وقتی از نتیجه راضی شدید، «ذخیرهٔ تغییرات» را بزنید. تا زمان پایان ذخیره دکمه غیرفعال میشود و پیام «ذخیره شد» یعنی تنظیمها ثبت شدهاند. اگر پیام خطا دیدید، تغییرها را با همان کادرهای رنگ و پیشنمایش مرور کنید و دوباره ذخیره را بزنید. بعد فروشگاه عمومی را تازه کنید تا رنگهای ذخیرهشده را ببینید.
یک مسیر ساده برای شروع این است: یک رنگبندی آماده انتخاب کنید؛ حالت روشن و تیره را جداگانه ببینید؛ رنگ اصلی را با رنگ برندتان هماهنگ کنید؛ رنگ مکمل و تأکیدی را فقط در صورت نیاز تغییر دهید؛ گردی گوشهها را در موبایل و دسکتاپ مقایسه کنید؛ سپس ذخیره کنید و سه صفحهٔ واقعی فروشگاه را بازبینی کنید. اگر تغییرها را هنوز ذخیره نکردهاید و میخواهید از اول شروع کنید، «بازگردانی» آنها را به وضعیت زمان ورود به صفحه برمیگرداند.
این تنظیمها را با قالب و فونت اشتباه نگیرید
اگر میخواهید چیدمان صفحه، بخشهای فروشگاه یا قالب را عوض کنید، از طراحی صفحههای فروشگاه یا قالبها و سکشنها کمک بگیرید. برای ثبت فونت و استفاده از آن در Studio، راهنمای مدیریت فونتهای فروشگاه را ببینید. صفحهٔ ظاهر، رنگها و گردی اجزا را مدیریت میکند؛ محتوای محصول، تصویرها، منو و وضعیت انتشار را تغییر نمیدهد.