Πώς να προσαρμόσετε την εμφάνιση του AI Search

Υπάρχουν δύο τρόποι να προσαρμόσετε τα αποτελέσματα αναζήτησης του Shoply AI:

• Ενσωματωμένες επιλογές: Ξεκινήστε με τα χειριστήρια στο Shoply AI Admin Console για να αλλάξετε περιλήψεις, φίλτρα, κουμπιά, χρώματα και τη διάταξη των προϊόντων χωρίς να γράψετε κώδικα. Εξερευνήστε τις ενσωματωμένες επιλογές και τις προεπισκοπήσεις.
• Προσαρμοσμένο CSS: Αν αυτά τα χειριστήρια δεν σας δίνουν το σχέδιο που θέλετε, χρησιμοποιήστε CSS—τη γλώσσα μορφοποίησης για ιστοσελίδες—για να τελειοποιήσετε γραμματοσειρές, αποστάσεις, περιγράμματα και άλλες οπτικές λεπτομέρειες. Μπορείτε να το χρησιμοποιήσετε παράλληλα με τις ενσωματωμένες ρυθμίσεις. Μεταβείτε στον οδηγό CSS.

Πιθανότατα Δεν Χρειάζεστε Καθόλου CSS

Οι περισσότερες αλλαγές στη διάταξη και την εμφάνιση της αναζήτησης είναι ήδη διαθέσιμες στην ενότητα Customize AI Search στο Shoply AI Admin Console, είτε χρησιμοποιείτε Shopify είτε άλλη πλατφόρμα ιστοσελίδας. Δοκιμάστε πρώτα αυτές τις ενσωματωμένες επιλογές και έπειτα κάντε κλικ στο Save στο admin για να εφαρμόσετε τις επιλογές σας. Χρησιμοποιήστε CSS για μορφοποίηση που δεν καλύπτεται από αυτά τα χειριστήρια.

Τα διαδραστικά παραδείγματα παρακάτω χρησιμοποιούν τις ίδιες προεπισκοπήσεις με το admin. Είναι παραδείγματα που μπορείτε να δοκιμάσετε εδώ· δεν αλλάζουν το κατάστημά σας.

• AI Summary: Ενεργοποιήστε ή απενεργοποιήστε την περίληψη και επιλέξτε αν θα εμφανίζεται πάνω ή κάτω από τα αποτελέσματα προϊόντων.

• Φίλτρα αναζήτησης: Εμφανίστε ή αποκρύψτε τη γραμμή φίλτρων και τοποθετήστε τα φίλτρα στην κορυφή, στα αριστερά ή σε αιωρούμενο πάνελ. Η αριστερή διάταξη μετακινείται πάνω από τα αποτελέσματα σε μικρότερες οθόνες. Δείτε τις ρυθμίσεις ορατότητας φίλτρων αναζήτησης για την κοινή επίδραση στα αποτελέσματα συνομιλίας.

• Κουμπιά ενεργειών προϊόντων και χρώματα: Επιλέξτε Add to Cart, View Product ή No Button. Διαλέξτε τα χρώματα φόντου και κειμένου του κουμπιού και αλλάξτε το χρώμα των αστεριών αξιολόγησης ώστε να ταιριάζει με το κατάστημά σας.

• Προϊόντα ανά σειρά: Επιλέξτε τρεις ή τέσσερις στήλες σε υπολογιστή και μία ή δύο στήλες σε κινητό. Οι λιγότερες στήλες δίνουν περισσότερο χώρο σε κάθε εικόνα προϊόντος.

• Συνολικά εμφανιζόμενα προϊόντα: Ορίστε ξεχωριστούς αριθμούς προϊόντων για μικρές οθόνες κινητών, μεγαλύτερες οθόνες κινητών και υπολογιστές. Το admin προσφέρει 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 στο admin console της εφαρμογής 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 Classes Ειδικά για το Shoply

Το Shoply παρέχει συγκεκριμένες CSS classes που μπορείτε να χρησιμοποιήσετε για να στοχεύσετε διαφορετικά μέρη των αποτελεσμάτων αναζήτησής σας. Κάθε class αντιστοιχεί σε ένα συγκεκριμένο στοιχείο στο αποτέλεσμα αναζήτησης.

Το Shoply έχει επίσης ορίσει ορισμένα προεπιλεγμένα styles για αυτές τις classes. Μπορείτε να επιθεωρήσετε αυτά τα styles χρησιμοποιώντας το Chrome DevTools  και να αναζητήσετε καθεμία από τις classes. Αν χρειάζεται να παρακάμψετε τα προεπιλεγμένα styles, προσθέστε τη δήλωση !important στους κανόνες CSS σας, όπως εξηγείται στην τεκμηρίωση MDN CSS !important .

Classes Κάρτας Προϊόντος

Styles για το container:

• .shoply-product-image - Μορφοποιεί την εικόνα προϊόντος
• .shoply-product-card - Μορφοποιεί το container της κάρτας προϊόντος

