Conas Do Thorthaí Cuardaigh a Chur in Oiriúint le CSS

How to Customize Your Search Results with CSS

An bhfuil tú réidh chun cuma iontach a chur ar do thorthaí cuardaigh? Taispeánfaidh an treoir seo duit conas do thorthaí cuardaigh táirgí agus rannóga achoimre AI a stíliú le CSS. Ná bí buartha má tá tú nua do CSS — táimid anseo chun cabhrú! Agus má tá tú compordach leis cheana féin, gheobhaidh tú neart leideanna chun do shaincheapadh a thabhairt go dtí an chéad leibhéal eile.

Ag Tosú

Is féidir le Shoply AI Chat agus AI Search araon torthaí cuardaigh a thaispeáint, mar sin bainfidh na roghanna saincheaptha CSS a chuireann tú leis leis an dá cheann. Nóta: Níl an ghné AI Summary ar fáil ach in Shoply AI Search.

Cá háit le Do CSS a Chur Leis

Chun an barra scagairí iomlán a cheilt, úsáid an rialú ionsuite: téigh go Customize AI Search → Search filters, múch Show filters in search results, agus cliceáil Save. Níl CSS de dhíth. Féach Hide Search Filters le haghaidh sonraí.

Téigh chuig an rannóg Customize AI Search i gconsól riaracháin aip Shoply.
Aimsigh an réimse téacs CSS styles for search elements
Cuir isteach do chód saincheaptha CSS sa réimse téacs
Cliceáil Save chun do chuid athruithe a chur i bhfeidhm

Buneolas CSS

Ligeann CSS duit dathanna, clónna, spásáil, himill, agus eile a athrú. Is é seo an chomhréir bhunúsach:

css


.class-name {
    property: value;
}

Mar shampla, chun dath an téacs a athrú go dearg dorcha:

css


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

Tuiscint ar na hAicmí CSS atá Sonrach do Shoply

Soláthraíonn Shoply aicmí CSS ar leith is féidir leat a úsáid chun díriú ar chodanna éagsúla de do thorthaí cuardaigh. Freagraíonn gach aicme d’eilimint ar leith sa toradh cuardaigh.

Tá stíleanna réamhshocraithe áirithe sainithe ag Shoply do na haicmí seo freisin. Is féidir leat na stíleanna sin a iniúchadh le Chrome DevTools agus cuardach a dhéanamh ar gach aicme. Más gá duit na stíleanna réamhshocraithe a shárú, cuir an dearbhú !important le do rialacha CSS mar a mhínítear sa doiciméadacht MDN CSS !important .

Aicmí Cárta Táirge

Customizing Product Cards in Search Results with CSS

Stíleanna don choimeádán:

.shoply-product-image - Stílíonn sé íomhá an táirge
.shoply-product-card - Stílíonn sé coimeádán chárta an táirge

Stíleanna don fhaisnéis téacs:

.shoply-product-brand - Stílíonn sé ainm bhranda/díoltóra an táirge a thaispeántar os cionn theideal an táirge
.shoply-product-name - Stílíonn sé teideal/ainm an táirge

Stíleanna don phraghas:

.shoply-product-price - Stílíonn sé praghas an táirge (tar éis an lascaine a chur i bhfeidhm)
.shoply-product-original-price-before-discount - Stílíonn sé an bunphraghas roimh lascaine (le líne tríd de réir réamhshocraithe)
.shoply-product-discount-percent - Stílíonn sé téacs chéatadán na lascaine (taispeántar mar théacs trom dearg de réir réamhshocraithe é)

Stíleanna don chnaipe gnímh:

.shoply-product-action-button - Stílíonn sé na príomhchnaipí gnímh (Add to Cart, View Product, etc.)
.shoply-product-action-button-sold-out - Stílíonn sé an cnaipe gnímh nuair atá an táirge díolta amach (staid dhíchumasaithe)

Nóta: Sa rannóg Customize AI Search i gconsól riaracháin aip Shoply, is féidir leat a chumrú cad a tharlaíonn nuair a chliceálann custaiméirí ar an gcnaipe gnímh — is féidir leo an táirge a chur leis an gcairt, iad a atreorú chuig leathanach an táirge, nó is féidir leat roghnú an cnaipe gnímh a cheilt go hiomlán.

