شوبيفاي للمتاجر العربية: الدليل الكامل

الدليل الأكثر تحديثًا والتفصيلي لضبط متجر شوبيفاي الخاص بك إلى RTL (من اليمين إلى اليسار) والعربية.

الترجمة

ترجمة نصوص القالب

يمكن تعديل جميع النصوص من خلال واجهة تحرير اللغة المدمجة في شوبيفاي.
انتقل إلى صفحة القوالب، واختر القالب الذي تريد ترجمته:

الإجراءات > تحرير اللغات

سيتم توجيهك إلى محرر اللغة، حيث ستختار اللغة التي تريد ترجمة القالب إليها. ثم ستحتاج إلى البدء في ترجمة ما يقرب من 1,200 نص قالب في القالب المتوسط.

يوفر تطبيق RTL Master، الذي ذكرناه سابقًا، ترجمة جاهزة لهذه النصوص، لذلك لن تحتاج إلى ترجمتها جميعًا يدويًا.

ترجمة محتوى متجرك

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

إذا كان متجرك بالعربية فقط، فلا توجد مشكلة؛ يمكنك كتابة كل محتوى متجرك بالعربية.
في حالة المتجر متعدد اللغات، ستحتاج إلى استخدام تطبيق ترجمة معتمد من شوبيفاي.

يقدم RTL Master ميزة ترجمة كاملة، مع ترجمة تلقائية لجميع أصول متجرك إلى العربية بنقرة واحدة.

تخطيط القالب

قوالب شوبيفاي

قوالب شوبيفاي احترافية وجميلة. المشكلة الوحيدة هي أنها جميعًا مصممة للغات LTR، حيث أن هذه هي الأسواق الأكثر أهمية.

لحسن الحظ، تعديل قوالب شوبيفاي إلى تخطيط RTL (من اليمين إلى اليسار) ليست مهمة مستحيلة.
مع التغييرات الصحيحة في ملفات CSS و JS الخاصة بقوالبك، ستتمكن من جعلها تبدو كما لو كانت مصممة للعربية.

ضبط كود القالب إلى RTL

لنبدأ باستهلاك خاطئ نموذجي: إضافة "dir=rtl" إلى عنصر HTML سيكون كافيًا لضبط القالب الخاص بك إلى RTL.
هذا النوع من النهج سينقل بعض العناصر إلى اليمين ولكن من المحتمل أن يسبب "فوضى" في القالب الخاص بك، مما يؤدي إلى كسر العناصر وإنشاء هوامش غير مرغوب فيها، وسيترك العديد من العناصر غير محاذاة إلى اليمين.

النهج الاحترافي الصحيح هو المرور عبر ملف CSS الخاص بك وضبط كل عنصر إلى الاتجاه الذي تريد أن يظهر به.
هذا مهم جدًا لأن موقع RTL لا يعني بالضرورة عكسًا كاملاً لإصدار LTR أو محاذاة إلى اليمين. هناك أشياء تريد أن تكون في المنتصف أو محاذاة إلى اليسار.

تحرير ملف CSS الخاص بالقالب

دعنا نلقي نظرة على إصدار LTR من قالب Dawn:

الآن، لنبدأ بإضافة القاعدة الرئيسية إلى ملف CSS الخاص بنا، وتحديد المشاكل، وإصلاحها.
سنضيف قاعدة RTL إلى عنصر HTML الخاص بنا:

html{
direction:rtl
}

الآن دعنا ننظر إلى النتيجة ونحدد المشاكل:

سطح المكتب:

• هوامش أيقونات الرأس غير متساوية
• سهم النشرة الإخبارية يشير في الاتجاه الخاطئ
• نموذج البحث والعنوان غير محاذيين إلى اليمين

الجوال:

• نفس المشاكل كما في سطح المكتب، باستثناء الأيقونة.
• يفتح درج القائمة في الاتجاه الخاطئ وينشئ خطأ.

هذه مجرد بعض الأخطاء التي ستواجهها بتغيير سمة اتجاه HTML.
ستحتاج إلى التحقيق في كل مشكلة، مثل التي ذكرناها، وإصلاحها بالتغييرات الصحيحة في ملفات CSS و JS.

