كيفية تخصيص مظهر AI Search

هناك طريقتان لتخصيص نتائج البحث في Shoply AI:

• الخيارات المدمجة: ابدأ بعناصر التحكم الموجودة في Shoply AI Admin Console لتغيير الملخصات والفلاتر والأزرار والألوان وتخطيط المنتجات دون كتابة أي كود. استكشف الخيارات المدمجة والمعاينات.
• CSS مخصص: إذا لم تمنحك هذه العناصر التصميم الذي تريده، فاستخدم CSS — وهي لغة تنسيق صفحات الويب — لضبط الخطوط والمسافات والحدود والتفاصيل المرئية الأخرى بدقة. يمكنك استخدامها إلى جانب الإعدادات المدمجة. انتقل إلى دليل CSS.

ربما لا تحتاج إلى CSS على الإطلاق

تتوفر معظم تغييرات تخطيط البحث ومظهره بالفعل ضمن Customize AI Search في Shoply AI Admin Console، سواء كنت تستخدم Shopify أو أي منصة مواقع ويب أخرى. جرّب هذه الخيارات المدمجة أولاً، ثم انقر على Save في لوحة الإدارة لتطبيق اختياراتك. استخدم CSS للتنسيق الذي لا تغطيه هذه العناصر.

تستخدم الأمثلة التفاعلية أدناه نفس المعاينات الموجودة في لوحة الإدارة. وهي أمثلة توضيحية يمكنك تجربتها هنا؛ لكنها لا تغيّر متجرك.

• AI Summary: قم بتشغيل الملخص أو إيقافه، واختر ما إذا كان سيظهر أعلى نتائج المنتجات أو أسفلها.

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

• أزرار إجراءات المنتج والألوان: اختر Add to Cart أو View Product أو No Button. حدّد ألوان خلفية الزر ونصه، وغيّر لون نجوم التقييم ليتناسب مع متجرك.

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

• إجمالي عدد المنتجات المعروضة: عيّن أعدادًا منفصلة للمنتجات لشاشات الهاتف الصغيرة، وشاشات الهاتف الأكبر، وسطح المكتب. توفّر لوحة الإدارة 3 أو 4 أو 6 أو 8 أو 9 أو 12 أو 15 أو 16 أو 18 أو 20 منتجًا. هذا يتحكم في عدد النتائج، وليس عدد الأعمدة.

إذا كنت لا تزال بحاجة إلى تصميم مخصص، فتابع إلى دليل 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 - ينسّق الزر الذي يفعّل إنشاء AI Summary.

أمثلة على تخصيص بطاقات المنتجات في نتائج البحث باستخدام 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 هذه، ستكون لديك سيطرة كاملة على مظهر نتائج البحث الخاصة بك. جرّب واختبر وأنشئ تجربة بحث تتوافق تمامًا مع علامتك التجارية!