Kaip pritaikyti AI Search išvaizdą

Yra du būdai tinkinti jūsų Shoply AI paieškos rezultatus:

• Integruotos parinktys: Pradėkite nuo valdiklių savo Shoply AI Admin Console aplinkoje, kad pakeistumėte suvestines, filtrus, mygtukus, spalvas ir produktų išdėstymą nerašydami kodo. Peržiūrėkite integruotas parinktis ir peržiūras.
• Pasirinktinis CSS: Jei šie valdikliai nesuteikia norimo dizaino, naudokite CSS – tinklalapių stiliaus kalbą – kad tiksliai sureguliuotumėte šriftus, tarpus, rėmelius ir kitas vizualines detales. Galite jį naudoti kartu su integruotais nustatymais. Pereikite prie CSS vadovo.

Jums Tikriausiai Visai Nereikia CSS

Dauguma paieškos išdėstymo ir išvaizdos pakeitimų jau yra pasiekiami skiltyje Customize AI Search jūsų Shoply AI Admin Console aplinkoje, nesvarbu, ar naudojate Shopify, ar kitą svetainės platformą. Pirmiausia išbandykite šias integruotas parinktis, tada administravimo aplinkoje spustelėkite Save, kad pritaikytumėte savo pasirinkimus. CSS naudokite tam stiliui, kurio šie valdikliai neapima.

Toliau pateikti interaktyvūs pavyzdžiai naudoja tas pačias peržiūras kaip ir administravimo aplinka. Tai yra iliustracijos, kurias galite išbandyti čia; jos nekeičia jūsų parduotuvės.

• AI Summary: Įjunkite arba išjunkite suvestinę ir pasirinkite, ar ji bus rodoma virš produktų rezultatų, ar po jais.

• Paieškos filtrai: Rodykite arba slėpkite filtrų juostą ir nustatykite filtrus viršuje, kairėje arba slankiajame skydelyje. Kairysis išdėstymas mažesniuose ekranuose perkeliamas virš rezultatų. Dėl bendro poveikio pokalbio rezultatams žr. paieškos filtrų matomumo nustatymus.

• Produktų veiksmų mygtukai ir spalvos: Pasirinkite Add to Cart, View Product arba No Button. Pasirinkite mygtuko fono ir teksto spalvas bei pakeiskite įvertinimo žvaigždučių spalvą, kad ji derėtų prie jūsų parduotuvės.

• Produktų skaičius eilutėje: Pasirinkite tris arba keturis stulpelius darbalaukyje ir vieną arba du stulpelius mobiliuosiuose įrenginiuose. Mažesnis stulpelių skaičius suteikia daugiau vietos kiekvieno produkto vaizdui.

• Bendras rodomų produktų skaičius: Nustatykite atskirą produktų skaičių mažiems mobiliųjų ekranams, didesniems mobiliųjų įrenginių ekranams ir darbalaukiui. Administravimo aplinka siūlo 3, 4, 6, 8, 9, 12, 15, 16, 18 arba 20 produktų. Tai valdo rezultatų skaičių, o ne stulpelių skaičių.

Jei vis dar reikia pasirinktinio dizaino, tęskite toliau pateiktą CSS vadovą.

Darbo Pradžia

Jei integruotos parinktys nesuteikia norimos išvaizdos, naudokite pasirinktinį CSS, kad tiksliai sureguliuotumėte paieškos rezultatus.

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

Pirmiausia įjunkite AI Search prieš jį stilizuodami, kad galėtumėte peržiūrėti pakeitimus su tikrais rezultatais.

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šsamiau žr. Hide Search Filters .

1. Eikite į skiltį Customize AI Search Shoply programėlės administravimo aplinkoje.
2. Raskite teksto sritį CSS styles for search elements
3. Įveskite savo pasirinktinį CSS kodą į teksto sritį
4. Spustelėkite Save, kad pritaikytumėte pakeitimus

CSS Pagrindai

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

.class-name {
    property: value;
}

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

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

Shoply Skirtų CSS Klasų Supratimas

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

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

Produktų Kortelių Klasės

Konteinerio stiliai:

• .shoply-product-image - Stilizuoja produkto vaizdą
• .shoply-product-card - Stilizuoja produkto kortelės konteinerį

Tekstinės informacijos stiliai:

• .shoply-product-brand - Stilizuoja produkto prekės ženklo / tiekėjo pavadinimą, rodomą virš produkto antraštės
• .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 veiksmų 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 administravimo aplinkos skiltyje Customize AI Search galite nustatyti, kas vyksta, 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 Summary Klasės

• .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ų Tinkinimo Paieškos Rezultatuose Su CSS Pavyzdžiai

Produkto Prekės Ženklo Stiliaus Keitimas

Produkto prekės ženklas rodomas virš produkto antraštės. Štai keli dažni tinkinimo variantai:

/* 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 Antraštės Tinkinimas

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

/* 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ų Stiliaus Pavyzdžiai

Padarykite kainas labiau išsiskiriančias naudodami pasirinktinį stilių:

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

Veiksmų Mygtukų Tinkinimas

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

/* 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ų Vaizdų Stilizavimas

Patobulinkite savo produktų vaizdus naudodami rėmelius, šešėlius arba užvedimo efektus:

/* 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 Summary Skilties Tinkinimo Pavyzdžiai

Parduotuvėse, kuriose įjungtas 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 administravimo aplinkos puslapyje Customize AI Search. Taip pat galite tinkinti jos išvaizdą naudodami CSS, kaip parodyta toliau.

AI Summary Lauko Stilizavimas

    /* 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 Summary Mygtuko Tinkinimas

Pagal numatytuosius nustatymus AI Summary yra trumpa ir aiški, kad taupytų vietą 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 tinkinti ir šį mygtuką! Peržiūrėkite toliau pateiktus pavyzdžius.

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

1. Patikrinkite, ar nėra rašybos klaidų: Įsitikinkite, kad jūsų CSS klasių pavadinimai parašyti teisingai (jie prasideda .shoply-)
2. Išvalykite naršyklės podėlį: Kartais naršyklės išsaugo senus stilius
3. Patikrinkite CSS sintaksę: Įsitikinkite, kad visos jūsų CSS taisyklės yra tinkamai uždarytos su }
4. 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ų korekcijų. Naudokite media queries:

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

Reikia atkurti numatytuosius stilius

Tiesiog išvalykite CSS teksto sritį ir išsaugokite. Programėlė grįš prie numatytojo stiliaus.

Reikia Daugiau Pagalbos?

Jei reikia papildomos pagalbos dėl CSS tinkinimo:

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

Sėkmingo tinkinimo! 🎨

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ą!