Kā pielāgot AI Search izskatu

Ir divi veidi, kā pielāgot Shoply AI meklēšanas rezultātus:

• Iebūvētās opcijas: Sāciet ar vadīklām savā Shoply AI Admin Console, lai mainītu kopsavilkumus, filtrus, pogas, krāsas un produktu izkārtojumu, nerakstot kodu. Apskatiet iebūvētās opcijas un priekšskatījumus.
• Pielāgots CSS: Ja šīs vadīklas nenodrošina vēlamo dizainu, izmantojiet CSS — tīmekļa lapu stilizēšanas valodu —, lai precīzi pielāgotu fontus, atstarpes, apmales un citas vizuālās detaļas. To var izmantot kopā ar iebūvētajiem iestatījumiem. Pārejiet uz CSS ceļvedi.

Jums, iespējams, CSS vispār nav nepieciešams

Lielākā daļa meklēšanas izkārtojuma un izskata izmaiņu jau ir pieejamas sadaļā Customize AI Search jūsu Shoply AI Admin Console, neatkarīgi no tā, vai izmantojat Shopify vai citu vietnes platformu. Vispirms izmēģiniet šīs iebūvētās opcijas, pēc tam administratora panelī noklikšķiniet uz Save, lai piemērotu savas izvēles. Izmantojiet CSS stilizēšanai, ko šīs vadīklas neaptver.

Tālāk redzamajos interaktīvajos piemēros izmantoti tie paši priekšskatījumi, kas administratora panelī. Tie ir ilustratīvi piemēri, kurus varat izmēģināt šeit; tie nemaina jūsu veikalu.

• AI Summary: Ieslēdziet vai izslēdziet kopsavilkumu un izvēlieties, vai tas tiek parādīts virs vai zem produktu rezultātiem.

• Meklēšanas filtri: Parādiet vai paslēpiet filtru joslu un novietojiet filtrus augšpusē, kreisajā pusē vai peldošā panelī. Kreisās puses izkārtojums mazākos ekrānos pārvietojas virs rezultātiem. Skatiet meklēšanas filtru redzamības iestatījumus, lai uzzinātu par kopīgo ietekmi uz tērzēšanas rezultātiem.

• Produktu darbību pogas un krāsas: Izvēlieties Add to Cart, View Product vai No Button. Izvēlieties pogas fona un teksta krāsas, kā arī mainiet vērtējuma zvaigžņu krāsu, lai tā atbilstu jūsu veikalam.

• Produkti vienā rindā: Izvēlieties trīs vai četras kolonnas datorā un vienu vai divas kolonnas mobilajā ierīcē. Mazāks kolonnu skaits piešķir katram produkta attēlam vairāk vietas.

• Kopējais parādīto produktu skaits: Iestatiet atsevišķu produktu skaitu maziem mobilajiem ekrāniem, lielākiem mobilajiem ekrāniem un datoriem. Administratora panelī pieejami 3, 4, 6, 8, 9, 12, 15, 16, 18 vai 20 produkti. Tas kontrolē rezultātu skaitu, nevis kolonnu skaitu.

Ja jums joprojām nepieciešams pielāgots dizains, turpiniet ar tālāk redzamo CSS ceļvedi.

Darba sākšana

Ja iebūvētās opcijas nenodrošina vēlamo izskatu, izmantojiet pielāgotu CSS, lai precīzi pielāgotu meklēšanas rezultātus.

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

Vispirms iespējojiet AI Search pirms tā stilizēšanas, lai varētu priekšskatīt izmaiņas ar reāliem rezultātiem.

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. Sīkāku informāciju skatiet sadaļā Hide Search Filters .

1. Dodieties uz sadaļu Customize AI Search Shoply lietotnes administratora konsolē.
2. Atrodiet teksta lauku CSS styles for search elements
3. Ievadiet savu pielāgoto CSS kodu teksta laukā
4. 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:

.class-name {
    property: value;
}

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

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

Izpratne par Shoply specifiskajām CSS klasēm

Shoply nodrošina specifiskas 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 pārrakstīt noklusējuma stilus, pievienojiet saviem CSS noteikumiem deklarāciju !important, kā skaidrots MDN CSS !important dokumentācijā .

Produkta kartītes klases

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īmolu/pārdevēja nosaukumu, kas tiek rādīts virs produkta nosaukuma
• .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ību pogas (Add to Cart, View Product utt.)
• .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 pilnībā paslēpt darbības pogu.

AI Summary klases

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

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

Produkta zīmola stila maiņa

Produkta zīmols tiek parādīts virs produkta nosaukuma. Šeit ir daži bieži izmantoti pielāgojumi:

/* 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 nosaukuma pielāgošana

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

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

Cenu stilizēšanas piemēri

Padariet savas cenas pamanāmākas ar pielāgotu stilizēšanu:

/* 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ību pogu pielāgošana

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

/* 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 produktu attēlus ar apmalēm, ēnām vai hover efektiem:

/* 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 Summary sadaļas pielāgošanai

Veikaliem, kuros ir iespējots AI Search, AI Summary tiks parādīts meklēšanas rezultātu augšdaļā un uzreiz paskaidros, 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. Tā izskatu varat arī pielāgot, izmantojot CSS, kā parādīts tālāk.

AI Summary lodziņa stilizēšana

    /* 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 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 redzētu pilnu informāciju. Vēlaties to pielāgot savam zīmolam? Arī šo pogu varat pielāgot! Apskatiet tālāk redzamos piemērus.

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

1. Pārbaudiet drukas kļūdas: Pārliecinieties, ka jūsu CSS klašu nosaukumi ir uzrakstīti pareizi (tie sākas ar .shoply-)
2. Notīriet pārlūkprogrammas kešatmiņu: Dažkārt pārlūkprogrammas saglabā vecos stilus kešatmiņā
3. Pārbaudiet CSS sintaksi: Pārliecinieties, ka visi jūsu CSS noteikumi ir pareizi aizvērti ar }
4. Izmantojiet !important: Ja stili netiek piemēroti, iespējams, jāpievieno !important, lai pārrakstītu noklusējuma stilus:
   css

   .shoply-product-action-button {
       background-color: #ff0000 !important;
   }

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

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

@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 stilizācijas.

Nepieciešama papildu palīdzība?

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

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

Lai veicas ar pielāgošanu! 🎨

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