إذا أنشأت متجرك على سلة للتو، فأمامك طريقان للتصميم: خطوات مرشدة تبني لك واجهة بسيطة، أو تخصيص متقدم داخل ثيم تختاره. وفي الحالتين يوفر عليك الترتيب الصحيح ساعات من الإعادة: قرّر الثيم قبل الألوان، وجهّز المواد قبل أن تفتح (تخصيص)، وصمّم للجوال قبل الكمبيوتر.
لا يشرح هذا الدليل نظرية الألوان والشعارات، فسلة تغطيها في دليل تصميم المتاجر الإلكترونية. هنا نركز على ما تفعله داخل لوحة تحكم متجرك، وبأي ترتيب.
للشفافية: نحن في AfterAds نطوّر ثيم ملاك. نذكره في قسم مستقل قرب نهاية المقال.
البداية | التصميم البسيط أم المتقدم؟
عند إعداد متجر جديد، تعرض سلة خطوات مرشدة للتصميم تبدأ باختيار نمط الواجهة (تصميم متجرك بخطوات مرشدة، آخر تحديث 3 سبتمبر 2026):
- التصميم البسيط: تختار (واجهة بسيطة)، فتبني سلة تصميمًا تلقائيًا من إجاباتك في ثلاث خطوات.
- التصميم المتقدم: تتحكم في تفاصيل الثيم كلها، من الألوان والخطوط إلى توزيع المحتوى.
وخطوات التصميم البسيط الثلاث هي:
- هوية المتجر: الشعار، والوصف، واللون، والخط.
- الموثوقية: مدة الاستبدال والاسترجاع، وروابط حساباتك في منصات التواصل، ورقم وثيقة منصة الأعمال للمتاجر في السعودية.
- الصفحة الرئيسية: البنرات، وآراء العملاء، ومزايا المتجر.
وتستطيع الانتقال من البسيط إلى المتقدم في أي وقت بالضغط على (الانتقال للتخصيص المتقدم).
متى تختار أيهما؟ البسيط يناسبك إذا أردت أن تطلق خلال أيام بمنتجات قليلة، وتعود إلى التفاصيل لاحقًا. والمتقدم يناسبك إذا اخترت ثيمًا بعينه، وجهّزت مواده، وتريد أن تتحكم في ترتيب كل قسم. باقي هذا الدليل عن الطريق المتقدم.
الثيم | ماذا تقرر قبل أن تبدأ التصميم؟
قرّر الثيم أولًا، لأن لكل ثيم إعداداته وعناصره الخاصة. إعدادات الثيم وأقسام الصفحة الرئيسية لا تنتقل كما هي إلى ثيم آخر، فتغيير الثيم بعد أسبوع من التصميم يعني أن تعيد بناء الصفحة الرئيسية.
اختر ثيمًا من قطاعك، وجرّبه على متجرك قبل الشراء إن كانت باقتك تسمح بذلك. ولتقييم الثيمات بمعايير واضحة وقياس سرعتها على الجوال، اتبع دليل اختيار ثيم سلة.
المواد | ما الذي تجهّزه قبل أن تفتح (تخصيص)؟
اجمع المواد في مجلد واحد قبل أن تبدأ. يتعطل التصميم غالبًا لأن صورة أو نصًا ناقص، لا لأن الإعداد صعب.
- الشعار: نسخة بخلفية شفافة، ونسخة فاتحة تظهر على الخلفيات الداكنة إن كان ثيمك يدعم الوضع الداكن.
- صور المنتجات: بنسبة واحدة وخلفية متقاربة، حتى تصطف البطاقات في صفحة التصنيف. قرّر النسبة مرة واحدة، مربعة مثلًا، والتزم بها.
- البنرات: بالمقاسات التي يذكرها توثيق ثيمك، ونسخة خاصة بالجوال إن كان الثيم يقبلها. لا تخمّن المقاس، فالبنر بنسبة خاطئة يُقص أو يترك فراغًا.
- النصوص القصيرة: سطر لكل بنر، وثلاث أو أربع حقائق لمزايا المتجر مثل مدة التوصيل ومدة الاسترجاع وطرق الدفع، ونص قصير لصفحة «من نحن».
- قائمة التصنيفات: بأسماء يبحث بها عميلك، وفي مستويين على الأكثر، لأن سلة تتيح تصنيفًا رئيسيًا وتصنيفًا فرعيًا.
الشاشة الأولى | ماذا يرى عميلك على الجوال؟
افتح متجرك على جوالك ولا تمرر الشاشة. ما تراه الآن هو ما يبني عليه عميلك قراره بالبقاء أو المغادرة: الشعار، والقائمة، والبحث، والسلة، وأول عنصر في الصفحة الرئيسية.
ثلاث قواعد لهذه الشاشة:
- منتج في لمستين: يجب أن يصل عميلك إلى تصنيف أو منتج بلمسة أو لمستين من الشاشة الأولى، من القائمة أو من أول عنصر.
- رسالة واحدة: إن بدأت بسلايدر، فاجعل الشريحة الأولى تكفي وحدها، ولا تضع عرضًا مهمًا في الشريحة الثالثة.
- نص يُقرأ: النص المكتوب داخل صورة البنر يصغر على شاشة الجوال، ولا تقرؤه محركات البحث كنص. استخدم حقول النص في عنصر البنر إن كان ثيمك يعرضها كنص، كما نشرح في دليل تحسين محركات البحث لمتجر سلة.
والقائمة جزء من هذه الشاشة. ضع فيها التصنيفات الرئيسية بأسماء قصيرة يعرفها عميلك، واترك الصفحات التعريفية مثل «من نحن» والسياسات لأسفل الصفحة. القائمة الطويلة على الجوال تدفع عميلك إلى التمرير بدل الشراء.
بعد ذلك رتّب العناصر بحسب ما يبحث عنه عميلك، مثلًا: التصنيفات، ثم المنتجات الأكثر طلبًا، ثم العروض، ثم آراء العملاء. ابدأ بعناصر قليلة، وأضف عنصرًا حين تجد له سببًا. كل عنصر إضافي يطيل الصفحة، ويضيف صورًا يحمّلها جوال عميلك.
وللمعاينة على الكمبيوتر بعرض الجوال، افتح أدوات المطور في متصفح Chrome، ثم اضغط Ctrl+Shift+M. لكن الحكم الأخير لجوال حقيقي في يدك.
الهوية | كيف تختار الألوان والخطوط وتبقى الصفحة مقروءة؟
- لون أساسي واحد: اختر من هويتك لونًا للأزرار والروابط، واجعل باقي الصفحة بألوان محايدة. حين يكون كل شيء ملونًا، لا يبرز زر الشراء.
- تباين كافٍ: يحتاج النص العادي إلى تباين لا يقل عن 4.5:1 مع خلفيته (WCAG 2.2). افحص لون النص على الأزرار وعلى البنرات أيضًا.
- خط عربي واضح: جرّبه على السعر وأزرار الخيارات وأسفل الصفحة، فهي أصغر النصوص في المتجر. وتأكد أن الأرقام وعملة الريال تظهر بوضوح.
- الوضع الداكن: إن فعّلته، فافتح كل الصفحات فيه، وتأكد أن الشعار والأسعار والنصوص مقروءة.
بعض عناصر الهوية تضبطها في سلة لا في الثيم: اسم المتجر، والشعار، وأيقونة تبويب المتصفح، ولون المتجر. تشرحها سلة في تخصيص هوية المتجر، وتبقى معك إن غيّرت الثيم لاحقًا. ابدأ بها، ثم انتقل إلى ألوان الثيم وخطوطه.
وطبّق الهوية بالطريقة نفسها في كل مكان. إن جعلت أزرار الشراء بلون معيّن، فلا تستخدم اللون نفسه لعنصر لا يُضغط. وإن اخترت خطًا للعناوين، فلا تضف خطًا ثالثًا في البنرات. عميلك يتعلم شكل متجرك من الصفحة الأولى، ويتوقع أن يجده كما هو في الصفحات التالية.
صفحة المنتج والتصنيف | أين يقرر عميلك الشراء؟
الصفحة الرئيسية تجذب عميلك، لكن قراره يحدث في صفحة المنتج. راجعها على الجوال بهذه الأسئلة:
- هل الصورة الأولى تعرض المنتج كاملًا وواضحًا؟
- هل يظهر الاسم والسعر وزر الإضافة إلى السلة دون تمرير طويل؟
- هل الخيارات، مثل المقاس واللون، واضحة وسهلة اللمس؟
- هل في أول الوصف ما يحتاجه عميلك ليقرر، مثل المقاس والمادة ومدة التوصيل؟
- هل يجد سياسة الاستبدال والاسترجاع دون أن يبحث عنها؟
أما صفحة التصنيف فهي طريق عميلك إلى المنتج. تتيح سلة مستويين من التصنيفات، ويمكن أن يظهر المنتج الواحد في 15 تصنيفًا على الأكثر. وصور التصنيفات لا تظهر إلا في بعض الثيمات (إدارة تصنيفات المنتجات، آخر تحديث 31 أغسطس 2026). لذلك سمِّ التصنيفات بكلمات عميلك، وتأكد أن التصفية والترتيب يعملان على الجوال، وراجع كيف يعرض ثيمك التصنيفات قبل أن ترفع لها صورًا.
النشر | كيف تعاين وتنشر دون مفاجآت؟
لا تصمّم على النسخة المنشورة من ثيمك. في (تصميم المتجر) تستطيع تكرار نسخة الثيم، وتخصيصها، ومعاينتها، ثم نشرها (إدارة الثيمات وتخصيصها). ولا يمكنك حذف النسخة المنشورة قبل أن تنشر نسخة أخرى.
والنشر نوعان بحسب مركز مساعدة سلة (الفرق بين النشر الافتراضي والمخصص للثيم):
- افتراضي: تظهر النسخة لكل العملاء.
- مخصص: تظهر لعملاء دولة أو مدينة أو لغة معينة.
وتستطيع جدولة النشر في وقت محدد، فاختر وقتًا تقل فيه الزيارات. وقبل النشر، مرّ على هذه القائمة:
- تصفّحت على جوالك مسار العميل كاملًا: الرئيسية، ثم تصنيف، ثم منتج، ثم السلة.
- كل رابط في القائمة وأسفل الصفحة يفتح صفحة موجودة.
- النسخة الإنجليزية سليمة، إن كان متجرك بلغتين.
- لم يبقَ في المتجر نص تجريبي من الثيم، مثل عنوان أو وصف لم تغيّره.
متجرك قائم؟ | من أين تبدأ التحسين؟
إن كان متجرك يعمل، فلا تبدأ بإعادة التصميم كله. افتحه على جوالك كما يفتحه عميل جديد، وأجب عن ثلاثة أسئلة:
- هل وصلت إلى منتج في لمستين؟
- هل فهمت من الشاشة الأولى ماذا يبيع المتجر؟
- هل كانت الصفحات سريعة؟ قِسها بطريقة القياس في دليل اختيار الثيم، على الرئيسية وصفحة تصنيف وصفحة منتج.
اختر أضعف إجابة، وحسّنها في نسخة مكررة من الثيم، ثم انشرها وقِس من جديد. تغيير واحد في كل مرة يخبرك ما الذي أحدث الفرق. وإن احتجت ما لا تتيحه إعدادات ثيمك، فاقرأ دليل أكواد CSS في متجر سلة قبل أن تكتب سطرًا.
التصميم مع ملاك
هذا القسم عن ثيمنا.
إن كان متجرك يعمل بثيم ملاك، فهذه صفحات التوثيق التي تختصر الخطوات السابقة:
- الصفحة الرئيسية: يضيف ملاك عناصر خاصة به إلى جانب عناصر سلة، تجدها في عناصر الصفحة الرئيسية.
- البنرات: في عنصر «صور متحركة (ملاك)» تختار «مقاس البنر الأساسي» و«مقاس البنر في الجوال»، ويذكر توثيق العنصر مقاس الصورة المناسب لكل خيار.
- الوضع الداكن: تختار «مظهر الثيم»، وترفع «شعار المتجر في المظهر الداكن»، كما في صفحة المظهر الداكن.
اقرأ صفحة ملاك لترى ما يقدمه الثيم، أو راسلنا بسؤالك قبل أن تبدأ.
الأسئلة الشائعة
هل أحتاج إلى مصمم لتصميم متجري على سلة؟
ليس بالضرورة. الثيم يقدّم التصميم الأساسي، وأنت تختار الألوان والخطوط والعناصر من الإعدادات. قد تحتاج إلى مصمم للشعار والبنرات إن لم تكن لديك مواد جاهزة.
هل أستطيع البدء بالتصميم البسيط ثم الانتقال إلى المتقدم؟
نعم. تتيح سلة الانتقال إلى التخصيص المتقدم في أي وقت من صفحة التصميم.
كم عنصرًا أضع في الصفحة الرئيسية؟
لا يوجد رقم ثابت. ابدأ بما يوصل عميلك إلى التصنيفات والمنتجات، وأضف عنصرًا حين تجد له سببًا، وراجع سرعة الصفحة بعد كل إضافة.
هل يرى عملائي التعديلات أثناء عملي؟
لا، إذا عملت على نسخة غير منشورة من الثيم. يبقى متجرك كما هو حتى تنشر النسخة الجديدة.
هل أستطيع تحديد موعد لنشر التصميم الجديد؟
نعم. تتيح سلة جدولة نشر نسخة الثيم في وقت تحدده.
ما الفرق بين تصميم المتجر وتحسينه؟
التصميم يبني الصفحات أول مرة. أما التحسين فيبدأ من متجر قائم: تقيس، ثم تغيّر شيئًا واحدًا، ثم تقيس من جديد.
خطوتك التالية
اجمع موادك في مجلد واحد اليوم: الشعار، وصور خمسة منتجات بنسبة واحدة، وبنرًا واحدًا بمقاس ثيمك، وثلاث حقائق لمزايا متجرك. ثم كرّر نسخة الثيم، وابدأ بالشاشة الأولى على الجوال. وإن لم تنشئ متجرك بعد، فابدأ من دليل إنشاء متجر على سلة.
آخر مراجعة: 27 أكتوبر 2026.