تغییر ظاهر فروشگاه اینترنتی در ویراشو: قالب، رنگ، لوگو و انتشار

قالب را انتخاب کنید، رنگ برند و لوگو را بگذارید، پیش‌نمایش را ببینید و فقط وقتی راضی بودید منتشر کنید. این آموزش با عکس همه‌ی بخش‌های «ظاهر فروشگاه» را نشان می‌دهد.

پنجره‌ی یک فروشگاه با چهار کارت نمونه‌ی رنگ (سبز، زرد، صورتی و سرمه‌ای) و عنوان «ظاهر فروشگاه مال خودتان»
فهرست مطلب
  1. راه سریع
  2. یک نکته‌ی مهم: چه چیزی همین حالا دیده می‌شود؟
  3. مرحله‌ی اول: صفحه‌ی «ظاهر فروشگاه» را باز کنید
  4. مرحله‌ی دوم: نوار انتشار و زبانه‌ها
  5. مرحله‌ی سوم: قالب را انتخاب کنید
  6. مرحله‌ی چهارم: طرح آماده (اگر وقت ندارید)
  7. مرحله‌ی پنجم: رنگ و قلم
  8. مرحله‌ی ششم: تنظیمات خود قالب
  9. مرحله‌ی هفتم: کارت محصول
  10. مرحله‌ی هشتم: لوگوی فروشگاه
  11. فاویکون (آیکون تب مرورگر)
  12. مرحله‌ی نهم: پیش‌نمایش و انتشار
  13. صفحه‌ی اصلی
  14. اگر پشیمان شدید: نسخه‌های قبلی
  15. اشتباه‌های رایج
  16. فهرست بررسی نهایی

ظاهر فروشگاه اولین چیزی است که مشتری می‌بیند و قبل از خواندن هر متنی درباره‌ی اعتماد به شما تصمیم می‌گیرد. خوشبختانه لازم نیست طراح باشید: یک قالب انتخاب می‌کنید، رنگ برندتان را می‌گذارید، لوگو را بارگذاری می‌کنید و دکمه‌ی «انتشار تغییرات» را می‌زنید.

این آموزش همه‌ی بخش‌های صفحه‌ی «ظاهر فروشگاه» را به همان ترتیبی که معمولاً به کار می‌آید نشان می‌دهد. روی عکس‌ها عددهایی هست؛ همان عددها را زیر هر عکس توضیح داده‌ایم. فروشگاه و اطلاعات داخل عکس‌ها نمونه و ساختگی است.

راه سریع

  1. از منوی «ظاهر و صفحه‌ها» وارد «ظاهر فروشگاه» شوید.
  2. در زبانه‌ی «رنگ و قالب» قالب را انتخاب کنید. برای دیدنش قبل از فعال کردن، «پیش‌نمایش بدون فعال‌سازی» را بزنید.
  3. رنگ برند و قلم را بگذارید و «ذخیره» را بزنید.
  4. در زبانه‌ی «لوگو و فاویکون» لوگو را بارگذاری کنید.
  5. در زبانه‌ی «پیش‌نمایش» نتیجه را ببینید و «انتشار تغییرات» را بزنید.

یک نکته‌ی مهم: چه چیزی همین حالا دیده می‌شود؟

در این صفحه بعضی تغییرها اول پیش‌نویس می‌شوند و بعضی همان لحظه روی سایت می‌روند. تفاوتش را بدانید تا غافلگیر نشوید:

تغییرکی روی سایت می‌رود؟
رنگ برند، قلم، گردی گوشه‌هابعد از «انتشار تغییرات»
طرح آمادهبعد از «انتشار تغییرات»
تنظیمات خود قالببعد از «انتشار تغییرات»
عوض کردن قالب (زدن روی خود قالب)همان لحظه
کارت محصولهمان لحظه
لوگو و فاویکونهمان لحظه

مرحله‌ی اول: صفحه‌ی «ظاهر فروشگاه» را باز کنید

در منوی کناری، زیر «ظاهر و صفحه‌ها»، گزینه‌ی «ظاهر فروشگاه» را بزنید.

منوی پنل با گزینه‌ی «ظاهر فروشگاه» که با عدد یک مشخص شده است

مرحله‌ی دوم: نوار انتشار و زبانه‌ها

بالای صفحه یک نوار می‌بینید. اگر همه‌چیز منتشر شده باشد، سبز است و می‌نویسد «همه‌چیز منتشر شده». زیرش پنج زبانه هست: «پیش‌نمایش»، «رنگ و قالب»، «لوگو و فاویکون»، «صفحه‌ی اصلی» و «نسخه‌های قبلی».