هذا ليس معقدًا لمطور الويب ولكن قد يستغرق وقتًا طويلاً.

الإشعارات العربية

ترجمة الإشعارات

عندما يتفاعل العملاء مع متجرك، يتم إرسال عدة إشعارات (رسائل بريد إلكتروني ورسائل نصية) إليهم تلقائيًا من نظام شوبيفاي الخاص بك.
على سبيل المثال، رسائل البريد الإلكتروني للعملاء الذين تخلوا عن عربة التسوق أو وضعوا طلبًا أو العملاء الذين أنشأوا مستخدمًا.

يمكن تحرير هذه الإشعارات في إدارة شوبيفاي، تحت الإعدادات > الإشعارات.

يتم كتابة رسائل البريد الإلكتروني بـ "HTML". يمكنك تغيير جميع النصوص التي تظهر فيها إلى العربية.

خيار آخر هو استخدام تطبيق RTL Master، كما ذكرنا سابقًا. يوفر التطبيق قوالب جاهزة بالعربية لأولئك الذين لا يريدون التعامل مع تغييرات معقدة في HTML.

استخدام الخطوط العربية

الخطوط الافتراضية

بخلاف الأساسية، لا يدعم شوبيفاي الخطوط العربية افتراضيًا.

استخدام خطوط Google للخطوط العربية

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

• استيراد الخط عن طريق نسخ كود "@import" المقدم من خطوط Google وإضافته إلى ملف CSS الخاص بالقالب.
• اختر العناصر التي تريد أن يظهر فيها الخط، وطبق الخط عليها.
  يجب أن يبدو الكود النهائي الخاص بك هكذا:

@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');

body, p, blockquote, li, a, h1, h2, h3, h4, h5, h6{
{font-family: 'Cairo' !important;}
}

إضافة خطوط عربية مخصصة

إذا كنت ترغب في استخدام خطوطك المخصصة، وليس من خطوط Google، يمكنك إضافتها إلى القالب الخاص بك باتباع الخطوات التالية.

• قم بتحميل ملف .woff2 الخاص بخطك إلى ملفات شوبيفاي.
• انسخ رابط الملف
• أضف كود CSS التالي إلى ملف CSS الخاص بالقالب:

@font-face {
font-family: "XXXXX";
src: url("YYYY") format("woff2");
}

تأكد من استبدال XXXX باسم عائلة الخط و YYYY بالرابط الذي نسخته للتو.

• الآن تحتاج إلى اختيار العناصر التي تريد أن يظهر فيها الخط وتطبيق الخط عليها. يجب أن يبدو الكود النهائي الخاص بك هكذا:

@font-face {
font-family: "";
src: url("YYYY") format("woff2");
}

body, p, blockquote, li, a, h1, h2, h3, h4, h5, h6{
{font-family: 'XXXXX' !important;}
}

إعدادات العملة

تغيير العملة الافتراضية

يمكنك اختيار أي عملة موجودة تقريبًا لتكون الافتراضية لمتجرك..

انتقل إلى الإعدادات > عام وانتقل لأسفل إلى عملة المتجر.

انتبه! لا يمكن تغيير العملة بعد أول بيع في المتجر. من الممكن أن تطلب من دعم شوبيفاي إجراء تغيير.

تغيير رمز العملة

غيّر علامة الدولار ($) إلى الرمز الذي تريد أن يظهر، AED على سبيل المثال.

استخدام تطبيق RTL Master

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

سيفعل تطبيق RTL Master:

• جعل متجرك الإلكتروني ودودًا لمستخدميك المحليين من خلال توفير تخطيط RTL للقالب الخاص بك والدفع بلغتك.
• استخدام الخطوط العربية
• ترجمة وتنسيق RTL لإشعارات المتجر (تأكيد الطلب، التخلي عن الدفع، إلخ..)
• يسمح للمواقع متعددة اللغات بإظهار التخطيط الصحيح (RTL/LTR) بناءً على اللغة الحالية التي يتم تحميلها.