Sut i Addasu Ymddangosiad AI Search

Mae dwy ffordd o addasu canlyniadau chwilio Shoply AI:

• Opsiynau adeiledig: Dechreuwch gyda’r rheolyddion yn eich Shoply AI Admin Console i newid crynodebau, hidlwyr, botymau, lliwiau, a chynllun cynnyrch heb ysgrifennu cod. Archwiliwch yr opsiynau adeiledig a’r rhagolygon.
• CSS personol: Os nad yw’r rheolyddion hynny’n rhoi’r dyluniad rydych ei eisiau i chi, defnyddiwch CSS—yr iaith steilio ar gyfer tudalennau gwe—i fireinio ffontiau, bylchau, borderi, a manylion gweledol eraill. Gallwch ei ddefnyddio ochr yn ochr â’r gosodiadau adeiledig. Ewch i’r canllaw CSS.

Mae’n debyg Nad Oes Angen CSS arnoch o Gwbl

Mae’r rhan fwyaf o newidiadau i gynllun ac ymddangosiad chwilio eisoes ar gael o dan Customize AI Search yn eich Shoply AI Admin Console, p’un a ydych yn defnyddio Shopify neu blatfform gwefan arall. Rhowch gynnig ar yr opsiynau adeiledig hyn yn gyntaf, yna cliciwch Save yn y gweinyddiaeth i gymhwyso eich dewisiadau. Defnyddiwch CSS ar gyfer steilio nad yw’r rheolyddion hyn yn ei gwmpasu.

Mae’r enghreifftiau rhyngweithiol isod yn defnyddio’r un rhagolygon â’r gweinyddiaeth. Darluniau ydynt y gallwch roi cynnig arnynt yma; nid ydynt yn newid eich siop.

• AI Summary: Trowch y crynodeb ymlaen neu i ffwrdd, a dewiswch a yw’n ymddangos uwchben neu islaw canlyniadau’r cynhyrchion.

• Hidlwyr chwilio: Dangoswch neu cuddiwch y bar hidlo, a gosodwch hidlwyr ar y brig, ar y chwith, neu mewn panel arnofiol. Mae’r cynllun ar y chwith yn symud uwchben y canlyniadau ar sgriniau llai. Gweler gosodiadau gwelededd hidlwyr chwilio ar gyfer yr effaith gyffredin ar ganlyniadau sgwrsio.

• Botymau gweithredu cynnyrch a lliwiau: Dewiswch Add to Cart, View Product, neu No Button. Dewiswch liwiau cefndir a thestun y botwm, a newidiwch liw’r sêr graddio i gyd-fynd â’ch siop.

• Cynhyrchion fesul rhes: Dewiswch dair neu bedair colofn ar benbwrdd, ac un neu ddwy golofn ar ffôn symudol. Mae llai o golofnau yn rhoi mwy o le i bob delwedd cynnyrch.

• Cyfanswm y cynhyrchion a ddangosir: Gosodwch gyfrifon cynnyrch ar wahân ar gyfer sgriniau symudol bach, sgriniau symudol mwy, a phenbwrdd. Mae’r gweinyddiaeth yn cynnig 3, 4, 6, 8, 9, 12, 15, 16, 18, neu 20 cynnyrch. Mae hyn yn rheoli nifer y canlyniadau, yn hytrach na nifer y colofnau.

Os oes angen dyluniad personol arnoch o hyd, ewch ymlaen gyda’r canllaw CSS isod.

Dechrau Arni

Os nad yw’r opsiynau adeiledig yn rhoi’r wedd rydych ei heisiau, defnyddiwch CSS personol i fireinio eich canlyniadau chwilio.

Gall Shoply AI Chat a AI Search ill dau ddangos canlyniadau chwilio, felly bydd yr opsiynau addasu CSS a ychwanegwch yn berthnasol i’r ddau. Sylwer: Dim ond yn Shoply AI Search y mae’r nodwedd AI Summary ar gael.