بالای صفحه‌ی ظاهر فروشگاه با نوار سبز «همه‌چیز منتشر شده» و پنج زبانه

  1. نوار انتشار: همیشه بالای زبانه‌هاست و برای همه‌ی آن‌ها صدق می‌کند.
  2. زبانه‌ها: هر بخش یک زبانه دارد. عددی که کنار «نسخه‌های قبلی» می‌بینید، تعداد نسخه‌های نگه‌داشته‌شده است.

وقتی چیزی را ذخیره کنید که هنوز منتشر نشده، نوار زرد می‌شود و دو دکمه می‌دهد:

نوار زرد «تغییرات منتشرنشده دارید» با دکمه‌های «انتشار تغییرات» و «لغو تغییرات»

  1. پیام نوار: می‌گوید مشتری‌ها هنوز نسخه‌ی قبلی را می‌بینند.
  2. انتشار تغییرات: همه‌ی تغییرهای پیش‌نویس همین حالا روی سایت می‌رود.
  3. لغو تغییرات: پیش‌نویس پاک می‌شود و این کار برگشت ندارد.

مرحله‌ی سوم: قالب را انتخاب کنید

قالب شکل کلی فروشگاه است: جای منو، شکل کارت‌ها، فوتر و حال‌وهوای صفحه‌ی اصلی. رنگ، لوگو و چیدمان روی همان قالب تنظیم می‌شود. هر قالب با عکس فروشگاه نمونه‌اش نشان داده شده و زیرش نوع کسب‌وکار مناسبش را می‌بینید.

فهرست قالب‌ها با عکس نمونه، رنگ‌ها، نوع فروشگاه و دکمه‌ی «پیش‌نمایش بدون فعال‌سازی»

  1. قالب فعلی: کارت قالب فعال با برچسب «فعال» مشخص است.
  2. پیش‌نمایش بدون فعال‌سازی: قالب را روی فروشگاه خودتان نشان می‌دهد، بدون اینکه مشتری چیزی ببیند.
  3. برچسب «فعال»: یعنی مشتری‌ها همین قالب را می‌بینند.
زدن روی خود کارت قالب، همان لحظه آن را فعال می‌کند. اگر فقط می‌خواهید ببینید چه شکلی است، «پیش‌نمایش بدون فعال‌سازی» را بزنید.

برای انتخاب بهتر، قالبی را بردارید که نوع کسب‌وکارش به شما نزدیک است؛ زیر نام هر قالب نوشته برای چه فروشگاهی ساخته شده. اگر نمی‌دانید، قالب «آریا» که پیش‌فرض است برای هر فروشگاهی جواب می‌دهد.

مرحله‌ی چهارم: طرح آماده (اگر وقت ندارید)

بخش «طرح آماده» رنگ‌ها و چیدمان صفحه‌ی اصلی را یکجا عوض می‌کند. مثلاً طرح «پوشاک»، «ابزار و قطعات» یا «اسباب‌بازی و کودک». برای دیدن اینکه چه شکلی می‌شود، یکی را انتخاب کنید و در «پیش‌نمایش» ببینید.

چند طرح آماده با نام و توضیح کوتاه، که طرح اول با عدد یک مشخص شده است

  1. طرح آماده: نتیجه پیش‌نویس است و تا «انتشار تغییرات» به مشتری‌ها نمی‌رسد. اگر پسند نکردید، «لغو تغییرات» را بزنید.

مرحله‌ی پنجم: رنگ و قلم

رنگ برند در دکمه‌ها، لینک‌ها و نشان‌های فروشگاه دیده می‌شود. از بین دوازده رنگ آماده یکی را بردارید، یا با «رنگ دلخواه» همان رنگ لوگوی خودتان را بگذارید.

بخش رنگ و قلم با دوازده رنگ آماده، رنگ دلخواه، نمونه‌ی زنده، انتخاب قلم و گردی گوشه‌ها

  1. رنگ‌های آماده: یکی را بزنید.
  2. رنگ دلخواه: اگر رنگ برندتان در فهرست نیست، اینجا انتخابش کنید.
  3. نمونه‌ی زنده: دکمه و لینک با رنگ انتخابی‌تان را همان لحظه نشان می‌دهد. رنگ نوشته‌ی روی دکمه خودکار انتخاب می‌شود؛ اگر رنگ روشن بگذارید، نوشته تیره می‌شود تا همیشه خوانا بماند.
  4. قلم: ایران‌یکان یا وزیرمتن.
  5. گردی گوشه‌ها: کم، متوسط یا زیاد. بعضی قالب‌ها گوشه‌ها را خودشان تعیین می‌کنند و این گزینه را نشان نمی‌دهند.
  6. ذخیره: نتیجه در پیش‌نویس می‌ماند تا منتشر کنید.

