כיצד להתאים אישית את מראה AI Search

יש שתי דרכים להתאים אישית את תוצאות החיפוש של Shoply AI:

• אפשרויות מובנות: התחילו עם הפקדים ב-Shoply AI Admin Console כדי לשנות סיכומים, מסננים, כפתורים, צבעים ופריסת מוצרים בלי לכתוב קוד. גלו את האפשרויות המובנות ואת התצוגות המקדימות.
• CSS מותאם אישית: אם הפקדים האלה לא מספקים את העיצוב הרצוי, השתמשו ב-CSS — שפת העיצוב של דפי אינטרנט — כדי לכוונן גופנים, ריווח, מסגרות ופרטים חזותיים נוספים. אפשר להשתמש בו לצד ההגדרות המובנות. עברו למדריך ה-CSS.

כנראה שאין לכם בכלל צורך ב-CSS

רוב השינויים בפריסה ובמראה של החיפוש כבר זמינים תחת Customize AI Search ב-Shoply AI Admin Console שלכם, בין אם אתם משתמשים ב-Shopify או בפלטפורמת אתר אחרת. נסו קודם את האפשרויות המובנות האלה, ואז לחצו על Save בממשק הניהול כדי להחיל את הבחירות שלכם. השתמשו ב-CSS עבור עיצוב שהפקדים האלה לא מכסים.

הדוגמאות האינטראקטיביות למטה משתמשות באותן תצוגות מקדימות כמו בממשק הניהול. אלה המחשות שתוכלו לנסות כאן; הן לא משנות את החנות שלכם.

• AI Summary: הפעילו או כבו את הסיכום, ובחרו אם הוא יופיע מעל או מתחת לתוצאות המוצרים.

• Search filters: הציגו או הסתירו את סרגל המסננים, ומקמו את המסננים למעלה, משמאל או בפאנל צף. הפריסה השמאלית עוברת מעל התוצאות במסכים קטנים יותר. ראו הגדרות נראות של מסנני חיפוש לגבי ההשפעה המשותפת על תוצאות הצ’אט.

• Product action buttons and colors: בחרו Add to Cart, ‏View Product או No Button. בחרו את צבעי הרקע והטקסט של הכפתור, ושנו את צבע כוכבי הדירוג כך שיתאים לחנות שלכם.

• Products per row: בחרו שלוש או ארבע עמודות במחשב שולחני, ועמודה אחת או שתיים במובייל. פחות עמודות נותנות לכל תמונת מוצר יותר מקום.

• Total products displayed: הגדירו מספרי מוצרים נפרדים למסכי מובייל קטנים, למסכי מובייל גדולים יותר ולמחשב שולחני. ממשק הניהול מציע 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 - עיצוב תיבת הקונטיינר עבור סיכומים שנוצרו על ידי AI.
• .shoply-ai-summary-button - עיצוב הכפתור שמפעיל יצירת סיכום AI.

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