כיצד להתאים אישית את תוצאות החיפוש באמצעות CSS

מוכנים לגרום לתוצאות החיפוש שלכם להיראות מדהימות? במדריך הזה נסביר כיצד לעצב באמצעות 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 שלכם, כפי שמוסבר ב-תיעוד ה-CSS של MDN בנושא !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 - עיצוב כפתורי הפעולה הראשיים (הוספה לסל, צפייה במוצר וכו׳)
• .shoply-product-action-button-sold-out - עיצוב כפתור הפעולה כאשר המוצר אזל מהמלאי (מצב מושבת)

שימו לב: בקטע Customize AI Search במסוף הניהול של אפליקציית Shoply, אפשר להגדיר מה יקרה כאשר לקוחות ילחצו על כפתור הפעולה—הם יוכלו להוסיף את המוצר לסל, להיות מופנים לדף המוצר, או שתוכלו לבחור להסתיר את כפתור הפעולה לחלוטין.

מחלקות סיכום הבינה המלאכותית

• .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;
}

התאמת כפתורי פעולה

אפשר לעצב את כפתורי הפעולה שלכם (הוספה לסל, צפייה במוצר) כך שיתאימו לעיצוב החנות:

/* 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 Search, סיכום הבינה המלאכותית יופיע בראש תוצאות החיפוש ויסביר מיד מה כדאי לקנות ולמה, על סמך תוצאות החיפוש—עוד לפני שהלקוחות יגללו בין המוצרים.

אפשר להשבית את סיכום הבינה המלאכותית בדף Customize AI Search במסוף הניהול של האפליקציה. אפשר גם להתאים את המראה שלו באמצעות CSS, כפי שמוצג בהמשך.

עיצוב תיבת סיכום הבינה המלאכותית

    /* 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 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. בדקו את הדוגמאות החזותיות בהגדרות האפליקציה (תצוגה מקדימה של כרטיס מוצר ותצוגה מקדימה של סיכום הבינה המלאכותית)
2. עיינו במשאבי תיעוד CSS כמו MDN Web Docs 
3. צרו קשר עם צוות התמיכה שלנו לקבלת עזרה אישית בכתובת customer-obsession@shoplyai.ai

התאמה אישית מוצלחת! 🎨

בעזרת מחלקות ה-CSS האלה יש לכם שליטה מלאה במראה של תוצאות החיפוש. התנסו, בדקו וצרו חוויית חיפוש שתתאים באופן מושלם למותג שלכם!