Styles για τις πληροφορίες κειμένου:

• .shoply-product-brand - Μορφοποιεί το όνομα μάρκας/προμηθευτή του προϊόντος που εμφανίζεται πάνω από τον τίτλο του προϊόντος
• .shoply-product-name - Μορφοποιεί τον τίτλο/όνομα του προϊόντος

Styles για την τιμή:

• .shoply-product-price - Μορφοποιεί την τιμή του προϊόντος (μετά την εφαρμογή της έκπτωσης)
• .shoply-product-original-price-before-discount - Μορφοποιεί την αρχική τιμή πριν από την έκπτωση (με διαγράμμιση από προεπιλογή)
• .shoply-product-discount-percent - Μορφοποιεί το κείμενο του ποσοστού έκπτωσης (εμφανίζεται ως έντονο κόκκινο κείμενο από προεπιλογή)

Styles για το κουμπί ενέργειας:

• .shoply-product-action-button - Μορφοποιεί τα βασικά κουμπιά ενέργειας (Add to Cart, View Product, κ.λπ.)
• .shoply-product-action-button-sold-out - Μορφοποιεί το κουμπί ενέργειας όταν το προϊόν έχει εξαντληθεί (disabled state)

Σημείωση: Στην ενότητα Customize AI Search του admin console της εφαρμογής Shoply, μπορείτε να ρυθμίσετε τι συμβαίνει όταν οι πελάτες κάνουν κλικ στο κουμπί ενέργειας—μπορούν να προσθέσουν το προϊόν στο καλάθι, να μεταφερθούν στη σελίδα του προϊόντος ή μπορείτε να επιλέξετε να αποκρύψετε εντελώς το κουμπί ενέργειας.

Classes AI Summary

• .shoply-ai-summary-box - Μορφοποιεί το πλαίσιο container για περιλήψεις που δημιουργούνται από 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;
}

Προσαρμογή Τίτλου Προϊόντος

Το όνομα του προϊόντος είναι ένα από τα πιο σημαντικά στοιχεία. Προσαρμόστε το ώστε να ταιριάζει με το brand σας:

/* 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) μπορούν να μορφοποιηθούν ώστε να ταιριάζουν με το design του καταστήματός σας:

/* 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;
}

Μορφοποίηση Εικόνων Προϊόντων

Αναβαθμίστε τις εικόνες των προϊόντων σας με περιγράμματα, σκιές ή εφέ hover:

/* 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 στο admin console της εφαρμογής. Μπορείτε επίσης να προσαρμόσετε την εμφάνισή του χρησιμοποιώντας 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” για να το αναπτύξουν και να δουν όλες τις λεπτομέρειες. Θέλετε να ταιριάζει με το brand σας; Μπορείτε να προσαρμόσετε και αυτό το κουμπί! Δείτε τα παραδείγματα παρακάτω.

/* 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 classes είναι γραμμένα σωστά (ξεκινούν με .shoply-)
2. Καθαρίστε την cache του browser: Μερικές φορές οι browsers αποθηκεύουν παλιά styles
3. Ελέγξτε τη σύνταξη CSS: Βεβαιωθείτε ότι όλοι οι κανόνες CSS κλείνουν σωστά με }
4. Χρησιμοποιήστε !important: Αν τα styles δεν εφαρμόζονται, ίσως χρειαστεί να προσθέσετε !important για να παρακάμψετε τα προεπιλεγμένα styles:
   css

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

Τα styles φαίνονται διαφορετικά σε κινητό

Ορισμένα styles μπορεί να χρειάζονται προσαρμογές ειδικά για κινητά. Χρησιμοποιήστε media queries:

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

Χρειάζεται επαναφορά στα προεπιλεγμένα styles

Απλώς καθαρίστε το πεδίο κειμένου CSS και αποθηκεύστε. Η εφαρμογή θα επανέλθει στην προεπιλεγμένη μορφοποίηση.

Χρειάζεστε Περισσότερη Βοήθεια;

Αν χρειάζεστε επιπλέον βοήθεια με την προσαρμογή CSS:

1. Ελέγξτε τα οπτικά παραδείγματα στις ρυθμίσεις της εφαρμογής (Product Card Preview και AI Summary Preview)
2. Ανατρέξτε σε πηγές τεκμηρίωσης CSS όπως το MDN Web Docs 
3. Επικοινωνήστε με την ομάδα υποστήριξής μας για εξατομικευμένη βοήθεια στο customer-obsession@shoplyai.ai

Καλή Προσαρμογή! 🎨

Με αυτές τις CSS classes, έχετε πλήρη έλεγχο πάνω στην εμφάνιση των αποτελεσμάτων αναζήτησής σας. Πειραματιστείτε, δοκιμάστε και δημιουργήστε μια εμπειρία αναζήτησης που ταιριάζει απόλυτα με το brand σας!