طريقة التعديل على صفحة المنتج في يوكان بالتفصيل

تعتبر صفحة المنتج في أي متجر إلكتروني هي الواجهة الأساسية التي يتفاعل معها العميل المحتمل، وهي العامل الحاسم في قراره بالشراء. على منصة “يوكان” (YouCan.shop)، تمثل صفحة المنتج المحور الذي تدور حوله استراتيجيات زيادة المبيعات وتحسين تجربة المستخدم. إن تصميم صفحة منتج احترافية، سهلة الاستخدام، ومقنعة بصريًا لا يعزز فقط من ثقة العملاء، بل يساهم بشكل مباشر في رفع معدل التحويل (Conversion Rate).

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

أولاً: تفعيل الدفع السريع (Express Checkout) لتجربة شراء سلسة

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

عند تفعيل هذه الميزة، يتم دمج نموذج إدخال معلومات العميل (الاسم، العنوان، رقم الهاتف) مباشرة في صفحة المنتج نفسها، مما يلغي حاجة العميل للانتقال إلى صفحة أخرى لإتمام الطلب. هذا الاختصار في الخطوات يوفر تجربة شراء سريعة وسلسة، ويقلل من تردد العميل، وبالتالي يزيد من احتمالية إتمامه لعملية الشراء.

خطوات تفعيل الدفع السريع في يوكان:

1. الدخول إلى لوحة تحكم متجرك: قم بتسجيل الدخول إلى حسابك على منصة YouCan.
2. الانتقال إلى إعدادات المتجر: من القائمة الجانبية، اختر “المتجر” (Store)، ثم اضغط على “إعدادات القالب” (Theme Settings).
3. الوصول إلى إعدادات المنتج: داخل إعدادات القالب، ابحث عن قسم “إعدادات المنتج” (Product Settings) وانقر عليه.
4. تفعيل خيار الدفع السريع: ستجد ضمن الخيارات المتاحة خيارًا باسم “Express Checkout” أو “الدفع السريع”. كل ما عليك فعله هو تفعيله.
5. حفظ التغييرات: لا تنسَ الضغط على زر “حفظ” (Save) لتطبيق التعديلات على متجرك.

بمجرد تفعيل هذا الخيار، سيظهر نموذج الطلب مباشرة أسفل تفاصيل المنتج، مما يشجع الزوار على اتخاذ قرار الشراء الفوري.

ثانياً: إعادة ترتيب عناصر صفحة المنتج في YouCan

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

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

كيفية إعادة ترتيب عناصر صفحة المنتج:

1. توجه إلى إعدادات القالب: كما في الخطوة السابقة، اذهب إلى “المتجر” ثم “إعدادات القالب”.
2. اختر إعدادات المنتج: اضغط على قسم “إعدادات المنتج”.
3. ابحث عن قسم “الأقسام” (Sections): ستجد قائمة بجميع عناصر صفحة المنتج (عنوان المنتج، الصور، السعر، الوصف، إلخ).
4. السحب والإفلات (Drag and Drop): بجانب كل عنصر، ستجد أيقونة تسمح لك بسحبه لأعلى أو لأسفل. ببساطة، قم بالضغط على العنصر الذي تريد تحريكه واسحبه إلى الموضع الجديد الذي تريده في الترتيب.
5. تفعيل أو إلغاء تفعيل العناصر: يمكنك أيضاً إخفاء بعض العناصر التي لا تحتاجها عن طريق إلغاء تفعيلها من نفس القائمة.
6. حفظ التغييرات: بعد الانتهاء من الترتيب المثالي لمنتجك، اضغط على “حفظ”.

هذه المرونة تتيح لك إجراء اختبارات A/B Testing لمعرفة الترتيب الذي يحقق أعلى معدل تحويل لمنتجاتك.

ثالثاً: تحسين مظهر خانات الدفع (Checkout) باستخدام كود CSS مخصص

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

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

الكود المطلوب:

<style>
.checkout {
    border: 5px solid #000000;
    border-style: dotted;
    border-color: #d0021b;
    border-radius: 20px;
    margin: 0 0 10px;
    padding: 0 15px 9px 15px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px;
}
.single-product .checkout-section .checkout .main .checkout-form .checkout-select select,
.single-product .checkout-section .checkout .main .checkout-form input[type="text"],
.single-product .checkout-section .checkout .main .checkout-form input[type="email"],
.single-product .checkout-section .checkout .main .checkout-form input[type="url"],
.single-product .checkout-section .checkout .main .checkout-form input[type="search"],
.single-product .checkout-section .checkout .main .checkout-form input[type="number"],
.single-product .checkout-section .checkout .main .checkout-form input[type="tel"],
.single-product .checkout-section .checkout .main .checkout-form input[type="password"],
.single-product .checkout-section .checkout .main .checkout-form textarea {
    border-color: #d0021b;
    border-radius: 15px;
}
.checkout-heading {
    animation: zoom 3s infinite linear;
    text-align: center;
    font-weight: bold!important;
}
[dir] .checkout-section .checkout .main .checkout-form .checkout-groups {
    margin: 0 -7.5px;
}
.checkout-form {
    padding: 30px;
    border-radius: 7px;
}
[dir] input[type=email],
[dir] input[type=number],
[dir] input[type=password],
[dir] input[type=search],
[dir] input[type=tel],
[dir] input[type=text],
[dir] input[type=url],
[dir] textarea {
    border-radius: 12px;
    border: 2px solid;
    padding: 10px 15px;
    background-color: #ffffff;
}
@media (max-width: 768px) {
.checkout-section .checkout {
flex-direction: column;
justify-content: center;
margin: 38px 0 0 0;
}
}
@media (min-width: 768px) {
.checkout-section .checkout {
align-items: flex-start;
justify-content: space-between;
margin: 41px 0 0 0;
}
}
[dir] .textual-button label {
background-color: #ff0000;
border: 1px solid #ff0000;
border-radius: 3px;
cursor: pointer;
padding: 5px 12px;
color: #f8f8f8;
}
</style>

