Kaip pritaikyti paieškos rezultatus naudojant CSS

How to Customize Your Search Results with CSS

Pasiruošę, kad jūsų paieškos rezultatai atrodytų nuostabiai? Šis vadovas parodys, kaip stilizuoti produktų paieškos rezultatus ir AI suvestinės skiltis naudojant CSS. Nesijaudinkite, jei CSS jums dar nauja — mes jums padėsime! O jei jau gerai ją išmanote, čia rasite daugybę patarimų, kaip savo pritaikymą pakelti į kitą lygį.

Darbo pradžia

Tiek Shoply AI Chat, tiek AI Search gali rodyti paieškos rezultatus, todėl jūsų pridėtos CSS pritaikymo parinktys bus taikomos abiem. Pastaba: AI Summary funkcija pasiekiama tik Shoply AI Search.

Kur pridėti savo CSS

Norėdami paslėpti visą filtrų juostą, naudokite integruotą valdiklį: eikite į Customize AI Search → Search filters, išjunkite Show filters in search results ir spustelėkite Save. CSS nereikia. Išsamią informaciją rasite Hide Search Filters .

Eikite į Customize AI Search skiltį Shoply programėlės administratoriaus konsolėje.
Raskite teksto lauką CSS styles for search elements
Įveskite savo pasirinktinį CSS kodą į teksto lauką
Spustelėkite Save, kad pritaikytumėte pakeitimus

CSS pagrindai

CSS leidžia keisti spalvas, šriftus, tarpus, kraštines ir dar daugiau. Pagrindinė sintaksė yra tokia:

css


.class-name {
    property: value;
}

Pavyzdžiui, norėdami pakeisti teksto spalvą į tamsiai raudoną:

css


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

Shoply specifinių CSS klasių supratimas

Shoply pateikia specifines CSS klases, kurias galite naudoti skirtingoms paieškos rezultatų dalims pasirinkti. Kiekviena klasė atitinka konkretų paieškos rezultato elementą.

Shoply šioms klasėms taip pat yra apibrėžusi tam tikrus numatytuosius stilius. Juos galite patikrinti naudodami Chrome DevTools ir ieškodami kiekvienos klasės. Jei reikia perrašyti numatytuosius stilius, pridėkite !important deklaraciją prie savo CSS taisyklių, kaip paaiškinta MDN CSS !important dokumentacijoje .

Produktų kortelių klasės

Customizing Product Cards in Search Results with CSS

Konteinerio stiliai:

.shoply-product-image - Stilizuoja produkto paveikslėlį
.shoply-product-card - Stilizuoja produkto kortelės konteinerį

Tekstinės informacijos stiliai:

.shoply-product-brand - Stilizuoja produkto prekės ženklą / tiekėjo pavadinimą, rodomą virš produkto pavadinimo
.shoply-product-name - Stilizuoja produkto antraštę / pavadinimą

Kainos stiliai:

.shoply-product-price - Stilizuoja produkto kainą (po nuolaidos pritaikymo)
.shoply-product-original-price-before-discount - Stilizuoja pradinę kainą prieš nuolaidą (pagal numatytuosius nustatymus su perbraukimo dekoracija)
.shoply-product-discount-percent - Stilizuoja nuolaidos procento tekstą (pagal numatytuosius nustatymus rodomas kaip paryškintas raudonas tekstas)

Veiksmo mygtuko stiliai:

.shoply-product-action-button - Stilizuoja pagrindinius veiksmo mygtukus (Add to Cart, View Product ir kt.)
.shoply-product-action-button-sold-out - Stilizuoja veiksmo mygtuką, kai produktas išparduotas (išjungta būsena)

Pastaba: Shoply programėlės administratoriaus konsolės Customize AI Search skiltyje galite nustatyti, kas nutinka, kai klientai spusteli veiksmo mygtuką — jie gali pridėti produktą į krepšelį, būti nukreipti į produkto puslapį arba galite pasirinkti visai paslėpti veiksmo mygtuką.