اگر بالای این بخش یادداشتی دیدید که می‌گوید قالب رنگ شاخص خودش را دارد، یعنی رنگ برند فعلاً روی سایت دیده نمی‌شود. در «تنظیمات قالب» گزینه‌ی رنگ را روی «رنگ فروشگاه» بگذارید.

مرحله‌ی ششم: تنظیمات خود قالب

زیر رنگ و قلم، بخشی با عنوان «تنظیمات قالب» هست که برای هر قالب فرق دارد. مثلاً در قالب آریا می‌توانید بگویید هدر هنگام پایین رفتن صفحه بالا بماند، یک نوار باریک بالای هدر بگذارید و رنگش را انتخاب کنید یا شکل اسلایدشوی صفحه‌ی اول را تعیین کنید.

تنظیمات قالب آریا: گروه «هدر» با کلید ماندن هدر، کادر نوشته‌ی نوار بالا، رنگ نوار و دکمه‌های ذخیره و برگشت به پیش‌فرض

  1. گروه‌ها: گزینه‌ها بر اساس بخش دسته‌بندی شده‌اند، مثل «هدر» و «اسلایدشو».
  2. هر گزینه: یا کلید روشن و خاموش است، یا کادر نوشتن، یا چند انتخاب.
  3. ذخیره: تغییرها را در پیش‌نویس می‌گذارد.
  4. برگشت به پیش‌فرض قالب: همه‌ی گزینه‌های همین قالب به حالت اولیه برمی‌گردد.

اگر قالب را عوض کنید، تنظیم‌های قالب قبلی نگه داشته می‌شود و با برگشتن به آن دوباره اعمال می‌شود.

مرحله‌ی هفتم: کارت محصول

کارت همان مستطیل کوچکی است که هر کالا در فهرست‌ها دارد. اینجا انتخاب می‌کنید چه چیزهایی روی آن دیده شود: درصد تخفیف، قیمت قبل از تخفیف، برچسب ویژه (مثل «پرفروش»)، موجودی، تعداد خط نام کالا و شکل عکس. کارت کوچک کنار گزینه‌ها همان لحظه نتیجه را نشان می‌دهد.

بخش کارت محصول با گزینه‌های درصد تخفیف، قیمت قبل، برچسب ویژه، موجودی، تعداد خط نام و عکس، و نمونه‌ی کارت

  1. چه چیزهایی دیده شود؟ هر تیک یک جزء را روی کارت نشان یا پنهان می‌کند.
  2. موجودی کالا: نشان داده نشود، فقط وقتی کم مانده، یا همیشه. عدد «کم مانده» را هم خودتان می‌گذارید.

کارت محصول با زدن «ذخیره‌ی کارت محصول» همان لحظه روی سایت اعمال می‌شود و منتظر «انتشار» نمی‌ماند.

مرحله‌ی هشتم: لوگوی فروشگاه

به زبانه‌ی «لوگو و فاویکون» بروید. لوگو بالای همه‌ی صفحه‌ها، در فوتر و روی فاکتور دیده می‌شود. اگر لوگو نگذارید، نام فروشگاه نوشته می‌شود. برچسب بالای کارت می‌گوید لوگو دارید یا نه.

کارت لوگوی فروشگاه با برچسب «هنوز لوگو ندارید»، پیش‌نمایش هدر روشن و فوتر تیره با نام فروشگاه، و کادر انتخاب فایل

  1. برچسب وضعیت: «هنوز لوگو ندارید» یا «ثبت شده».
  2. کادر انتخاب فایل: فایل را اینجا بکشید یا روی کادر بزنید. بهترین حالت یک PNG افقی با پس‌زمینه‌ی شفاف و عرض حدود چهارصد پیکسل است.

بعد از انتخاب فایل، پیش‌نمایش هدر و فوتر همان لحظه با لوگوی شما عوض می‌شود. نام فایل، اندازه و حجمش هم زیر کادر نوشته می‌شود تا مطمئن شوید فایل درست است.

