كيفية تخصيص نتائج البحث باستخدام CSS

هل أنت مستعد لجعل نتائج البحث تبدو مذهلة؟ سيوضح لك هذا الدليل كيفية تنسيق نتائج البحث عن المنتجات وأقسام ملخص الذكاء الاصطناعي باستخدام CSS. لا تقلق إذا كنت جديدًا على CSS—سنساعدك في كل خطوة! وإذا كنت معتادًا عليه بالفعل، فستجد الكثير من النصائح للارتقاء بتخصيصك إلى المستوى التالي.

البدء

يمكن لكل من Shoply AI Chat وAI Search عرض نتائج البحث، لذا ستُطبَّق خيارات تخصيص CSS التي تضيفها على كليهما. ملاحظة: تتوفر ميزة AI Summary في Shoply AI Search فقط.

أين تضيف CSS الخاص بك

1. انتقل إلى قسم Customize AI Search في لوحة تحكم المسؤول في تطبيق Shoply.
2. ابحث عن حقل النص CSS styles for search elements
3. أدخل كود CSS المخصص في حقل النص
4. انقر على Save لتطبيق تغييراتك

أساسيات CSS

تتيح لك CSS تغيير الألوان والخطوط والمسافات والحدود وغير ذلك. الصيغة الأساسية هي:

.class-name {
    property: value;
}

على سبيل المثال، لتغيير لون النص إلى الأحمر الداكن:

.shoply-product-name {
    color:rgb(82, 2, 2);
}

فهم فئات CSS الخاصة بـShoply

يوفر Shoply فئات CSS محددة يمكنك استخدامها لاستهداف أجزاء مختلفة من نتائج البحث. تتوافق كل فئة مع عنصر محدد في نتيجة البحث.

حدّد Shoply أيضًا بعض الأنماط الافتراضية لهذه الفئات. يمكنك فحص هذه الأنماط باستخدام Chrome DevTools  والبحث عن كل فئة منها. وإذا كنت بحاجة إلى تجاوز الأنماط الافتراضية، فأضف التصريح !important إلى قواعد CSS الخاصة بك كما هو موضح في وثائق MDN حول CSS !important .

فئات بطاقة المنتج

أنماط الحاوية:

• .shoply-product-image - تنسّق صورة المنتج
• .shoply-product-card - تنسّق حاوية بطاقة المنتج

أنماط المعلومات النصية:

• .shoply-product-brand - تنسّق اسم العلامة التجارية/البائع للمنتج المعروض فوق عنوان المنتج
• .shoply-product-name - تنسّق عنوان/اسم المنتج

أنماط السعر:

• .shoply-product-price - تنسّق سعر المنتج (بعد تطبيق الخصم)
• .shoply-product-original-price-before-discount - تنسّق السعر الأصلي قبل الخصم (مع زخرفة الشطب افتراضيًا)
• .shoply-product-discount-percent - تنسّق نص نسبة الخصم (المعروض كنص أحمر عريض افتراضيًا)

أنماط زر الإجراء:

• .shoply-product-action-button - تنسّق أزرار الإجراء الرئيسية (Add to Cart وView Product وغيرهما)
• .shoply-product-action-button-sold-out - تنسّق زر الإجراء عندما يكون المنتج غير متوفر (حالة التعطيل)

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

فئات AI Summary

• .shoply-ai-summary-box - تنسّق مربع الحاوية للملخصات المُنشأة بواسطة الذكاء الاصطناعي.
• .shoply-ai-summary-button - تنسّق الزر الذي يبدأ إنشاء ملخص الذكاء الاصطناعي.

أمثلة على تخصيص بطاقات المنتجات في نتائج البحث باستخدام CSS

تغيير نمط العلامة التجارية للمنتج

تظهر العلامة التجارية للمنتج فوق عنوان المنتج. إليك بعض التخصيصات الشائعة:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

تخصيص عنوان المنتج

اسم المنتج أحد أهم العناصر. خصّصه ليتوافق مع علامتك التجارية:

/* Make product title bold and larger */
.shoply-product-name {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
    margin-bottom: 8px;
}
 
/* Add hover effect */
.shoply-product-name:hover {
    color: #0066cc;
    text-decoration: underline;
}

أمثلة على تنسيق أسعار المنتجات

اجعل أسعارك بارزة باستخدام تنسيق مخصص:

/* Style the current price (after discount) */
.shoply-product-price {
    font-size: 20px;
    font-weight: 700;
    color: #e74c3c;
    margin-top: 10px;
}
 
/* Style the original price (before discount) - greyed out with strikethrough */
.shoply-product-original-price-before-discount {
    font-size: 14px;
    color: #999999;
    margin-left: 8px;
    text-decoration: line-through;
}

تخصيص أزرار الإجراء

يمكن تنسيق أزرار الإجراء (Add to Cart وView Product) لتتوافق مع تصميم متجرك:

/* Style the main action button with blue background, white text, rounded corners, and smooth transitions */
.shoply-product-action-button {
    background-color: #0066cc !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    border: none;
}
 
/* Add hover effect - darker blue background, slight lift, and shadow */
.shoply-product-action-button:hover {
    background-color: #0052a3 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 102, 204, 0.3);
}
 
/* Style sold-out button - grey background, darker grey text, disabled cursor, and reduced opacity */
.shoply-product-action-button-sold-out {
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

تنسيق صور المنتجات

حسّن صور منتجاتك بإضافة حدود أو ظلال أو تأثيرات تمرير:

/* Add border and shadow to product images */
.shoply-product-image {
    border-radius: 8px;
    border: 2px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
 
/* Add hover effect of the product image*/
.shoply-product-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

أمثلة على تخصيص قسم AI Summary

بالنسبة إلى المتاجر التي تمكّن AI Search، سيظهر AI Summary في أعلى نتائج البحث، وسيشرح فورًا ما الذي ينبغي شراؤه ولماذا استنادًا إلى نتائج البحث—وذلك قبل أن يبدأ العملاء حتى في التمرير بين المنتجات.

يمكنك تعطيل AI Summary في صفحة Customize AI Search في لوحة تحكم المسؤول في التطبيق. كما يمكنك تخصيص مظهره باستخدام CSS كما هو موضح أدناه.

تنسيق مربع AI Summary

    /* Style the AI summary box with purple gradient background, white text, rounded corners, shadow, and semi-transparent border */
.shoply-ai-summary-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
 
/* Alternative: Light theme - light gray background with subtle border and shadow */
.shoply-ai-summary-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

تخصيص زر AI Summary

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

/* Customize the summary button */
.shoply-ai-summary-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}
 
/* Add hover effect */
.shoply-ai-summary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

استكشاف الأخطاء وإصلاحها

لا تظهر تغييرات CSS التي أجريتها

1. تحقق من الأخطاء المطبعية: تأكد من كتابة أسماء فئات CSS بشكل صحيح (تبدأ بـ.shoply-)
2. امسح ذاكرة التخزين المؤقت للمتصفح: تخزّن المتصفحات أحيانًا الأنماط القديمة مؤقتًا
3. تحقق من صيغة CSS: تأكد من إغلاق جميع قواعد CSS الخاصة بك بشكل صحيح باستخدام }
4. استخدم !important: إذا لم تُطبَّق الأنماط، فقد تحتاج إلى إضافة !important لتجاوز الأنماط الافتراضية:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

تبدو الأنماط مختلفة على الهاتف المحمول

قد تحتاج بعض الأنماط إلى تعديلات خاصة بالهاتف المحمول. استخدم استعلامات الوسائط:

@media (max-width: 768px) {
    .shoply-product-name {
        font-size: 14px;
    }
}

أحتاج إلى إعادة تعيين الأنماط الافتراضية

ما عليك سوى مسح حقل نص CSS وحفظه. سيعيد التطبيق الأنماط الافتراضية.

هل تحتاج إلى مزيد من المساعدة؟

إذا كنت بحاجة إلى مساعدة إضافية بشأن تخصيص CSS:

1. تحقق من الأمثلة المرئية في إعدادات التطبيق (معاينة بطاقة المنتج ومعاينة AI Summary)
2. ارجع إلى موارد توثيق CSS مثل مستندات MDN على الويب 
3. تواصل مع فريق الدعم للحصول على مساعدة مخصصة عبر customer-obsession@shoplyai.ai

نتمنى لك تخصيصًا موفقًا! 🎨

باستخدام فئات CSS هذه، لديك تحكم كامل في مظهر نتائج البحث. جرّب واختبر وأنشئ تجربة بحث تتوافق تمامًا مع علامتك التجارية!