Hvernig á að sérsníða útlit AI Search

Það eru tvær leiðir til að sérsníða leitarniðurstöður Shoply AI:

• Innbyggðir valkostir: Byrjaðu á stjórntækjunum í Shoply AI-stjórnborðinu til að breyta samantektum, síum, hnöppum, litum og vöruframsetningu án þess að skrifa kóða. Skoðaðu innbyggðu valkostina og forskoðanirnar.
• Sérsniðið CSS: Ef þessar stýringar gefa þér ekki þá hönnun sem þú vilt geturðu notað CSS — stílsniðsmál vefsíðna — til að fínstilla letur, bil, ramma og önnur sjónræn atriði. Þú getur notað það samhliða innbyggðu stillingunum. Farðu í CSS-leiðbeiningarnar.

Þú þarft líklega alls ekki CSS

Flestar breytingar á uppsetningu og útliti leitar eru nú þegar tiltækar undir Customize AI Search í Shoply AI-stjórnborðinu þínu, hvort sem þú notar Shopify eða annan vefvettvang. Prófaðu fyrst þessa innbyggðu valkosti og smelltu síðan á Save í stjórnborðinu til að beita valinu þínu. Notaðu CSS fyrir stíl sem þessar stýringar ná ekki yfir.

Gagnvirku dæmin hér að neðan nota sömu forskoðanir og stjórnborðið. Þau eru myndskreytingar sem þú getur prófað hér; þau breyta ekki versluninni þinni.

• AI Summary: Kveiktu eða slökktu á samantektinni og veldu hvort hún birtist fyrir ofan eða neðan vöruniðurstöðurnar.

• Leitarsíur: Sýndu eða feldu síustikuna og settu síur efst, vinstra megin eða í fljótandi spjaldi. Vinstri uppsetningin færist fyrir ofan niðurstöðurnar á minni skjám. Sjá stillingar fyrir sýnileika leitarsía um sömu áhrif á spjallniðurstöður.

• Aðgerðahnappar vara og litir: Veldu Add to Cart, View Product eða No Button. Veldu bakgrunns- og textalit hnappsins og breyttu lit einkunnastjarna þannig að hann passi við verslunina.

• Vörur í hverri röð: Veldu þrjá eða fjóra dálka á tölvu og einn eða tvo í farsíma. Færri dálkar gefa hverri vörumynd meira rými.

• Heildarfjöldi birtra vara: Stilltu aðskilinn vörufjölda fyrir litla farsímaskjái, stærri farsímaskjái og tölvur. Stjórnborðið býður 3, 4, 6, 8, 9, 12, 15, 16, 18 eða 20 vörur. Þetta stjórnar fjölda niðurstaðna en ekki fjölda dálka.

Ef þú þarft samt sérsniðna hönnun skaltu halda áfram með CSS-leiðbeiningarnar hér að neðan.

Tilbúin(n) að láta leitarniðurstöðurnar þínar líta frábærlega út? Þessi leiðarvísir sýnir þér hvernig á að stíla vöruleitarniðurstöður þínar og AI Summary-hluta með CSS. Engar áhyggjur ef þú ert ný/byrjuð að nota CSS — við hjálpum þér í gegnum það! Og ef þú ert nú þegar örugg(ur) með það, finnurðu fullt af ráðum til að færa sérsniðin á næsta stig.

Að byrja

Bæði Shoply AI Chat og AI Search geta birt leitarniðurstöður, þannig að CSS-sérsniðin sem þú bætir við munu gilda fyrir bæði. Athugið: AI Summary-eiginleikinn er aðeins í boði í Shoply AI Search.

Byrjaðu á að virkja AI Search áður en þú breytir útlitinu, svo þú getir forskoðað breytingarnar með raunverulegum niðurstöðum.

Hvar á að bæta við CSS-inu þínu

Til að fela alla síustikuna skaltu nota innbyggðu stillinguna: farðu í Customize AI Search → Search filters, slökktu á Show filters in search results og smelltu á Save. Engin CSS er nauðsynleg. Sjá Hide Search Filters  fyrir nánari upplýsingar.

1. Farðu í hlutann Customize AI Search í stjórnborði Shoply appsins.
2. Finndu textasvæðið CSS styles for search elements
3. Settu inn sérsniðna CSS-kóðann þinn í textasvæðið
4. Smelltu á Save til að virkja breytingarnar þínar

Grunnatriði CSS

CSS gerir þér kleift að breyta litum, leturgerðum, bili, römmum og fleiru. Grunnsetningafræðin er:

.class-name {
    property: value;
}

Til dæmis, til að breyta textalitnum í dökkrauðan:

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

Að skilja Shoply-sértæku CSS klasana

Shoply býður upp á sérstaka CSS-klasa sem þú getur notað til að miða á mismunandi hluta leitarniðurstaðna þinna. Hver klasi samsvarar ákveðnum þætti í leitarniðurstöðunni.

Shoply hefur einnig skilgreint ákveðna sjálfgefna stíla fyrir þessa klasa. Þú getur skoðað þá stíla með Chrome DevTools  og leitað að hverjum klasa. Ef þú þarft að yfirskrifa sjálfgefnu stílana skaltu bæta !important skilgreiningunni við CSS-reglurnar þínar eins og útskýrt er í MDN CSS !important documentation .

