Cum să îți personalizezi rezultatele căutării cu CSS

How to Customize Your Search Results with CSS

Ești gata să faci rezultatele căutării să arate minunat? Acest ghid îți va arăta cum să stilizezi rezultatele căutării de produse și secțiunile de rezumat AI cu CSS. Nu-ți face griji dacă ești nou în CSS — te ajutăm noi! Iar dacă deja te simți confortabil cu el, vei găsi o mulțime de sfaturi pentru a-ți duce personalizarea la nivelul următor.

Noțiuni introductive

Atât Shoply AI Chat, cât și AI Search pot afișa rezultate ale căutării, așa că opțiunile de personalizare CSS pe care le adaugi se vor aplica ambelor. Notă: funcționalitatea AI Summary este disponibilă doar în Shoply AI Search.

Unde să adaugi CSS-ul tău

Pentru a ascunde întreaga bară de filtre, folosește controlul integrat: mergi la Customize AI Search → Search filters, dezactivează Show filters in search results și fă clic pe Save. Nu este necesar niciun CSS. Vezi Hide Search Filters pentru detalii.

Navighează la secțiunea Customize AI Search din consola de administrare a aplicației Shoply.
Găsește zona de text CSS styles for search elements
Introdu codul tău CSS personalizat în zona de text
Fă clic pe Save pentru a aplica modificările

Noțiuni de bază despre CSS

CSS îți permite să schimbi culori, fonturi, spațiere, borduri și multe altele. Sintaxa de bază este:

css


.class-name {
    property: value;
}

De exemplu, pentru a schimba culoarea textului în roșu închis:

css


.shoply-product-name {
    color:rgb(82, 2, 2);
}

Înțelegerea claselor CSS specifice Shoply

Shoply oferă clase CSS specifice pe care le poți folosi pentru a viza diferite părți ale rezultatelor tale de căutare. Fiecare clasă corespunde unui element specific din rezultatul căutării.

Shoply a definit și anumite stiluri implicite pentru aceste clase. Poți inspecta aceste stiluri folosind Chrome DevTools și căutând fiecare dintre clase. Dacă trebuie să suprascrii stilurile implicite, adaugă declarația !important la regulile tale CSS, așa cum este explicat în documentația MDN CSS !important .

Clase pentru cardurile de produs

Customizing Product Cards in Search Results with CSS

Stiluri pentru container:

.shoply-product-image - Stilizează imaginea produsului
.shoply-product-card - Stilizează containerul cardului de produs

Stiluri pentru informațiile text:

.shoply-product-brand - Stilizează numele brandului/furnizorului produsului afișat deasupra titlului produsului
.shoply-product-name - Stilizează titlul/numele produsului

Stiluri pentru preț:

.shoply-product-price - Stilizează prețul produsului (după aplicarea reducerii)
.shoply-product-original-price-before-discount - Stilizează prețul original înainte de reducere (cu text tăiat în mod implicit)
.shoply-product-discount-percent - Stilizează textul procentului de reducere (afișat implicit ca text roșu îngroșat)

Stiluri pentru butonul de acțiune:

.shoply-product-action-button - Stilizează butoanele principale de acțiune (Add to Cart, View Product etc.)
.shoply-product-action-button-sold-out - Stilizează butonul de acțiune atunci când produsul este epuizat (stare dezactivată)

Notă: În secțiunea Customize AI Search din consola de administrare a aplicației Shoply, poți configura ce se întâmplă când clienții fac clic pe butonul de acțiune — pot adăuga produsul în coș, pot fi redirecționați către pagina produsului sau poți alege să ascunzi complet butonul de acțiune.

Clase pentru AI Summary

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Stilizează caseta container pentru rezumatele generate de AI.
.shoply-ai-summary-button - Stilizează butonul care declanșează generarea rezumatului AI.

Exemple pentru personalizarea cardurilor de produs din rezultatele căutării cu CSS

Schimbarea stilului brandului produsului

Brandul produsului apare deasupra titlului produsului. Iată câteva personalizări comune:

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

Personalizarea titlului produsului

Numele produsului este unul dintre cele mai importante elemente. Personalizează-l pentru a se potrivi cu brandul tău:

css


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

Exemple pentru stilizarea prețurilor produselor

Fă-ți prețurile să iasă în evidență cu stiluri personalizate:

css


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

Personalizarea butoanelor de acțiune

Butoanele tale de acțiune (Add to Cart, View Product) pot fi stilizate pentru a se potrivi cu designul magazinului tău:

css


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

Stilizarea imaginilor produselor

Îmbunătățește imaginile produselor tale cu borduri, umbre sau efecte la hover:

css


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

Exemple pentru personalizarea secțiunii AI Summary

Pentru magazinele care activează AI Search, AI Summary va apărea în partea de sus a rezultatelor căutării și va explica instantaneu ce merită cumpărat și de ce, pe baza rezultatelor căutării — înainte ca clienții să deruleze prin produse.

Poți dezactiva AI Summary în pagina Customize AI Search din consola de administrare a aplicației. De asemenea, îi poți personaliza aspectul folosind CSS, așa cum este arătat mai jos.

Stilizarea casetei AI Summary

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);
}

Personalizarea butonului AI Summary

În mod implicit, AI Summary este păstrat scurt și la obiect pentru a economisi spațiu pe ecran. Clienții pot face clic pe „AI Summary Button” pentru a extinde și a vedea toate detaliile. Vrei să se potrivească cu brandul tău? Poți personaliza și acest buton! Vezi exemplele de mai jos.

css


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

Depanare

Modificările mele CSS nu apar

Verifică greșelile de scriere: Asigură-te că numele claselor CSS sunt scrise corect (încep cu .shoply-)
Golește memoria cache a browserului: Uneori browserele păstrează în cache stiluri vechi
Verifică sintaxa CSS: Asigură-te că toate regulile tale CSS sunt închise corect cu }
Folosește !important: Dacă stilurile nu se aplică, poate fi necesar să adaugi !important pentru a suprascrie stilurile implicite:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Stilurile arată diferit pe mobil

Unele stiluri pot avea nevoie de ajustări specifice pentru mobil. Folosește media queries:

css


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

Ai nevoie să revii la stilurile implicite

Pur și simplu golește zona de text CSS și salvează. Aplicația va reveni la stilizarea implicită.

Ai nevoie de mai mult ajutor?

Dacă ai nevoie de asistență suplimentară pentru personalizarea CSS:

Verifică exemplele vizuale din setările aplicației (Product Card Preview și AI Summary Preview)
Consultă resurse de documentație CSS precum MDN Web Docs
Contactează echipa noastră de suport pentru ajutor personalizat la customer-obsession@shoplyai.ai

Personalizare plăcută! 🎨

Cu aceste clase CSS, ai control complet asupra aspectului rezultatelor tale de căutare. Experimentează, testează și creează o experiență de căutare care se potrivește perfect cu brandul tău!