Kako prilagoditi rezultate iskanja s CSS

How to Customize Your Search Results with CSS

Ste pripravljeni, da bodo vaši rezultati iskanja videti odlično? Ta vodič vam bo pokazal, kako z uporabo CSS oblikovati rezultate iskanja izdelkov in razdelke z AI povzetkom. Brez skrbi, če ste novi pri CSS — poskrbeli smo za vas! Če pa vam je CSS že domač, boste našli veliko nasvetov, s katerimi lahko prilagoditve dvignete na višjo raven.

Začetek

Tako Shoply AI Chat kot AI Search lahko prikazujeta rezultate iskanja, zato bodo možnosti prilagajanja CSS, ki jih dodate, veljale za oba. Opomba: funkcija AI Summary je na voljo samo v Shoply AI Search.

Kam dodati svoj CSS

Če želite skriti celotno vrstico filtrov, uporabite vgrajeni nadzor: pojdite na Customize AI Search → Search filters, izklopite Show filters in search results in kliknite Save. CSS ni potreben. Za podrobnosti glejte Hide Search Filters .

Pojdite v razdelek Customize AI Search v skrbniški konzoli aplikacije Shoply.
Poiščite besedilno polje CSS styles for search elements
Vnesite svojo prilagojeno kodo CSS v besedilno polje
Kliknite Save, da uveljavite spremembe

Osnove CSS

CSS vam omogoča spreminjanje barv, pisav, razmikov, robov in še več. Osnovna sintaksa je:

css


.class-name {
    property: value;
}

Na primer, če želite spremeniti barvo besedila v temno rdečo:

css


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

Razumevanje CSS razredov, specifičnih za Shoply

Shoply ponuja posebne CSS razrede, ki jih lahko uporabite za ciljanje različnih delov rezultatov iskanja. Vsak razred ustreza določenemu elementu v rezultatu iskanja.

Shoply je za te razrede določil tudi nekatere privzete sloge. Te sloge lahko pregledate z uporabo Chrome DevTools in poiščete posamezen razred. Če morate prepisati privzete sloge, dodajte svojim pravilom CSS deklaracijo !important, kot je pojasnjeno v dokumentaciji MDN CSS !important .

Razredi kartic izdelkov

Customizing Product Cards in Search Results with CSS

Slogi za vsebnik:

.shoply-product-image - Oblikuje sliko izdelka
.shoply-product-card - Oblikuje vsebnik kartice izdelka

Slogi za besedilne informacije:

.shoply-product-brand - Oblikuje ime blagovne znamke/dobavitelja izdelka, prikazano nad naslovom izdelka
.shoply-product-name - Oblikuje naslov/ime izdelka

Slogi za ceno:

.shoply-product-price - Oblikuje ceno izdelka (po uporabljenem popustu)
.shoply-product-original-price-before-discount - Oblikuje prvotno ceno pred popustom (privzeto s prečrtano dekoracijo)
.shoply-product-discount-percent - Oblikuje besedilo odstotka popusta (privzeto prikazano kot krepko rdeče besedilo)

Slogi za akcijski gumb:

.shoply-product-action-button - Oblikuje glavne akcijske gumbe (Add to Cart, View Product itd.)
.shoply-product-action-button-sold-out - Oblikuje akcijski gumb, ko je izdelek razprodan (onemogočeno stanje)

Opomba: V razdelku Customize AI Search v skrbniški konzoli aplikacije Shoply lahko nastavite, kaj se zgodi, ko stranke kliknejo akcijski gumb — izdelek lahko dodajo v košarico, so preusmerjene na stran izdelka ali pa izberete, da akcijski gumb popolnoma skrijete.

Razredi AI Summary

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Oblikuje vsebniško polje za AI-generirane povzetke.
.shoply-ai-summary-button - Oblikuje gumb, ki sproži generiranje AI povzetka.

Primeri prilagajanja kartic izdelkov v rezultatih iskanja s CSS

Spreminjanje sloga blagovne znamke izdelka

Blagovna znamka izdelka se prikaže nad naslovom izdelka. Tukaj je nekaj pogostih prilagoditev:

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

Prilagajanje naslova izdelka

Ime izdelka je eden najpomembnejših elementov. Prilagodite ga tako, da se ujema z vašo blagovno znamko:

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

Primeri oblikovanja cen izdelkov

Poskrbite, da bodo vaše cene izstopale s prilagojenim oblikovanjem:

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

Prilagajanje akcijskih gumbov

Vaši akcijski gumbi (Add to Cart, View Product) se lahko oblikujejo tako, da se ujemajo z oblikovanjem vaše trgovine:

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

Oblikovanje slik izdelkov

Izboljšajte slike svojih izdelkov z robovi, sencami ali učinki ob prehodu miške:

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

Primeri prilagajanja razdelka AI Summary

Pri trgovinah, ki omogočajo AI Search, se AI Summary prikaže na vrhu rezultatov iskanja in takoj pojasni, kaj kupiti in zakaj na podlagi rezultatov iskanja — še preden stranke sploh začnejo pregledovati izdelke.

AI Summary lahko onemogočite na strani Customize AI Search v skrbniški konzoli aplikacije. Njegov videz lahko prilagodite tudi z uporabo CSS, kot je prikazano spodaj.

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

Prilagajanje gumba AI Summary

Privzeto je AI Summary kratek in jedrnat, da prihrani prostor na zaslonu. Stranke lahko kliknejo gumb “AI Summary Button”, da ga razširijo in vidijo vse podrobnosti. Želite, da se ujema z vašo blagovno znamko? Tudi ta gumb lahko prilagodite! Oglejte si spodnje primere.

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

Odpravljanje težav

Moje spremembe CSS niso prikazane

Preverite tipkarske napake: Prepričajte se, da so imena vaših CSS razredov pravilno zapisana (začnejo se z .shoply-)
Počistite predpomnilnik brskalnika: Včasih brskalniki shranijo stare sloge v predpomnilnik
Preverite sintakso CSS: Prepričajte se, da so vsa pravila CSS pravilno zaključena z }
Uporabite !important: Če se slogi ne uporabijo, boste morda morali dodati !important, da prepišete privzete sloge:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Slogi so na mobilnih napravah videti drugače

Nekateri slogi bodo morda potrebovali prilagoditve posebej za mobilne naprave. Uporabite media queries:

css


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

Morate ponastaviti na privzete sloge

Preprosto počistite besedilno polje za CSS in shranite. Aplikacija se bo vrnila na privzeto oblikovanje.

Potrebujete dodatno pomoč?

Če potrebujete dodatno pomoč pri prilagajanju CSS:

Oglejte si vizualne primere v nastavitvah aplikacije (Product Card Preview in AI Summary Preview)
Oglejte si vire dokumentacije za CSS, kot je MDN Web Docs
Obrnite se na našo ekipo za podporo za prilagojeno pomoč na customer-obsession@shoplyai.ai

Srečno prilagajanje! 🎨

S temi CSS razredi imate popoln nadzor nad videzom svojih rezultatov iskanja. Preizkušajte, testirajte in ustvarite izkušnjo iskanja, ki se popolnoma ujema z vašo blagovno znamko!