Yn gyntaf, galluogwch AI Search cyn ei steilio fel y gallwch ragolygu newidiadau ar ganlyniadau go iawn.

Ble i Ychwanegu Eich CSS

I guddio’r bar hidlo cyfan, defnyddiwch y rheolydd adeiledig: ewch i Customize AI Search → Search filters, diffoddwch Show filters in search results, a chliciwch Save. Nid oes angen CSS. Gweler Hide Search Filters  am fanylion.

1. Ewch i’r adran Customize AI Search yng nghonsol gweinyddol ap Shoply.
2. Dewch o hyd i’r ardal destun CSS styles for search elements
3. Rhowch eich cod CSS personol yn yr ardal destun
4. Cliciwch Save i gymhwyso eich newidiadau

Hanfodion CSS

Mae CSS yn caniatáu i chi newid lliwiau, ffontiau, bylchau, borderi, a mwy. Y cystrawen sylfaenol yw:

.class-name {
    property: value;
}

Er enghraifft, i newid lliw’r testun i goch tywyll:

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

Deall y Dosbarthiadau CSS sy’n Benodol i Shoply

Mae Shoply yn darparu dosbarthiadau CSS penodol y gallwch eu defnyddio i dargedu gwahanol rannau o’ch canlyniadau chwilio. Mae pob dosbarth yn cyfateb i elfen benodol yn y canlyniad chwilio.

Mae Shoply hefyd wedi diffinio rhai arddulliau diofyn ar gyfer y dosbarthiadau hyn. Gallwch archwilio’r arddulliau hynny gan ddefnyddio Chrome DevTools  a chwilio am bob un o’r dosbarthiadau. Os oes angen i chi ddiystyru’r arddulliau diofyn, ychwanegwch y datganiad !important at eich rheolau CSS fel yr eglurir yn nogfennaeth MDN CSS !important .

Dosbarthiadau Cardiau Cynnyrch

Arddulliau ar gyfer y cynhwysydd:

• .shoply-product-image - Yn steilio delwedd y cynnyrch
• .shoply-product-card - Yn steilio cynhwysydd y cerdyn cynnyrch

Arddulliau ar gyfer y wybodaeth destun:

• .shoply-product-brand - Yn steilio enw brand/gwerthwr y cynnyrch a ddangosir uwchben teitl y cynnyrch
• .shoply-product-name - Yn steilio teitl/enw’r cynnyrch

Arddulliau ar gyfer pris:

• .shoply-product-price - Yn steilio pris y cynnyrch (ar ôl i’r gostyngiad gael ei gymhwyso)
• .shoply-product-original-price-before-discount - Yn steilio’r pris gwreiddiol cyn y gostyngiad (gyda addurn llinell drwodd yn ddiofyn)
• .shoply-product-discount-percent - Yn steilio testun canran y gostyngiad (a ddangosir fel testun coch trwm yn ddiofyn)

Arddulliau ar gyfer y botwm gweithredu:

• .shoply-product-action-button - Yn steilio’r prif fotymau gweithredu (Add to Cart, View Product, ac ati)
• .shoply-product-action-button-sold-out - Yn steilio’r botwm gweithredu pan fo’r cynnyrch wedi gwerthu allan (cyflwr analluog)

Nodyn: Yn adran Customize AI Search yng nghonsol gweinyddol ap Shoply, gallwch ffurfweddu beth sy’n digwydd pan fydd cwsmeriaid yn clicio’r botwm gweithredu—gallant ychwanegu’r cynnyrch at y drol, gael eu hailgyfeirio i dudalen y cynnyrch, neu gallwch ddewis cuddio’r botwm gweithredu’n gyfan gwbl.

Dosbarthiadau AI Summary

• .shoply-ai-summary-box - Yn steilio’r blwch cynhwysydd ar gyfer crynodebau a gynhyrchir gan AI.
• .shoply-ai-summary-button - Yn steilio’r botwm sy’n sbarduno cynhyrchu crynodeb AI.

