Hvernig á að sérsníða leitarniðurstöður með CSS

Viltu láta leitarniðurstöðurnar þínar líta glæsilega út? Þessi handbók sýnir þér hvernig þú stílar leitarniðurstöður fyrir vörur og gervigreindarsamantektir með CSS. Ekki hafa áhyggjur ef þú ert nýbyrjaður í CSS — við hjálpum þér! Ef þú ert þegar kunnugur CSS finnurðu líka fullt af ráðum til að taka sérsníðinguna þína á næsta stig.

Að byrja

Bæði Shoply AI Chat og AI Search geta birt leitarniðurstöður, þannig að CSS-sérsníðingar sem þú bætir við eiga við um hvort tveggja. Athugaðu: AI Summary-eiginleikinn er aðeins í boði í Shoply AI Search.

Hvar á að bæta við CSS

Farðu í hlutann Customize AI Search í stjórnborði Shoply-forritsins.
Finndu textareitinn CSS styles for search elements
Sláðu inn sérsniðna CSS-kóðann þinn í textareitinn
Smelltu á Save til að beita breytingunum

Grunnatriði CSS

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

css


.class-name {
    property: value;
}

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

css


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

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

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

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

Flokkar vöruspjalda

Sérsníðing vöruspjalda í leitarniðurstöðum með CSS

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/seljanda vörunnar sem birtist fyrir ofan vöruheitið
.shoply-product-name - Stílar vöruheitið

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 upphaflega verðið fyrir afslátt (sjálfgefið með gegnumstrikun)
.shoply-product-discount-percent - Stílar textann með afsláttarprósentunni (sjálfgefið feitletraður rauður texti)

Stílar fyrir aðgerðahnappinn:

.shoply-product-action-button - Stílar aðal-aðgerðahnappana (Bæta í körfu, Skoða vöru o.s.frv.)
.shoply-product-action-button-sold-out - Stílar aðgerðahnappinn þegar vara er uppseld (óvirkt ástand)

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

AI Summary-flokkar

.shoply-ai-summary-box - Stílar ílát fyrir samantektir sem gervigreind býr til.
.shoply-ai-summary-button - Stílar hnappinn sem kallar fram gerð AI-samantektar.

Dæmi um sérsníðingu vöruspjalda í leitarniðurstöðum með CSS

Breyta stíl vörumerkisins

Vörumerkið birtist fyrir ofan vöruheitið. Hér eru nokkrar algengar sérsníðingar:

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

Sérsníða vöruheiti

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

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

Dæmi um stíla fyrir vöruverð

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

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

Sérsníða aðgerðahnappa

Aðgerðahnappana þína (Bæta í körfu, Skoða vöru) er hægt að stíla þannig að þeir passi við hönnun verslunarinnar:

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

Stíla vörumyndir

Bættu vörumyndirnar með römmum, skuggum eða svifáhrifum:

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

Dæmi um sérsníðingu AI Summary-hluta

Í verslunum sem virkja AI Search birtist AI Summary efst í leitarniðurstöðunum og útskýrir samstundis hvað á að kaupa og hvers vegna, út frá leitarniðurstöðunum — áður en viðskiptavinirnir skrolla jafnvel í gegnum vörurnar.

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

Stíla AI Summary-reitinn

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

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 samantektina og sjá allar upplýsingarnar. Viltu láta hann passa við vörumerkið þitt? Þú getur líka sérsniðið þennan hnapp! Skoðaðu dæmin hér að neðan.

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

Úrræðaleit

CSS-breytingarnar mínar birtast ekki

Athugaðu innsláttarvillur: Gakktu úr skugga um að CSS-flokkanöfnin séu rétt stafsett (þau byrja á .shoply-)
Hreinsaðu skyndiminni vafrans: Stundum geyma vafrar gamla stíla í skyndiminni
Athugaðu CSS-málfræðina: Gakktu úr skugga um að öllum CSS-reglunum þínum sé lokað rétt með }
Notaðu !important: Ef stílarnir virkjast ekki gætirðu þurft að bæta !important við til að yfirskrifa sjálfgefna stíla:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

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

Sumir stílar gætu þurft sérstakar breytingar fyrir farsíma. Notaðu miðlunarfyrirspurnir:

css


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

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

Hreinsaðu einfaldlega CSS-textareitinn og vistaðu. Forritið fer aftur í sjálfgefna stíla.

Þarftu meiri hjálp?

Ef þú þarft frekari aðstoð við CSS-sérsníðingu:

Skoðaðu sjónræn dæmi í stillingum forritsins (Product Card Preview og AI Summary Preview)
Kynntu þér CSS-gögn á borð við MDN Web Docs
Hafðu samband við þjónustuteymið okkar til að fá persónulega aðstoð á customer-obsession@shoplyai.ai

Góða sérsníðingu! 🎨

Með þessum CSS-flokkum hefurðu fulla stjórn á útliti leitarniðurstaðnanna þinna. Gerðu tilraunir, prófaðu og búðu til leitarupplifun sem passar fullkomlega við vörumerkið þitt!