Cum să personalizați aspectul AI Search

Există două moduri de a personaliza rezultatele tale Shoply AI search:

• Opțiuni integrate: Începe cu controalele din Shoply AI Admin Console pentru a schimba rezumatele, filtrele, butoanele, culorile și aspectul produselor fără să scrii cod. Explorează opțiunile integrate și previzualizările.
• CSS personalizat: Dacă acele controale nu îți oferă designul dorit, folosește CSS — limbajul de stilizare pentru pagini web — pentru a ajusta fin fonturile, spațierea, marginile și alte detalii vizuale. Îl poți folosi împreună cu setările integrate. Mergi la ghidul CSS.

Probabil că nu ai deloc nevoie de CSS

Majoritatea modificărilor de aspect și apariție pentru căutare sunt deja disponibile în Customize AI Search din Shoply AI Admin Console, indiferent dacă folosești Shopify sau o altă platformă de website. Încearcă mai întâi aceste opțiuni integrate, apoi dă click pe Save în admin pentru a aplica alegerile tale. Folosește CSS pentru stilizarea pe care aceste controale nu o acoperă.

Exemplele interactive de mai jos folosesc aceleași previzualizări ca în admin. Sunt ilustrații pe care le poți încerca aici; ele nu îți modifică magazinul.

• AI Summary: Activează sau dezactivează rezumatul și alege dacă apare deasupra sau sub rezultatele produselor.

• Filtre de căutare: Afișează sau ascunde bara de filtre și poziționează filtrele sus, în stânga sau într-un panou flotant. Aspectul din stânga se mută deasupra rezultatelor pe ecrane mai mici. Vezi setările de vizibilitate pentru filtrele de căutare pentru efectul comun asupra rezultatelor din chat.

• Butoane de acțiune pentru produse și culori: Alege Add to Cart, View Product sau No Button. Selectează culorile de fundal și ale textului pentru buton și schimbă culoarea stelelor de evaluare ca să se potrivească magazinului tău.

• Produse pe rând: Alege trei sau patru coloane pe desktop și una sau două coloane pe mobil. Mai puține coloane oferă mai mult spațiu fiecărei imagini de produs.

• Total produse afișate: Setează numere separate de produse pentru ecrane mobile mici, ecrane mobile mai mari și desktop. Adminul oferă 3, 4, 6, 8, 9, 12, 15, 16, 18 sau 20 de produse. Acest lucru controlează numărul de rezultate, nu numărul de coloane.

Dacă încă ai nevoie de un design personalizat, continuă cu ghidul CSS de mai jos.

Noțiuni de bază

Dacă opțiunile integrate nu îți oferă aspectul dorit, folosește CSS personalizat pentru a ajusta fin rezultatele căutării.

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

Mai întâi, activează AI Search înainte să îl stilizezi, astfel încât să poți previzualiza modificările pe rezultate reale.

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 dă click pe Save. Nu este nevoie de CSS. Vezi Hide Search Filters  pentru detalii.

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

Noțiuni de bază despre CSS

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

.class-name {
    property: value;
}

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

.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 ținti diferite părți ale rezultatelor 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 acele stiluri folosind Chrome DevTools  și căutând fiecare dintre clase. Dacă trebuie să suprascrii stilurile implicite, adaugă declarația !important în regulile tale CSS, așa cum este explicat în documentația MDN CSS !important .

Clase pentru cardul de produs

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 decorare tăiată 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 dau click 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

• .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 în rezultatele căutării cu CSS

Schimbarea stilului brandului produsului

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

/* 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 ca să se potrivească brandului tău:

/* 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ță prin stilizare personalizată:

/* 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 designului magazinului tău:

/* 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 cu margini, umbre sau efecte la 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);
}

Exemple pentru personalizarea secțiunii AI Summary

Pentru magazinele care activează AI Search, AI Summary va apărea în partea de sus a rezultatelor de căutare și explică instant 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

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

Implicit, AI Summary este păstrat scurt și la obiect pentru a economisi spațiu pe ecran. Clienții pot da click pe “AI Summary Button” pentru a extinde și a vedea toate detaliile. Vrei să se potrivească brandului tău? Poți personaliza și acest buton! Vezi exemplele de mai jos.

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

1. Verifică greșelile de tastare: Asigură-te că numele claselor CSS sunt scrise corect (încep cu .shoply-)
2. Golește memoria cache a browserului: Uneori browserele păstrează în cache stiluri vechi
3. Verifică sintaxa CSS: Asigură-te că toate regulile CSS sunt închise corect cu }
4. Folosește !important: Dacă stilurile nu se aplică, s-ar putea să fie nevoie 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:

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

Trebuie 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:

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

Spor la personalizare! 🎨

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