Sut i Addasu Eich Canlyniadau Chwilio gyda CSS

Yn barod i wneud i’ch canlyniadau chwilio edrych yn wych? Bydd y canllaw hwn yn dangos i chi sut i steilio eich canlyniadau chwilio cynnyrch a’ch adrannau crynodeb AI gyda CSS. Peidiwch â phoeni os ydych yn newydd i CSS—rydyn ni wedi eich cefnogi! Ac os ydych eisoes yn gyfforddus ag ef, fe welwch ddigon o awgrymiadau i fynd â’ch addasiadau i’r lefel nesaf.

Dechrau Arni

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

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’ch newidiadau

Hanfodion CSS

Mae CSS yn caniatáu i chi newid lliwiau, ffontiau, bylchiad, borderi, a mwy. Y gystrawen 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 cerdyn y 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)

Sylwer: 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 i’r cart, cael 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 Arddull 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 gydag arddullio 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 y canlyniadau chwilio ac yn egluro ar unwaith 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 olwg 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 ehangu a gweld y manylion llawn. Eisiau gwneud 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 deipos: 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 storio hen arddulliau
3. Gwiriwch gystrawen CSS: Sicrhewch fod pob rheol CSS wedi’i chau’n iawn gyda }
4. Defnyddiwch !important: Os nad yw arddulliau’n cael eu cymhwyso, efallai y bydd angen i chi ychwanegu !important i ddiystyru’r 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 ddyfeisiau symudol ar rai arddulliau. Defnyddiwch ymholiadau cyfrwng:

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

Angen ailosod i’r arddulliau diofyn

Cliriwch yr ardal destun CSS a chadwch. Bydd yr ap yn dychwelyd i’r arddullio 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!