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

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

البدء

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

أولاً، قم بتفعيل AI Search قبل تنسيقه حتى تتمكن من معاينة التغييرات على نتائج حقيقية.

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

لإخفاء شريط التصفية بالكامل، استخدم عنصر التحكم المدمج: انتقل إلى Customize AI Search → Search filters، ثم أوقف Show filters in search results، ثم انقر على Save. لا حاجة إلى CSS. راجع Hide Search Filters  للتفاصيل.

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 queries:

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

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

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

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

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

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

نتمنى لك تخصيصًا ممتعًا! 🎨

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