الألوان والخطوط والتصميم

تتحكم هذه الإعدادات في المظهر العام لمتجرك في جميع الصفحات: الألوان، والخطوط، والوضعين الفاتح والداكن، وعرض الصفحة، والمساحات، واستدارة الزوايا، والظلال، وبعض الأيقونات. تجدها في محرر الثيم ضمن تخطيط الصفحة، في تبويبات الألوان والخطوط ووضع المظهر وعرض المحتوى والمساحات بين الأقسام وزوايا التصميم والظلال والأيقونات.

الألوان

لكل لون نسختان: نسخة “فاتح” تُستخدم عند عرض المتجر في الوضع الفاتح، ونسخة “داكن” تُستخدم في الوضع الداكن (راجع وضع المظهر أدناه). كثير من الأقسام لها خيارات ألوان خاصة بها، وتكون لها الأولوية على هذه الألوان العامة.

• فاتح — خلفية الصفحة - لون الخلفية الرئيسي لجميع الصفحات.
• فاتح — النص الأساسي - اللون الرئيسي للعناوين والنصوص العادية.
• فاتح — النص الفرعي / الباهت - لون أخف للنصوص الأقل أهمية، مثل الأوصاف والتسميات الصغيرة والتلميحات.
• فاتح — الحدود الأساسية - لون الحدود والفواصل المعتادة، مثل حدود حقول الإدخال والأزرار المُحدَّدة بإطار.
• فاتح — الحدود الخفيفة - لون أفتح للحدود والخطوط الفاصلة الخفيفة، مثل حدود البطاقات والخط أسفل رأس الصفحة.
• فاتح — اللون الرئيسي / الأزرار - لون التمييز الرئيسي في متجرك، ويُستخدم للروابط والعناصر النشطة وإطار التركيز ولمسات التمييز الأخرى. بعض أجزاء الثيم، وكذلك الأزرار عندما يكون مصدر ألوان الأزرار (في تخطيط الصفحة ← الأزرار) “لون علامة المتجر التجارية”، تستخدم لون العلامة التجارية المحدد لمتجرك في زد بدلاً منه، وتعود إلى هذا اللون إذا لم يُحدَّد لون للعلامة التجارية.
• فاتح — لون التفاعل (Hover) - لون خلفية الأزرار الأساسية عند مرور المؤشر عليها، عندما تستخدم الأزرار ألوان الثيم (مصدر ألوان الأزرار “لون الثيم الأساسي” أو “ألوان مخصصة (بالأسفل)”). ويُستخدم أيضاً لبعض تأثيرات التمرير الأخرى، مثل زر النافذة المنبثقة.
• فاتح — اللون الثانوي - لون مساعد يُستخدم كلون روابط الفوتر عند مرور المؤشر، إذا لم يكن للفوتر لون خاص بذلك. إذا تُرك فارغاً يُستخدم اللون الثانوي لعلامة متجرك التجارية، وإلا فيُستخدم فاتح — اللون الرئيسي / الأزرار.
• فاتح — اللون الأبيض (يتغير في الوضع الداكن) - “الأبيض” المستخدم في كثير من الخلفيات والنصوص الفاتحة، مثل القوائم المنسدلة وبطاقات التصنيفات وسلة التسوق الجانبية. في الوضع الداكن يُستخدم بدلاً منه داكن — اللون الأبيض (يصبح داكناً في الوضع الداكن)، فتصبح هذه المناطق داكنة أيضاً.
• فاتح — اللون الأسود (يتغير في الوضع الداكن) - “الأسود” المستخدم في بعض النصوص الداكنة وتأثيرات التمرير، مثل التبويبات النشطة وبطاقات التصنيفات عند مرور المؤشر. في الوضع الداكن يُستخدم بدلاً منه داكن — اللون الأسود (يصبح فاتحاً في الوضع الداكن).
• فاتح — خلفية الأقسام / الأسطح - خلفية ناعمة للمناطق المميزة، مثل رؤوس الصفحات وملخص السلة وأماكن الصور قبل تحميلها والأزرار الثانوية.
• فاتح — خلفية الأسطح عند التمرير - درجة أعمق قليلاً من خلفية الأسطح، تظهر عند مرور المؤشر على بعض هذه المناطق، مثل الأزرار الثانوية.
• فاتح — خلفية البطاقات - خلفية البطاقات واللوحات العائمة، مثل بطاقات المنتجات والقوائم المنسدلة والقوائم الكبيرة والنوافذ المنبثقة.
• فاتح — لون الظلال - لون الظلال الناعمة أسفل العناصر العائمة، مثل القوائم المنسدلة والنوافذ الجانبية وشريط التبويبات السفلي. يجعله الثيم شفافاً جداً تلقائياً.
• فاتح — لون التراكب (Overlays) - لون الطبقة المعتمة التي تغطي الصفحة خلف النوافذ المنبثقة ونافذة البحث والقوائم الجانبية. يجعله الثيم شبه شفاف تلقائياً.
• داكن — خلفية الصفحة - لون الخلفية الرئيسي للصفحات في الوضع الداكن.
• داكن — النص الأساسي - لون النص الرئيسي في الوضع الداكن.
• داكن — النص الفرعي / الباهت - لون النص الأخف في الوضع الداكن.
• داكن — الحدود الأساسية - لون الحدود والفواصل المعتادة في الوضع الداكن.
• داكن — الحدود الخفيفة - لون الحدود الخفيفة في الوضع الداكن.
• داكن — اللون الرئيسي / الأزرار - لون التمييز الرئيسي في الوضع الداكن. يُفضَّل اختيار لون فاتح لتبرز الأزرار والروابط على الخلفية الداكنة.
• داكن — لون التفاعل (Hover) - لون الأزرار الأساسية عند مرور المؤشر في الوضع الداكن.
• داكن — اللون الثانوي - اللون المساعد في الوضع الداكن. إذا تُرك فارغاً يُستخدم اللون الثانوي لعلامة متجرك التجارية، وإلا فيُستخدم داكن — اللون الرئيسي / الأزرار.
• داكن — خلفية الأقسام / الأسطح - الخلفية الناعمة للمناطق المميزة في الوضع الداكن.
• داكن — خلفية الأسطح عند التمرير - لون الأسطح عند مرور المؤشر في الوضع الداكن.
• داكن — خلفية البطاقات - خلفية البطاقات واللوحات العائمة في الوضع الداكن.
• داكن — لون الظلال - لون الظلال في الوضع الداكن، ويظهر أقوى قليلاً من الوضع الفاتح لتبقى الظلال واضحة.
• داكن — لون التراكب (Overlays) - لون الطبقة المعتمة خلف النوافذ المنبثقة والقوائم الجانبية في الوضع الداكن، ويظهر أغمق قليلاً من الوضع الفاتح.
• داكن — اللون الأبيض (يصبح داكناً في الوضع الداكن) - اللون الذي يحل محل فاتح — اللون الأبيض في الوضع الداكن. يُفضَّل أن يكون لوناً داكناً لتصبح اللوحات الفاتحة داكنة. افتراضياً يطابق خلفية الصفحة الداكنة.
• داكن — اللون الأسود (يصبح فاتحاً في الوضع الداكن) - اللون الذي يحل محل فاتح — اللون الأسود في الوضع الداكن. يُفضَّل أن يكون لوناً فاتحاً. افتراضياً يطابق النص الأساسي الداكن.
• مخصص — الأبيض الثابت (للصور وطبقاتها) - أبيض لا يتغير بين الوضعين الفاتح والداكن، يُستخدم حيث تظهر النصوص أو الأزرار فوق الصور، مثل عناوين البانرات، وكذلك للأزرار البيضاء.
• مخصص — الأسود الثابت - أسود لا يتغير بين الوضعين الفاتح والداكن، يُستخدم مثلاً لنص الأزرار البيضاء ولخلفيتها عند مرور المؤشر.

