Kā pielāgot meklēšanas rezultātus ar CSS

How to Customize Your Search Results with CSS

Vai esat gatavs padarīt savus meklēšanas rezultātus lieliskus? Šis ceļvedis parādīs, kā ar CSS stilizēt jūsu produktu meklēšanas rezultātus un AI kopsavilkuma sadaļas. Neuztraucieties, ja CSS jums ir jaunums — mēs par visu esam padomājuši! Un, ja jau jūtaties ar to pārliecināti, atradīsiet daudz padomu, kā pacelt pielāgošanu nākamajā līmenī.

Darba sākšana

Gan Shoply AI Chat, gan AI Search var attēlot meklēšanas rezultātus, tāpēc jūsu pievienotās CSS pielāgošanas opcijas attieksies uz abiem. Piezīme: AI Summary funkcija ir pieejama tikai Shoply AI Search.

Kur pievienot savu CSS

Lai paslēptu visu filtru joslu, izmantojiet iebūvēto vadīklu: dodieties uz Customize AI Search → Search filters, izslēdziet Show filters in search results un noklikšķiniet uz Save. CSS nav nepieciešams. Plašāku informāciju skatiet Hide Search Filters .

Atveriet Customize AI Search sadaļu Shoply lietotnes administratora konsolē.
Atrodiet teksta lauku CSS styles for search elements
Ievadiet savu pielāgoto CSS kodu teksta laukā
Noklikšķiniet uz Save, lai piemērotu izmaiņas

CSS pamati

CSS ļauj mainīt krāsas, fontus, atstarpes, apmales un daudz ko citu. Pamata sintakse ir šāda:

css


.class-name {
    property: value;
}

Piemēram, lai mainītu teksta krāsu uz tumši sarkanu:

css


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

Izpratne par Shoply specifiskajām CSS klasēm

Shoply nodrošina konkrētas CSS klases, kuras varat izmantot, lai mērķētu uz dažādām meklēšanas rezultātu daļām. Katra klase atbilst konkrētam elementam meklēšanas rezultātā.

Shoply šīm klasēm ir definējis arī noteiktus noklusējuma stilus. Šos stilus varat pārbaudīt, izmantojot Chrome DevTools , un meklēt katru no klasēm. Ja nepieciešams ignorēt noklusējuma stilus, pievienojiet CSS noteikumiem deklarāciju !important, kā paskaidrots MDN CSS !important dokumentācijā .

Produktu kartīšu klases

Customizing Product Cards in Search Results with CSS

Stili konteineram:

.shoply-product-image - Stilizē produkta attēlu
.shoply-product-card - Stilizē produkta kartītes konteineru

Stili teksta informācijai:

.shoply-product-brand - Stilizē produkta zīmola/piegādātāja nosaukumu, kas tiek rādīts virs produkta virsraksta
.shoply-product-name - Stilizē produkta virsrakstu/nosaukumu

Stili cenai:

.shoply-product-price - Stilizē produkta cenu (pēc atlaides piemērošanas)
.shoply-product-original-price-before-discount - Stilizē sākotnējo cenu pirms atlaides (pēc noklusējuma ar pārsvītrojumu)
.shoply-product-discount-percent - Stilizē atlaides procentu tekstu (pēc noklusējuma tiek rādīts kā trekns sarkans teksts)

Stili darbības pogai:

.shoply-product-action-button - Stilizē galvenās darbības pogas (Add to Cart, View Product u.c.)
.shoply-product-action-button-sold-out - Stilizē darbības pogu, kad produkts ir izpārdots (atspējots stāvoklis)

Piezīme: Shoply lietotnes administratora konsoles sadaļā Customize AI Search varat konfigurēt, kas notiek, kad klienti noklikšķina uz darbības pogas — viņi var pievienot produktu grozam, tikt novirzīti uz produkta lapu, vai arī varat izvēlēties darbības pogu pilnībā paslēpt.