بعد از انتخاب فایل: لوگوی نمونه در پیش‌نمایش هدر و فوتر، نام و اندازه‌ی فایل، و دکمه‌ی «ذخیره و نمایش روی سایت»

  1. پیش‌نمایش: لوگو را هم روی هدر روشن و هم روی فوتر تیره می‌بینید. اگر روی فوتر تیره دیده نمی‌شود، لوگوی روشن‌تری بگذارید.
  2. فایل انتخاب‌شده: نام، ابعاد و حجم نمایش داده می‌شود.
  3. ذخیره و نمایش روی سایت: لوگو همان لحظه منتشر می‌شود.

عکس‌های HEIC آیفون را مرورگرها نشان نمی‌دهند؛ آن را یک بار به JPG یا PNG تبدیل کنید. حداکثر حجم مجاز هم زیر همان کادر می‌آید و اگر فایل بزرگ‌تر باشد، پیش از بارگذاری خبر می‌دهد.

فاویکون (آیکون تب مرورگر)

فاویکون آیکون کوچکی است که کنار نام سایت در تب مرورگر و در نتایج گوگل دیده می‌شود؛ همین‌طور وقتی مشتری فروشگاه را به صفحه‌ی گوشی‌اش اضافه می‌کند.

کارت فاویکون با پیش‌نمایش تب مرورگر و صفحه‌ی گوشی، کادر انتخاب فایل مربعی و توضیح اندازه‌های ساخته‌شده

  1. پیش‌نمایش تب: نشان می‌دهد آیکون کنار نام فروشگاه چطور دیده می‌شود.
  2. کادر فایل: یک تصویر مربعی و ساده، دست‌کم ۵۱۲ در ۵۱۲ پیکسل.
  3. اندازه‌ها: از همین یک تصویر همه‌ی اندازه‌های لازم، از جمله آیکون آیفون و اندروید، خودکار ساخته می‌شود.

مرحله‌ی نهم: پیش‌نمایش و انتشار

حالا به زبانه‌ی «پیش‌نمایش» برگردید. فروشگاه را با تغییرهای پیش‌نویس می‌بینید؛ هر آنچه مشتری هنوز نمی‌بیند. اگر پیش‌نمایش از نظر شما درست بود، دکمه‌ی «انتشار تغییرات» را بزنید.

زبانه‌ی پیش‌نمایش با کلید دسکتاپ و موبایل، بزرگ‌نمایی، ویرایش با کلیک و نمایش فروشگاه

  1. دسکتاپ و موبایل: فروشگاه را هم با صفحه‌ی بزرگ و هم با گوشی ببینید. بیشتر مشتری‌ها با موبایل می‌آیند؛ حتماً موبایل را نگاه کنید.
  2. بزرگ‌نمایی: برای دیدن جزئیات، درصد را بالا ببرید.
  3. ویرایش با کلیک: وقتی روشن است، روی هر بخش پیش‌نمایش بزنید تا ویرایشگر همان بخش باز شود. برای گشتن در صفحه‌ها، آن را خاموش کنید.

دکمه‌ی «تازه‌سازی» پیش‌نمایش را دوباره می‌خواند و «تب جدید» آن را در صفحه‌ی جدا باز می‌کند. زیر پیش‌نمایش هم میان‌بر به «منوی سایت»، «صفحه‌ها» و «اسلایدهای صفحه‌ی اصلی» هست.

صفحه‌ی اصلی

زبانه‌ی «صفحه‌ی اصلی» بخش‌های صفحه‌ی اول را نشان می‌دهد: بنر، دسته‌ها، محصول‌های ویژه و مانند آن. هر بخش را می‌شود جابه‌جا کرد، پنهان کرد یا متن و عکسش را عوض کرد. ساده‌ترین راه همان «ویرایش با کلیک» در پیش‌نمایش است.

اگر پشیمان شدید: نسخه‌های قبلی

هر بار که تغییری منتشر می‌کنید، ظاهر قبلی فروشگاه نگه داشته می‌شود. در زبانه‌ی «نسخه‌های قبلی» می‌توانید به آن برگردید. برگشتن هم یک انتشار است؛ یعنی همان لحظه روی سایت می‌رود. ظاهر فعلی هم نگه داشته می‌شود، پس اگر نظرتان دوباره عوض شد، می‌توانید به آن هم برگردید.

