Kako prilagoditi videz AI Search

Obstajata dva načina za prilagoditev rezultatov iskanja Shoply AI:

• Vgrajene možnosti: Začnite s kontrolniki v svoji konzoli Shoply AI Admin Console, da brez pisanja kode spremenite povzetke, filtre, gumbe, barve in postavitev izdelkov. Raziščite vgrajene možnosti in predoglede.
• CSS po meri: Če vam ti kontrolniki ne omogočajo želenega videza, uporabite CSS — jezik za oblikovanje spletnih strani — za natančno prilagoditev pisav, razmikov, obrob in drugih vizualnih podrobnosti. Uporabljate ga lahko skupaj z vgrajenimi nastavitvami. Pojdite na vodič za CSS.

Verjetno sploh ne potrebujete CSS-ja

Večina sprememb postavitve in videza iskanja je že na voljo v razdelku Customize AI Search v vaši Shoply AI Admin Console, ne glede na to, ali uporabljate Shopify ali drugo platformo za spletno mesto. Najprej preizkusite te vgrajene možnosti, nato pa v skrbniškem vmesniku kliknite Save, da uporabite svoje izbire. CSS uporabite za oblikovanje, ki ga ti kontrolniki ne pokrivajo.

Interaktivni primeri spodaj uporabljajo enake predoglede kot skrbniški vmesnik. To so ponazoritve, ki jih lahko preizkusite tukaj; ne spremenijo vaše trgovine.

• AI Summary: Vklopite ali izklopite povzetek in izberite, ali se prikaže nad ali pod rezultati izdelkov.

• Filtri iskanja: Prikažite ali skrijte vrstico s filtri ter postavite filtre na vrh, na levo stran ali v plavajočo ploščo. Leva postavitev se na manjših zaslonih premakne nad rezultate. Oglejte si nastavitve vidnosti filtrov iskanja za skupni učinek na rezultate klepeta.

• Gumbi za dejanja izdelkov in barve: Izberite Add to Cart, View Product ali No Button. Določite barvo ozadja gumba in barvo besedila ter spremenite barvo zvezdic ocen, da se ujema z vašo trgovino.

• Izdelki v vrstici: Izberite tri ali štiri stolpce na namizju ter enega ali dva stolpca na mobilnih napravah. Manj stolpcev pomeni več prostora za vsako sliko izdelka.

• Skupno število prikazanih izdelkov: Nastavite ločeno število izdelkov za majhne mobilne zaslone, večje mobilne zaslone in namizje. Skrbniški vmesnik ponuja 3, 4, 6, 8, 9, 12, 15, 16, 18 ali 20 izdelkov. To nadzira število rezultatov in ne števila stolpcev.

Če še vedno potrebujete oblikovanje po meri, nadaljujte s spodnjim vodičem za CSS.

Kako začeti

Če vam vgrajene možnosti ne omogočajo želenega videza, uporabite CSS po meri za natančno prilagoditev rezultatov iskanja.

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

Najprej omogočite AI Search, preden ga začnete oblikovati, da si boste lahko spremembe ogledali na dejanskih rezultatih.

Kam dodati svoj CSS

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

1. Pomaknite se do razdelka Customize AI Search v skrbniški konzoli aplikacije Shoply.
2. Poiščite besedilno polje CSS styles for search elements
3. Vnesite svojo kodo CSS po meri v besedilno polje
4. Kliknite Save, da uporabite spremembe

Osnove CSS

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

.class-name {
    property: value;
}

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

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

Razumevanje CSS-razredov, specifičnih za Shoply

Shoply ponuja posebne CSS-razrede, s katerimi lahko ciljate različne dele 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 Chrome DevTools  in poiščete posamezen razred. Če morate prepisati privzete sloge, dodajte izjavo !important v svoja pravila CSS, kot je pojasnjeno v dokumentaciji MDN CSS !important .

Razredi kartic izdelkov

Slogi za vsebnik:

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

Slogi za besedilne informacije:

• .shoply-product-brand - Oblikuje blagovno znamko/ime ponudnika izdelka, prikazano nad naslovom izdelka
• .shoply-product-name - Oblikuje naslov/ime izdelka

Slogi za ceno:

• .shoply-product-price - Oblikuje ceno izdelka (po upoštevanem popustu)
• .shoply-product-original-price-before-discount - Oblikuje izvirno 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 gumb dejanja:

• .shoply-product-action-button - Oblikuje glavne gumbe dejanj (Add to Cart, View Product itd.)
• .shoply-product-action-button-sold-out - Oblikuje gumb dejanja, 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 gumb dejanja — izdelek lahko dodajo v košarico, so preusmerjene na stran izdelka ali pa izberete, da gumb dejanja popolnoma skrijete.

Razredi AI Summary

• .shoply-ai-summary-box - Oblikuje vsebniško polje za povzetke, ki jih ustvari AI.
• .shoply-ai-summary-button - Oblikuje gumb, ki sproži ustvarjanje AI povzetka.

Primeri prilagajanja kartic izdelkov v rezultatih iskanja s CSS

Spreminjanje oblikovanja blagovne znamke izdelka

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

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

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

Naj vaše cene izstopajo s prilagojenim oblikovanjem:

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

Vaše gumbe dejanj (Add to Cart, View Product) lahko oblikujete tako, da se ujemajo z dizajnom vaše trgovine:

/* 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 izdelkov z obrobami, sencami ali učinki ob prehodu miške:

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

Za trgovine, ki omogočijo AI Search, se bo AI Summary pojavil na vrhu rezultatov iskanja in takoj pojasnil, 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 tudi prilagodite s CSS, kot je prikazano spodaj.

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

Prilagajanje gumba AI Summary

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

/* 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 se ne prikazujejo

1. Preverite tipkarske napake: Prepričajte se, da so imena vaših CSS-razredov pravilno zapisana (začnejo se z .shoply-)
2. Počistite predpomnilnik brskalnika: Včasih brskalniki shranijo stare sloge v predpomnilnik
3. Preverite sintakso CSS: Prepričajte se, da so vsa pravila CSS pravilno zaključena z }
4. 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 lahko potrebujejo prilagoditve posebej za mobilne naprave. Uporabite medijske poizvedbe:

@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 s CSS:

1. Oglejte si vizualne primere v nastavitvah aplikacije (Product Card Preview in AI Summary Preview)
2. Oglejte si vire z dokumentacijo za CSS, kot je MDN Web Docs 
3. 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 rezultatov iskanja. Preizkušajte, testirajte in ustvarite izkušnjo iskanja, ki se popolnoma ujema z vašo blagovno znamko!