الخطوط

اختر خطاً للغة العربية وخطاً للغة الإنجليزية. يُستخدم الخط العربي عند عرض متجرك باللغة العربية، مع استخدام الخط الإنجليزي لأي حروف لا يتضمنها الخط العربي. ويُستخدم الخط الإنجليزي عند عرض متجرك باللغة الإنجليزية. ويمكنك أيضاً تخصيص خط مستقل للعناوين في كل لغة، مثل عناوين الأقسام وعناوين الصفحات وعناوين الفوتر، بينما يبقى باقي النص بالخط الأساسي.

• عربي — مصدر الخط - “خطوط جوجل” يتيح لك الاختيار من قائمة جاهزة. “خط مخصص” يتيح لك استخدام خطك الخاص من رابط.
• عربي — اختر خط جوجل - الخط العربي: Cairo أو Tajawal أو Almarai أو IBM Plex Sans Arabic أو Noto Sans Arabic أو Readex Pro أو El Messiri أو Changa أو Baloo Bhaijaan 2 أو Rubik. يظهر فقط عندما يكون عربي — مصدر الخط “خطوط جوجل”.
• عربي — اسم الخط - الاسم الدقيق لخطك المخصص. يكون مطلوباً عند لصق رابط ملف CSS ويجب أن يطابق اسم الخط المكتوب داخل ذلك الملف، أما مع رابط ملف خط مباشر فهو اختياري. يظهر فقط عندما يكون عربي — مصدر الخط “خط مخصص”.
• عربي — رابط ملف الخط أو ملف CSS - رابط خطك: إما ملف خط ينتهي بـ .otf أو .ttf أو .woff أو .woff2 (روابط الملفات على GitHub مدعومة أيضاً)، أو رابط ملف CSS يحمّل الخط. مع رابط ملف الخط يُحمَّل وزن عادي واحد فقط، لذلك يُعرض النص العريض بتعريض تلقائي من المتصفح. إذا كان الرابط فارغاً، أو كان رابط CSS بدون اسم خط، فلن يُطبَّق خطك المخصص. يظهر فقط عندما يكون عربي — مصدر الخط “خط مخصص”.
• إنجليزي — مصدر الخط - “خطوط جوجل” يتيح لك الاختيار من قائمة جاهزة. “خط مخصص” يتيح لك استخدام خطك الخاص من رابط.
• إنجليزي — اختر خط جوجل - الخط الإنجليزي: Inter أو Roboto أو Poppins أو Montserrat أو Open Sans أو Lato أو Raleway أو Nunito أو Outfit أو Plus Jakarta Sans أو DM Sans أو Space Grotesk أو Manrope. يظهر فقط عندما يكون إنجليزي — مصدر الخط “خطوط جوجل”.
• إنجليزي — اسم الخط - الاسم الدقيق لخطك المخصص، بنفس قواعد اسم الخط العربي. يظهر فقط عندما يكون إنجليزي — مصدر الخط “خط مخصص”.
• إنجليزي — رابط ملف الخط أو ملف CSS - رابط خطك الإنجليزي، ملف خط أو رابط ملف CSS، بنفس قواعد رابط الخط العربي. إذا كان الرابط فارغاً، أو كان رابط CSS بدون اسم خط، يُستخدم خط جوجل المختار بدلاً منه. يظهر فقط عندما يكون إنجليزي — مصدر الخط “خط مخصص”.
• عربي — خط العناوين - خط العناوين في النسخة العربية من المتجر. “نفس خط النصوص” يُبقي العناوين بالخط العربي المختار أعلاه. “خطوط جوجل” يتيح لك اختيار خط مختلف من قائمة جاهزة، و“خط مخصص” يتيح لك استخدام خطك الخاص من رابط.
• عربي — اختر خط جوجل للعناوين - خط العناوين العربي: Amiri أو Noto Naskh Arabic أو Reem Kufi أو Aref Ruqaa أو El Messiri أو Cairo أو Tajawal أو Almarai أو Readex Pro أو IBM Plex Sans Arabic. يظهر فقط عندما يكون عربي — خط العناوين “خطوط جوجل”.
• عربي — اسم خط العناوين - الاسم الدقيق لخط العناوين المخصص، بنفس قواعد اسم الخط العربي أعلاه. يظهر فقط عندما يكون عربي — خط العناوين “خط مخصص”.
• عربي — رابط ملف خط العناوين أو ملف CSS - رابط خط العناوين، ملف خط أو رابط ملف CSS، بنفس قواعد رابط الخط العربي أعلاه. إذا كان الرابط فارغاً، أو كان رابط CSS بدون اسم خط، تبقى العناوين بالخط العربي الأساسي. يظهر فقط عندما يكون عربي — خط العناوين “خط مخصص”.
• إنجليزي — خط العناوين - خط العناوين في النسخة الإنجليزية من المتجر: “نفس خط النصوص” أو “خطوط جوجل” أو “خط مخصص”، كما في خط العناوين العربي.
• إنجليزي — اختر خط جوجل للعناوين - خط العناوين الإنجليزي: Trirong أو Playfair Display أو Cormorant Garamond أو Libre Baskerville أو Lora أو EB Garamond أو Bodoni Moda أو Inter أو Montserrat أو Poppins. يظهر فقط عندما يكون إنجليزي — خط العناوين “خطوط جوجل”.
• إنجليزي — اسم خط العناوين - الاسم الدقيق لخط العناوين الإنجليزي المخصص، بنفس قواعد اسم الخط العربي. يظهر فقط عندما يكون إنجليزي — خط العناوين “خط مخصص”.
• إنجليزي — رابط ملف خط العناوين أو ملف CSS - رابط خط العناوين الإنجليزي، بنفس قواعد رابط الخط العربي. إذا كان الرابط فارغاً، أو كان رابط CSS بدون اسم خط، تبقى العناوين بالخط الإنجليزي الأساسي. يظهر فقط عندما يكون إنجليزي — خط العناوين “خط مخصص”.