AI suvestinės klasės

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Stilizuoja AI sugeneruotų suvestinių konteinerio lauką.
.shoply-ai-summary-button - Stilizuoja mygtuką, kuris paleidžia AI suvestinės generavimą.

Produktų kortelių pritaikymo paieškos rezultatuose naudojant CSS pavyzdžiai

Produkto prekės ženklo stiliaus keitimas

Produkto prekės ženklas rodomas virš produkto pavadinimo. Štai keli dažni pritaikymo variantai:

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

Produkto pavadinimo pritaikymas

Produkto pavadinimas yra vienas svarbiausių elementų. Pritaikykite jį taip, kad atitiktų jūsų prekės ženklą:

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

Produktų kainų stilizavimo pavyzdžiai

Išryškinkite kainas pasirinktiniais stiliais:

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

Veiksmo mygtukų pritaikymas

Jūsų veiksmo mygtukai (Add to Cart, View Product) gali būti stilizuoti taip, kad atitiktų jūsų parduotuvės dizainą:

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

Produktų paveikslėlių stilizavimas

Patobulinkite produktų paveikslėlius kraštinėmis, šešėliais ar hover efektais:

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

AI suvestinės skilties pritaikymo pavyzdžiai

Parduotuvėse, kuriose įjungta AI Search, AI Summary bus rodoma paieškos rezultatų viršuje ir akimirksniu paaiškins, ką verta pirkti ir kodėl, remiantis paieškos rezultatais — dar prieš klientams pradedant slinkti per produktus.

Galite išjungti AI Summary programėlės administratoriaus konsolės puslapyje Customize AI Search. Taip pat galite pritaikyti jos išvaizdą naudodami CSS, kaip parodyta toliau.

AI suvestinės laukelio stilizavimas

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 suvestinės mygtuko pritaikymas

Pagal numatytuosius nustatymus AI Summary yra trumpa ir aiški, kad būtų taupoma vieta ekrane. Klientai gali spustelėti „AI Summary Button“, kad išskleistų ir pamatytų visą informaciją. Norite, kad jis atitiktų jūsų prekės ženklą? Galite pritaikyti ir šį mygtuką! Peržiūrėkite toliau pateiktus pavyzdžius.

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

Trikčių šalinimas

Mano CSS pakeitimai nerodomi

Patikrinkite, ar nėra rašybos klaidų: Įsitikinkite, kad jūsų CSS klasių pavadinimai parašyti teisingai (jie prasideda .shoply-)
Išvalykite naršyklės podėlį: Kartais naršyklės išsaugo senus stilius
Patikrinkite CSS sintaksę: Įsitikinkite, kad visos CSS taisyklės tinkamai uždaromos su }
Naudokite !important: Jei stiliai netaikomi, gali reikėti pridėti !important, kad perrašytumėte numatytuosius stilius:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Stiliai mobiliajame įrenginyje atrodo kitaip

Kai kuriems stiliams gali reikėti mobiliesiems įrenginiams skirtų koregavimų. Naudokite media queries:

css


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

Reikia atkurti numatytuosius stilius

Tiesiog išvalykite CSS teksto lauką ir išsaugokite. Programėlė grįš prie numatytojo stilizavimo.

Reikia daugiau pagalbos?

Jei jums reikia papildomos pagalbos dėl CSS pritaikymo:

Peržiūrėkite vaizdinius pavyzdžius programėlės nustatymuose (Product Card Preview ir AI Summary Preview)
Pasinaudokite CSS dokumentacijos ištekliais, tokiais kaip MDN Web Docs
Susisiekite su mūsų palaikymo komanda dėl asmeninės pagalbos adresu customer-obsession@shoplyai.ai

Sėkmingo pritaikymo! 🎨

Naudodami šias CSS klases, jūs visiškai valdote savo paieškos rezultatų išvaizdą. Eksperimentuokite, testuokite ir sukurkite paieškos patirtį, kuri tobulai atitinka jūsų prekės ženklą!