AI kopsavilkuma klases

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Stilizē AI ģenerēto kopsavilkumu konteinera lodziņu.
.shoply-ai-summary-button - Stilizē pogu, kas aktivizē AI kopsavilkuma ģenerēšanu.

Piemēri produktu kartīšu pielāgošanai meklēšanas rezultātos ar CSS

Produkta zīmola noformējuma maiņa

Produkta zīmols tiek rādīts virs produkta virsraksta. Šeit ir daži biežākie pielāgojumi:

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

Produkta virsraksta pielāgošana

Produkta nosaukums ir viens no svarīgākajiem elementiem. Pielāgojiet to, lai tas atbilstu jūsu zīmolam:

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

Piemēri produktu cenu stilizēšanai

Padariet savas cenas pamanāmas ar pielāgotu noformējumu:

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

Darbības pogu pielāgošana

Jūsu darbības pogas (Add to Cart, View Product) var stilizēt tā, lai tās atbilstu jūsu veikala dizainam:

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

Produktu attēlu stilizēšana

Uzlabojiet savus produktu attēlus ar apmalēm, ēnām vai peles kursora efektiem:

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

Piemēri AI kopsavilkuma sadaļas pielāgošanai

Veikaliem, kuros ir iespējots AI Search, AI Summary parādīsies meklēšanas rezultātu augšdaļā un uzreiz izskaidros, ko pirkt un kāpēc, pamatojoties uz meklēšanas rezultātiem — vēl pirms klienti sāk ritināt produktus.

Jūs varat atspējot AI Summary lietotnes administratora konsoles lapā Customize AI Search. Varat arī pielāgot tā izskatu, izmantojot CSS, kā parādīts zemāk.

AI kopsavilkuma lodziņa stilizēšana

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

AI kopsavilkuma pogas pielāgošana

Pēc noklusējuma AI Summary ir īss un kodolīgs, lai taupītu vietu ekrānā. Klienti var noklikšķināt uz “AI Summary Button”, lai izvērstu un skatītu pilnu informāciju. Vēlaties, lai tā atbilst jūsu zīmolam? Arī šo pogu varat pielāgot! Apskatiet tālāk redzamos piemērus.

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

Problēmu novēršana

Manas CSS izmaiņas netiek parādītas

Pārbaudiet drukas kļūdas: Pārliecinieties, ka jūsu CSS klašu nosaukumi ir uzrakstīti pareizi (tie sākas ar .shoply-)
Notīriet pārlūka kešatmiņu: Dažreiz pārlūki saglabā vecos stilus
Pārbaudiet CSS sintaksi: Pārliecinieties, ka visi jūsu CSS noteikumi ir pareizi aizvērti ar }
Izmantojiet !important: Ja stili netiek piemēroti, iespējams, būs jāpievieno !important, lai ignorētu noklusējuma stilus:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Stili mobilajās ierīcēs izskatās citādi

Dažiem stiliem var būt nepieciešami mobilajām ierīcēm specifiski pielāgojumi. Izmantojiet media queries:

css


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

Nepieciešams atiestatīt uz noklusējuma stiliem

Vienkārši notīriet CSS teksta lauku un saglabājiet. Lietotne atgriezīsies pie noklusējuma noformējuma.

Vajag papildu palīdzību?

Ja jums nepieciešama papildu palīdzība ar CSS pielāgošanu:

Apskatiet vizuālos piemērus lietotnes iestatījumos (Product Card Preview un AI Summary Preview)
Skatiet CSS dokumentācijas resursus, piemēram, MDN Web Docs
Sazinieties ar mūsu atbalsta komandu, lai saņemtu personalizētu palīdzību, rakstot uz customer-obsession@shoplyai.ai

Veiksmīgu pielāgošanu! 🎨

Ar šīm CSS klasēm jums ir pilnīga kontrole pār jūsu meklēšanas rezultātu izskatu. Eksperimentējiet, testējiet un izveidojiet meklēšanas pieredzi, kas perfekti atbilst jūsu zīmolam!