وضع المظهر

• المظهر الافتراضي (للزوار الجدد) - طريقة ظهور متجرك للزائر في أول زيارة: فاتح، داكن، أو حسب نظام المستخدم (يتبع إعداد الوضع الفاتح أو الداكن في جوال الزائر أو جهازه). إذا غيّر الزائر الوضع باستخدام زر تغيير المظهر، يُحفظ اختياره على جهازه للزيارات التالية.
• إظهار خيار تغيير المظهر للزوار - عند التفعيل، يظهر زر بين أيقونات رأس الصفحة يتيح للزوار التبديل بين الوضعين الفاتح والداكن. إعدادات الأيقونات التالية لا تؤثر إلا عند تفعيل هذا الخيار.
• أيقونة الوضع الفاتح (للتفعيل) - الأيقونة التي تظهر على الزر أثناء الوضع الداكن، والتي ينقر عليها الزائر للانتقال إلى الوضع الفاتح: الافتراضي (شمس) أو كود SVG لأيقونتك الخاصة.
• كود SVG لأيقونة الوضع الفاتح - الصق كود SVG الخاص بالأيقونة هنا عندما تكون أيقونة الوضع الفاتح (للتفعيل) “كود SVG”.
• أيقونة الوضع الداكن (للتفعيل) - الأيقونة التي تظهر على الزر أثناء الوضع الفاتح، والتي ينقر عليها الزائر للانتقال إلى الوضع الداكن: الافتراضي (هلال) أو كود SVG لأيقونتك الخاصة.
• كود SVG لأيقونة الوضع الداكن - الصق كود SVG الخاص بالأيقونة هنا عندما تكون أيقونة الوضع الداكن (للتفعيل) “كود SVG”.