Enghreifftiau o Addasu Cardiau Cynnyrch mewn Canlyniadau Chwilio gyda CSS

Newid Steilio Brand y Cynnyrch

Mae brand y cynnyrch yn ymddangos uwchben teitl y cynnyrch. Dyma rai addasiadau cyffredin:

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

Addasu Teitl y Cynnyrch

Mae enw’r cynnyrch yn un o’r elfennau pwysicaf. Addaswch ef i gyd-fynd â’ch brand:

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

Enghreifftiau o Steilio Prisiau Cynnyrch

Gwnewch i’ch prisiau sefyll allan gyda steilio personol:

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

Addasu Botymau Gweithredu

Gellir steilio eich botymau gweithredu (Add to Cart, View Product) i gyd-fynd â dyluniad eich siop:

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

Steilio Delweddau Cynnyrch

Gwella eich delweddau cynnyrch gyda borderi, cysgodion, neu effeithiau hofran:

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

Enghreifftiau o Addasu’r Adran AI Summary

Ar gyfer siopau sy’n galluogi AI Search, bydd AI Summary yn ymddangos ar frig canlyniadau chwilio ac yn egluro’n syth beth i’w brynu a pham yn seiliedig ar y canlyniadau chwilio — cyn i gwsmeriaid hyd yn oed sgrolio drwy’r cynhyrchion.

Gallwch analluogi AI Summary ar dudalen Customize AI Search yng nghonsol gweinyddol yr ap. Gallwch hefyd addasu ei ymddangosiad gan ddefnyddio CSS fel y dangosir isod.

Steilio’r Blwch 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);
}

Addasu’r Botwm AI Summary

Yn ddiofyn, cedwir AI Summary yn fyr ac yn gryno i arbed lle ar y sgrin. Gall cwsmeriaid glicio’r “AI Summary Button” i’w ehangu a gweld y manylion llawn. Eisiau iddo gyd-fynd â’ch brand? Gallwch addasu’r botwm hwn hefyd! Edrychwch ar yr enghreifftiau isod.

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

Datrys Problemau

Nid yw fy newidiadau CSS yn ymddangos

1. Gwiriwch am deipiadau: Sicrhewch fod enwau eich dosbarthiadau CSS wedi’u sillafu’n gywir (maent yn dechrau gyda .shoply-)
2. Cliriwch storfa eich porwr: Weithiau mae porwyr yn cadw hen arddulliau yn y storfa
3. Gwiriwch gystrawen CSS: Sicrhewch fod pob un o’ch rheolau CSS wedi’u cau’n gywir gyda }
4. Defnyddiwch !important: Os nad yw arddulliau’n cael eu cymhwyso, efallai y bydd angen i chi ychwanegu !important i ddiystyru arddulliau diofyn:
   css

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

Mae arddulliau’n edrych yn wahanol ar ffôn symudol

Efallai y bydd angen addasiadau penodol i ffôn symudol ar rai arddulliau. Defnyddiwch ymholiadau cyfryngau:

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

Angen ailosod i arddulliau diofyn

Cliriwch yr ardal destun CSS a chadwch. Bydd yr ap yn dychwelyd i’r steilio diofyn.

Angen Mwy o Gymorth?

Os oes angen cymorth ychwanegol arnoch gydag addasu CSS:

1. Gwiriwch yr enghreifftiau gweledol yng ngosodiadau’r ap (Product Card Preview ac AI Summary Preview)
2. Cyfeiriwch at adnoddau dogfennaeth CSS fel MDN Web Docs 
3. Cysylltwch â’n tîm cymorth am help personol yn customer-obsession@shoplyai.ai

Mwynhewch Addasu! 🎨

Gyda’r dosbarthiadau CSS hyn, mae gennych reolaeth lawn dros ymddangosiad eich canlyniadau chwilio. Arbrofwch, profwch, a chrewch brofiad chwilio sy’n cyd-fynd yn berffaith â’ch brand!