Klasar fyrir vöruspjöld

Stílar fyrir ílátið:

• .shoply-product-image - Stílar vörumyndina
• .shoply-product-card - Stílar ílát vöruspjaldsins

Stílar fyrir textaupplýsingar:

• .shoply-product-brand - Stílar vörumerki/seljandaheiti vörunnar sem birtist fyrir ofan vörutitilinn
• .shoply-product-name - Stílar vörutitil/heiti

Stílar fyrir verð:

• .shoply-product-price - Stílar vöruverðið (eftir að afsláttur hefur verið dreginn frá)
• .shoply-product-original-price-before-discount - Stílar upphaflegt verð fyrir afslátt (með yfirstrikunarstíl sjálfgefið)
• .shoply-product-discount-percent - Stílar texta afsláttarprósentunnar (birtist sjálfgefið sem feitletraður rauður texti)

Stílar fyrir aðgerðarhnappinn:

• .shoply-product-action-button - Stílar helstu aðgerðarhnappana (Add to Cart, View Product o.s.frv.)
• .shoply-product-action-button-sold-out - Stílar aðgerðarhnappinn þegar varan er uppseld (óvirkt ástand)

Athugið: Í hlutanum Customize AI Search í stjórnborði Shoply appsins geturðu stillt hvað gerist þegar viðskiptavinir smella á aðgerðarhnappinn — þeir geta bætt vörunni í körfu, verið vísað á vörusíðuna, eða þú getur valið að fela aðgerðarhnappinn alveg.

AI Summary klasar

• .shoply-ai-summary-box - Stílar ílátskassann fyrir AI-myndaðar samantektir.
• .shoply-ai-summary-button - Stílar hnappinn sem kveikir á myndun AI Summary.

Dæmi um að sérsníða vöruspjöld í leitarniðurstöðum með CSS

Breyta stíl vörumerkis

Vörumerkið birtist fyrir ofan vörutitilinn. Hér eru nokkrar algengar sérsniðnar breytingar:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Sérsníða vörutitil

Vöruheitið er einn mikilvægasti þátturinn. Sérsníddu það þannig að það passi við vörumerkið þitt:

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

Dæmi um stílun vöruverða

Láttu verðin þín skera sig úr með sérsniðinni stílun:

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

Sérsníða aðgerðarhnappa

Aðgerðarhnapparnir þínir (Add to Cart, View Product) er hægt að stíla þannig að þeir passi við hönnun verslunarinnar þinnar:

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

Stílun vörumynda

Gerðu vörumyndirnar þínar meira áberandi með römmum, skuggum eða hover-áhrifum:

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

Dæmi um að sérsníða AI Summary-hlutann

Fyrir verslanir sem virkja AI Search birtist AI Summary efst í leitarniðurstöðum og útskýrir samstundis hvað á að kaupa og hvers vegna út frá leitarniðurstöðunum — áður en viðskiptavinir byrja jafnvel að fletta í gegnum vörurnar.

Þú getur gert AI Summary óvirkt á síðunni Customize AI Search í stjórnborði appsins. Þú getur líka sérsniðið útlit þess með CSS eins og sýnt er hér að neðan.

Stílun AI Summary kassans

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

Sérsníða AI Summary hnappinn

Sjálfgefið er AI Summary stutt og hnitmiðað til að spara skjápláss. Viðskiptavinir geta smellt á “AI Summary Button” til að stækka og sjá allar upplýsingar. Viltu láta hann passa við vörumerkið þitt? Þú getur sérsniðið þennan hnapp líka! Skoðaðu dæmin hér að neðan.

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

Úrræðaleit

CSS-breytingarnar mínar birtast ekki

1. Athugaðu innsláttarvillur: Gakktu úr skugga um að CSS-klasanöfnin þín séu rétt skrifuð (þau byrja á .shoply-)
2. Hreinsaðu skyndiminni vafrans: Stundum geyma vafrar eldri stíla í skyndiminni
3. Athugaðu CSS-setningafræði: Gakktu úr skugga um að öllum CSS-reglum sé lokað rétt með }
4. Notaðu !important: Ef stílar eru ekki að virkjast gætirðu þurft að bæta við !important til að yfirskrifa sjálfgefna stíla:
   css

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

Stílar líta öðruvísi út í farsíma

Sumir stílar kunna að þurfa farsímasértækar lagfæringar. Notaðu media queries:

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

Þarftu að endurstilla á sjálfgefna stíla

Einfaldlega hreinsaðu CSS-textasvæðið og vistaðu. Appið mun fara aftur í sjálfgefna stílun.

Þarftu meiri hjálp?

Ef þú þarft frekari aðstoð við CSS-sérsnið:

1. Skoðaðu sjónrænu dæmin í stillingum appsins (Product Card Preview og AI Summary Preview)
2. Skoðaðu CSS-heimildir eins og MDN Web Docs 
3. Hafðu samband við þjónustuteymið okkar til að fá persónulega aðstoð á customer-obsession@shoplyai.ai

Gleðilega sérsniðun! 🎨

Með þessum CSS-klösum hefurðu fulla stjórn á útliti leitarniðurstaðna þinna. Prófaðu þig áfram, prófaðu mismunandi útfærslur og búðu til leitarupplifun sem passar fullkomlega við vörumerkið þitt!