عرض المحتوى

• أقصى عرض للمحتوى - أقصى عرض يمكن أن يصل إليه محتوى الصفحة في الشاشات الكبيرة: ضيق (1280 بكسل)، قياسي (1440 بكسل)، واسع (1800 بكسل)، عرض كامل (يمتد المحتوى على كامل الشاشة)، أو مخصص. في الشاشات الأصغر يتناسب المحتوى دائماً مع حجم الشاشة.
• العرض المخصص - أقصى عرض تحدده بنفسك، من 960 إلى 2400 بكسل. يظهر فقط عندما يكون أقصى عرض للمحتوى “مخصص”.
• الهوامش الجانبية — سطح المكتب - المساحة الفارغة بين المحتوى وطرفي الشاشة الأيمن والأيسر على أجهزة الكمبيوتر.
• الهوامش الجانبية — الأجهزة اللوحية - نفس المساحة الجانبية على التابلت وأجهزة اللابتوب الصغيرة (الشاشات حتى عرض 1024 بكسل).
• الهوامش الجانبية — الجوال - نفس المساحة الجانبية على الجوال (الشاشات حتى عرض 768 بكسل). على الجوالات الصغيرة جداً يستخدم الثيم مساحة أقل قليلاً تلقائياً.

المساحات بين الأقسام

