Πώς να Προσαρμόσετε τα Αποτελέσματα Αναζήτησής σας με CSS
Είστε έτοιμοι να κάνετε τα αποτελέσματα αναζήτησής σας να δείχνουν εκπληκτικά; Αυτός ο οδηγός θα σας δείξει πώς να μορφοποιήσετε τα αποτελέσματα αναζήτησης προϊόντων και τις ενότητες σύνοψης AI με CSS. Μην ανησυχείτε αν είστε νέοι στη CSS — σας καλύπτουμε! Και αν ήδη αισθάνεστε άνετα με αυτήν, θα βρείτε πολλές συμβουλές για να πάτε την προσαρμογή σας στο επόμενο επίπεδο.
Ξεκινώντας
Τόσο το Shoply AI Chat όσο και το AI Search μπορούν να εμφανίζουν αποτελέσματα αναζήτησης, επομένως οι επιλογές προσαρμογής CSS που θα προσθέσετε θα εφαρμόζονται και στα δύο. Σημείωση: Η λειτουργία AI Summary είναι διαθέσιμη μόνο στο Shoply AI Search.
Πού να Προσθέσετε τη CSS σας
Για να αποκρύψετε ολόκληρη τη μπάρα φίλτρων, χρησιμοποιήστε το ενσωματωμένο στοιχείο ελέγχου: μεταβείτε στο Customize AI Search → Search filters, απενεργοποιήστε το Show filters in search results και κάντε κλικ στο Save. Δεν χρειάζεται CSS. Δείτε το Hide Search Filters για λεπτομέρειες.
- Μεταβείτε στην ενότητα Customize AI Search στην κονσόλα διαχείρισης της εφαρμογής Shoply.
- Βρείτε το πεδίο κειμένου CSS styles for search elements
- Εισαγάγετε τον προσαρμοσμένο κώδικα CSS σας στο πεδίο κειμένου
- Κάντε κλικ στο 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- Μορφοποιεί το όνομα 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)
Σημείωση: Στην ενότητα Customize AI Search της κονσόλας διαχείρισης της εφαρμογής Shoply, μπορείτε να ρυθμίσετε τι συμβαίνει όταν οι πελάτες κάνουν κλικ στο κουμπί ενέργειας — μπορούν να προσθέσουν το προϊόν στο καλάθι, να ανακατευθυνθούν στη σελίδα του προϊόντος ή μπορείτε να επιλέξετε να αποκρύψετε εντελώς το κουμπί ενέργειας.
Classes AI Summary
.shoply-ai-summary-box- Μορφοποιεί το πλαίσιο container για τις συνόψεις που δημιουργούνται από AI..shoply-ai-summary-button- Μορφοποιεί το κουμπί που ενεργοποιεί τη δημιουργία σύνοψης AI.
Παραδείγματα για την Προσαρμογή Καρτών Προϊόντων στα Αποτελέσματα Αναζήτησης με CSS
Αλλαγή της Μορφοποίησης του Brand Προϊόντος
Το brand του προϊόντος εμφανίζεται πάνω από τον τίτλο του προϊόντος. Ακολουθούν μερικές συνηθισμένες προσαρμογές:
/* 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 στην κονσόλα διαχείρισης της εφαρμογής. Μπορείτε επίσης να προσαρμόσετε την εμφάνισή του χρησιμοποιώντας 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 δεν εμφανίζονται
- Ελέγξτε για τυπογραφικά λάθη: Βεβαιωθείτε ότι τα ονόματα των CSS classes είναι γραμμένα σωστά (ξεκινούν με
.shoply-) - Καθαρίστε την cache του browser σας: Μερικές φορές οι browsers αποθηκεύουν παλιά styles
- Ελέγξτε τη σύνταξη της CSS: Βεβαιωθείτε ότι όλοι οι κανόνες CSS κλείνουν σωστά με
} - Χρησιμοποιήστε
!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:
- Ελέγξτε τα οπτικά παραδείγματα στις ρυθμίσεις της εφαρμογής (Product Card Preview και AI Summary Preview)
- Ανατρέξτε σε πηγές τεκμηρίωσης CSS όπως το MDN Web Docs
- Επικοινωνήστε με την ομάδα υποστήριξής μας για εξατομικευμένη βοήθεια στο customer-obsession@shoplyai.ai
Καλή Προσαρμογή! 🎨
Με αυτές τις CSS classes, έχετε πλήρη έλεγχο στην εμφάνιση των αποτελεσμάτων αναζήτησής σας. Πειραματιστείτε, δοκιμάστε και δημιουργήστε μια εμπειρία αναζήτησης που ταιριάζει απόλυτα με το brand σας!