Aicmí AI Summary

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Stílíonn sé an bosca coimeádáin d’achoimrí a ghineann AI.
.shoply-ai-summary-button - Stílíonn sé an cnaipe a chuireann tús le giniúint achoimre AI.

Samplaí chun Cártaí Táirgí a Chur in Oiriúint i dTorthaí Cuardaigh le CSS

Stíliú Bhranda an Táirge a Athrú

Tá branda an táirge le feiceáil os cionn theideal an táirge. Seo roinnt saincheaptha coitianta:

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

Teideal an Táirge a Chur in Oiriúint

Tá ainm an táirge ar cheann de na heilimintí is tábhachtaí. Cuir in oiriúint é chun teacht le do bhranda:

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

Samplaí chun Praghsanna Táirgí a Stíliú

Cuir ar do phraghsanna seasamh amach le stíliú saincheaptha:

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

Cnaipí Gnímh a Chur in Oiriúint

Is féidir do chnaipí gnímh (Add to Cart, View Product) a stíliú chun teacht le dearadh do shiopa:

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

Íomhánna Táirgí a Stíliú

Feabhsaigh d’íomhánna táirgí le himill, scáthanna, nó éifeachtaí hover:

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

Samplaí chun an Rannóg AI Summary a Chur in Oiriúint

I gcás siopaí a chumasaíonn AI Search, beidh AI Summary le feiceáil ag barr na dtorthaí cuardaigh agus míníonn sé láithreach cad is ceart a cheannach agus cén fáth bunaithe ar na torthaí cuardaigh — sula scrollaíonn custaiméirí trí tháirgí fiú.

Is féidir leat AI Summary a dhíchumasú ar an leathanach Customize AI Search i gconsól riaracháin na haipe. Is féidir leat a chuma a chur in oiriúint freisin ag úsáid CSS mar a thaispeántar thíos.

Bosca AI Summary a Stíliú

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

An Cnaipe AI Summary a Chur in Oiriúint

De réir réamhshocraithe, coinnítear AI Summary gearr agus gonta chun spás scáileáin a shábháil. Is féidir le custaiméirí cliceáil ar an “AI Summary Button” chun é a leathnú agus na sonraí iomlána a fheiceáil. Ar mhaith leat é a mheaitseáil le do bhranda? Is féidir leat an cnaipe seo a chur in oiriúint freisin! Féach ar na samplaí thíos.

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

Fabhtcheartú

Níl mo chuid athruithe CSS le feiceáil

Seiceáil earráidí clóscríofa: Cinntigh go bhfuil ainmneacha d’aicmí CSS litrithe i gceart (tosaíonn siad le .shoply-)
Glan taisce do bhrabhsálaí: Uaireanta coinníonn brabhsálaithe sean-stíleanna i dtaisce
Seiceáil comhréir CSS: Cinntigh go bhfuil do rialacha CSS go léir dúnta i gceart le }
Úsáid !important: Mura bhfuil stíleanna á gcur i bhfeidhm, seans go mbeidh ort !important a chur leis chun na stíleanna réamhshocraithe a shárú:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Tá cuma éagsúil ar stíleanna ar mhóibíl

D’fhéadfadh sé go mbeadh coigeartuithe sonracha do mhóibíl de dhíth ar roinnt stíleanna. Úsáid media queries:

css


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

An gá stíleanna réamhshocraithe a athshocrú

Níl le déanamh ach an réimse téacs CSS a ghlanadh agus sábháil. Fillfidh an aip ar an stíliú réamhshocraithe.

Tuilleadh Cabhrach de Dhíth Ort?

Má theastaíonn cúnamh breise uait le saincheapadh CSS:

Seiceáil na samplaí amhairc i socruithe na haipe (Product Card Preview agus AI Summary Preview)
Déan tagairt do acmhainní doiciméadachta CSS cosúil le MDN Web Docs
Déan teagmháil lenár bhfoireann tacaíochta le haghaidh cabhrach phearsantaithe ag customer-obsession@shoplyai.ai

Saincheapadh Sona! 🎨

Leis na haicmí CSS seo, tá smacht iomlán agat ar chuma do thorthaí cuardaigh. Déan triail, tástáil, agus cruthaigh eispéireas cuardaigh a mheaitseálann do bhranda go foirfe!