فهرست نسخه‌های قبلی با ردیف «ظاهر فعلی»، رنگ‌های هر نسخه، چیزهایی که با برگشتن عوض می‌شود و دکمه‌ی «برگشت به این نسخه»

  1. ظاهر فعلی: همان چیزی که مشتری‌ها الان می‌بینند.
  2. تغییرهای برگشت: زیر هر نسخه نوشته با برگشتن به آن، چه چیزهایی عوض می‌شود. نسخه‌ای که با ظاهر فعلی فرقی ندارد، دکمه‌اش خاموش است.
  3. برگشت به این نسخه: قبل از اجرا یک بار تأیید می‌خواهد.

اشتباه‌های رایج

  • زدن روی کارت قالب برای دیدن آن: قالب همان لحظه عوض می‌شود. برای دیدن بدون فعال‌سازی «پیش‌نمایش بدون فعال‌سازی» را بزنید.
  • فراموش کردن انتشار: رنگ و قلم را ذخیره کرده‌اید ولی مشتری تغییری نمی‌بیند. نوار بالای صفحه را نگاه کنید.
  • لوگوی تیره روی فوتر تیره: پیش‌نمایش هدر و فوتر همین را نشان می‌دهد؛ قبل از ذخیره نگاهش کنید.
  • لوگوی خیلی بزرگ یا چهارگوش: لوگوی افقی با پس‌زمینه‌ی شفاف بهتر جا می‌افتد.
  • فاویکون غیرمربعی: دو طرف آیکون خالی می‌ماند. تصویر مربعی بگذارید.
  • رنگ خیلی روشن برای دکمه: پنل نوشته را تیره می‌کند، ولی دکمه‌ی خیلی روشن روی زمینه‌ی سفید کم‌رنگ دیده می‌شود. رنگ را با «نمونه‌ی زنده» امتحان کنید.
  • ندیدن پیش‌نمایش موبایل: بیشتر مشتری‌ها با گوشی می‌آیند.

فهرست بررسی نهایی

  • قالبی که به کسب‌وکارتان نزدیک است انتخاب شده است.
  • رنگ برند همان رنگ لوگوی شماست.
  • لوگو روی هدر روشن و فوتر تیره هر دو خوانا است.
  • فاویکون مربعی بارگذاری شده است.
  • پیش‌نمایش را هم روی دسکتاپ و هم موبایل دیده‌اید.
  • نوار بالای صفحه می‌گوید «همه‌چیز منتشر شده».

پرسش‌های پرتکرار

چرا بعد از ذخیره‌ی رنگ، مشتری تغییری نمی‌بیند؟

رنگ، قلم و تنظیم‌های قالب اول در پیش‌نویس می‌مانند. تا دکمه‌ی «انتشار تغییرات» را نزنید، مشتری‌ها نسخه‌ی قبلی را می‌بینند. نوار بالای صفحه همین را می‌گوید.

برای دیدن یک قالب، باید آن را فعال کنم؟

نه. «پیش‌نمایش بدون فعال‌سازی» قالب را روی فروشگاه خودتان نشان می‌دهد بدون اینکه مشتری چیزی ببیند. اما زدن روی خود کارت قالب آن را همان لحظه فعال می‌کند.

اگر قالب را عوض کنم، تنظیم‌هایم از بین می‌رود؟

نه. تنظیم‌های هر قالب نگه داشته می‌شود و با برگشتن به آن قالب دوباره اعمال می‌شود. لوگو و رنگ برند هم می‌مانند.

لوگو چه شکل و اندازه‌ای باشد؟

یک تصویر PNG افقی با پس‌زمینه‌ی شفاف و عرض حدود چهارصد پیکسل. هم روی هدر روشن و هم روی فوتر تیره در پیش‌نمایش ببینید که خوانا باشد.

فاویکون چیست و چه اندازه‌ای می‌خواهد؟

آیکون کوچک کنار نام سایت در تب مرورگر و نتایج گوگل. یک تصویر مربعی و ساده، دست‌کم ۵۱۲ در ۵۱۲ پیکسل بارگذاری کنید؛ بقیه‌ی اندازه‌ها خودکار ساخته می‌شود.

رنگ برندم روی سایت دیده نمی‌شود. چرا؟

بعضی قالب‌ها رنگ شاخص خودشان را دارند. در «تنظیمات قالب» گزینه‌ی رنگ را روی «رنگ فروشگاه» بگذارید تا رنگ برند اعمال شود.

اگر از تغییر ظاهر پشیمان شدم، چه کنم؟

اگر هنوز منتشر نکرده‌اید، «لغو تغییرات» را بزنید. اگر منتشر شده، از زبانه‌ی «نسخه‌های قبلی» به نسخه‌ی دلخواه برگردید.

این مطلب به کارتان آمد؟
اشتراک‌گذاری: تلگرام