<style>
.checkout {
    border: 5px solid #000000;
    border-style: dotted;
    border-color: #d0021b;
    border-radius: 20px;
    margin: 0 0 10px;
    padding: 0 15px 9px 15px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 20px 0px;
}
.single-product .checkout-section .checkout .main .checkout-form .checkout-select select,
.single-product .checkout-section .checkout .main .checkout-form input[type="text"],
.single-product .checkout-section .checkout .main .checkout-form input[type="email"],
.single-product .checkout-section .checkout .main .checkout-form input[type="url"],
.single-product .checkout-section .checkout .main .checkout-form input[type="search"],
.single-product .checkout-section .checkout .main .checkout-form input[type="number"],
.single-product .checkout-section .checkout .main .checkout-form input[type="tel"],
.single-product .checkout-section .checkout .main .checkout-form input[type="password"],
.single-product .checkout-section .checkout .main .checkout-form textarea {
    border-color: #d0021b;
    border-radius: 15px;
}
.checkout-heading {
    animation: zoom 3s infinite linear;
    text-align: center;
    font-weight: bold!important;
}
[dir] .checkout-section .checkout .main .checkout-form .checkout-groups {
    margin: 0 -7.5px;
}
.checkout-form {
    padding: 30px;
    border-radius: 7px;
}
[dir] input[type=email],
[dir] input[type=number],
[dir] input[type=password],
[dir] input[type=search],
[dir] input[type=tel],
[dir] input[type=text],
[dir] input[type=url],
[dir] textarea {
    border-radius: 12px;
    border: 2px solid;
    padding: 10px 15px;
    background-color: #ffffff;
}
@media (max-width: 768px) {
.checkout-section .checkout {
flex-direction: column;
justify-content: center;
margin: 38px 0 0 0;
}
}
@media (min-width: 768px) {
.checkout-section .checkout {
align-items: flex-start;
justify-content: space-between;
margin: 41px 0 0 0;
}
}
[dir] .textual-button label {
background-color: #ff0000;
border: 1px solid #ff0000;
border-radius: 3px;
cursor: pointer;
padding: 5px 12px;
color: #f8f8f8;
}
</style>

قائمة شاملة لأكواد الألوان

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

هناك عدة طرق لتعريف الألوان رقميًا، وأشهرها:

1. نظام HEX (السداسي عشري): هو الأكثر شيوعًا في تصميم الويب. يتكون من علامة الهاشتاغ (#) متبوعة بستة أحرف وأرقام. يمثل كل زوج من الأحرف قيمة ألوان الأحمر والأخضر والأزرق (RGB) على التوالي. على سبيل المثال، #FFFFFF هو اللون الأبيض و #000000 هو اللون الأسود.
2. نظام RGB (الأحمر والأخضر والأزرق): يحدد هذا النظام الألوان من خلال تحديد شدة كل من الألوان الأساسية الثلاثة: الأحمر، الأخضر، والأزرق. تتراوح قيمة كل لون من 0 إلى 255. على سبيل المثال، rgb(255, 0, 0) يمثل اللون الأحمر النقي.
3. نظام HSL (درجة اللون، التشبع، الإضاءة): يمثل هذا النظام الألوان بطريقة أكثر بديهية للمصممين.
   • Hue (درجة اللون): هي درجة اللون على عجلة الألوان من 0 إلى 360.
   • Saturation (التشبع): هي نقاء اللون (نسبة مئوية).
   • Lightness (الإضاءة): هي درجة سطوع اللون (نسبة مئوية).

قائمة بأشهر أكواد الألوان:

نقدم لكم قائمة منسقة لمجموعات الألوان المختلفة بأسمائها وأكوادها بنظام HEX و RGB.

الألوان الأساسية والمتدرجة

درجات اللون الأحمر

درجات اللون الوردي

درجات اللون البرتقالي

درجات اللون الأصفر

درجات اللون الأخضر

درجات اللون الأزرق والسماوي

درجات اللون البنفسجي والأرجواني

درجات اللون البني

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

خطوات إضافة السكريبت إلى متجرك:

1. الذهاب إلى إعدادات: من لوحة التحكم الخاصة بـ YouCan، توجه إلى “الإعدادات” (Settings) ثم اختر “أونلاين (القالب القديم)”.
2. الدخول إلى تكوينات CSS/JavaScript: ابحث عن خيار “CSS/JavaScript configs” وانقر عليه.
3. لصق الكود: ستجد حقلين، أحدهما لـ “رمز العنوان الإضافي” (Header) والآخر لـ “الرمز التذييل الإضافي” (Footer)، قم بلصق الكود كاملاً (مع وسوم <style>) في حقل “رمز العنوان الإضافي”.
4. حفظ: اضغط على زر “حفظ” لحفظ التغييرات.

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

خاتمة

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