• كثافة العرض - المساحة الفارغة الافتراضية أعلى الأقسام وأسفلها: مضغوط (مساحات ضيقة)، متوازن، مريح (مساحات واسعة)، أو مخصص لتحديد قيمك الخاصة أدناه. بعض الأقسام لها إعدادات مسافات خاصة بها ولا تتأثر بهذا الخيار.
• المسافة العمودية — سطح المكتب - المساحة أعلى الأقسام وأسفلها في الشاشات الكبيرة بالبكسل. تظهر فقط عندما تكون كثافة العرض “مخصص”.
• المسافة العمودية — الجوال - نفس المساحة على الجوال (الشاشات حتى عرض 768 بكسل). تظهر فقط عندما تكون كثافة العرض “مخصص”.

زوايا التصميم

• تفعيل النمط الدائري - عند التفعيل، تظهر البطاقات والصور وحقول الإدخال والأزرار وغيرها بزوايا مستديرة. عند التعطيل، تصبح الزوايا في المتجر بالكامل حادة ومربعة.
• نوع الزوايا - “افتراضي” يستخدم مزيج الثيم المدمج من الزوايا المستديرة الصغيرة والمتوسطة والكبيرة، مع بعض العناصر الدائرية بالكامل. “مخصص” يستخدم مقاس زاوية واحداً لكل العناصر. يظهر فقط عند تفعيل النمط الدائري.
• قيمة الزوايا المخصصة - مقاس استدارة الزوايا من 0 إلى 50 بكسل، ويُستخدم عندما يكون نوع الزوايا “مخصص”. ويُطبَّق أيضاً على العناصر الدائرية بالكامل عادةً، مثل الشارات البيضاوية. تتبع الأزرار هذه الزوايا ما لم تختر خياراً مختلفاً في زوايا الأزرار ضمن تخطيط الصفحة ← الأزرار.

الظلال

• تفعيل الظلال - عند التفعيل، تحصل البطاقات والأزرار والقوائم المنسدلة وغيرها على ظلال ناعمة، يظهر كثير منها عند مرور المؤشر، لإضفاء إحساس بالعمق. عند التعطيل، تُزال هذه الظلال لمظهر أكثر بساطة، ويُزال معها الخط الرفيع أسفل رأس الصفحة عند تثبيته أعلى الشاشة أثناء التمرير أو في الصفحات الداخلية.

الأيقونات

• نوع أيقونة بطاقة المنتج - الأيقونة على زر الإضافة للسلة في بطاقات المنتجات: الافتراضي (سلة) أو كود SVG لأيقونتك الخاصة.
• كود SVG لبطاقة المنتج - الصق كود SVG الخاص بالأيقونة هنا عندما يكون نوع أيقونة بطاقة المنتج “كود SVG”.
• نوع أيقونة السابق (التنقل) - الأيقونة على زر الصفحة السابقة ضمن أرقام الصفحات، مثل صفحات التصنيفات: الافتراضي (سهم صغير) أو كود SVG لأيقونتك الخاصة.
• كود SVG للسابق - الصق كود SVG الخاص بالأيقونة هنا عندما يكون نوع أيقونة السابق (التنقل) “كود SVG”.
• نوع أيقونة التالي (التنقل) - الأيقونة على زر الصفحة التالية ضمن أرقام الصفحات: الافتراضي (سهم صغير) أو كود SVG لأيقونتك الخاصة.
• كود SVG للتالي - الصق كود SVG الخاص بالأيقونة هنا عندما يكون نوع أيقونة التالي (التنقل) “كود SVG”.