Conas Chuma AI Search a Shaincheapadh

Tá dhá bhealach ann chun torthaí cuardaigh Shoply AI a chustaiméiriú:

• Roghanna ionsuite: Tosaigh leis na rialuithe i do Shoply AI Admin Console chun achoimrí, scagairí, cnaipí, dathanna agus leagan amach táirgí a athrú gan cód a scríobh. Féach ar na roghanna ionsuite agus na réamhamhairc.
• CSS saincheaptha: Mura dtugann na rialuithe sin an dearadh atá uait duit, úsáid CSS—an teanga stíliúcháin do leathanaigh ghréasáin—chun clónna, spásáil, teorainneacha agus sonraí amhairc eile a mhionchoigeartú. Is féidir leat é a úsáid in éineacht leis na socruithe ionsuite. Téigh chuig an treoir CSS.

Is Dócha Nach dTeastaíonn CSS Uait Ar Chor Ar Bith

Tá an chuid is mó d’athruithe ar leagan amach agus cuma an chuardaigh ar fáil cheana féin faoi Customize AI Search i do Shoply AI Admin Console, cibé acu a úsáideann tú Shopify nó ardán láithreáin ghréasáin eile. Bain triail as na roghanna ionsuite seo ar dtús, ansin cliceáil Save sa riarachán chun do roghanna a chur i bhfeidhm. Úsáid CSS le haghaidh stíliúcháin nach gclúdaíonn na rialuithe seo.

Úsáideann na samplaí idirghníomhacha thíos na réamhamhairc chéanna leis an riarachán. Is léaráidí iad ar féidir leat triail a bhaint astu anseo; ní athraíonn siad do shiopa.

• Achoimre AI: Cas an achoimre air nó as, agus roghnaigh an bhfuil sí le feiceáil os cionn nó faoi bhun thorthaí na dtáirgí.

• Scagairí cuardaigh: Taispeáin nó folaigh an barra scagairí, agus cuir na scagairí ag an mbarr, ar chlé, nó i bpainéal snámhach. Bogann an leagan amach clé os cionn na dtorthaí ar scáileáin níos lú. Féach socruithe infheictheachta na scagairí cuardaigh chun an éifeacht chomhroinnte ar thorthaí comhrá a fheiceáil.

• Cnaipí gnímh táirgí agus dathanna: Roghnaigh Add to Cart, View Product, nó No Button. Roghnaigh dathanna cúlra agus téacs an chnaipe, agus athraigh dath na réaltaí rátála chun é a mheaitseáil le do shiopa.

• Táirgí in aghaidh an ró: Roghnaigh trí nó ceithre cholún ar dheasc, agus colún amháin nó dhá cholún ar mhóibíl. Tugann níos lú colún níos mó spáis do gach íomhá táirge.

• Líon iomlán na dtáirgí a thaispeántar: Socraigh comhaireamh ar leith táirgí do scáileáin bheaga mhóibíle, scáileáin mhóibíle níos mó, agus deasc. Cuireann an riarachán 3, 4, 6, 8, 9, 12, 15, 16, 18, nó 20 táirge ar fáil. Rialaíonn sé seo comhaireamh na dtorthaí, seachas líon na gcolún.

Má tá dearadh saincheaptha de dhíth ort fós, lean ar aghaidh leis an treoir CSS thíos.

Ag Tosú

Mura dtugann na roghanna ionsuite an cuma atá uait duit, úsáid CSS saincheaptha chun do thorthaí cuardaigh a mhionchoigeartú.

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 i Shoply AI Search.

Ar dtús, cumasaigh AI Search sula ndéanann tú stíliú air ionas gur féidir leat réamhamharc a dhéanamh ar athruithe ar fhíorthorthaí.

Cá háit le do CSS a Chur Leis

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

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

Buneolas ar CSS

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

.class-name {
    property: value;
}

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

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

Tuiscint ar na hAicmí CSS Sainiúla do Shoply

Soláthraíonn Shoply aicmí CSS sonracha is féidir leat a úsáid chun díriú ar chodanna éagsúla de do thorthaí cuardaigh. Freagraíonn gach aicme d’eilimint shonrach 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 ceann de na haicmí. 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 cháipéisíocht MDN CSS !important .

Aicmí Cártaí Táirgí

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 praghas bunaidh roimh an lascaine (le maisiú 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 dearg trom 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 (stádas díchumasaithe)

Nóta: Sa rannán Customize AI Search de chonsól riaracháin aip Shoply, is féidir leat a chumrú cad a tharlaíonn nuair a chliceálann custaiméirí an cnaipe gnímh—féadfaidh siad an táirge a chur sa chairt, a atreorú chuig leathanach an táirge, nó is féidir leat a roghnú an cnaipe gnímh a cheilt go hiomlán.

Aicmí AI Summary

• .shoply-ai-summary-box - Stílíonn sé an bosca coimeádáin d’achoimrí ginte ag AI.
• .shoply-ai-summary-button - Stílíonn sé an cnaipe a spreagann giniúint na hachoimre AI.

Samplaí chun Cártaí Táirgí a Chustaiméiriú 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:

/* 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 Chustaiméiriú

Tá ainm an táirge ar cheann de na heilimintí is tábhachtaí. Déan é a chustaiméiriú chun teacht le do bhranda:

/* 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 do phraghsanna chun cinn le stíliú saincheaptha:

/* 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 Chustaiméiriú

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

/* 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 do chuid íomhánna táirgí le teorainneacha, scáthanna, nó héifeachtaí hover:

/* 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án AI Summary a Chustaiméiriú

I gcás siopaí a chumasaíonn AI Search, beidh AI Summary le feiceáil ag barr na dtorthaí cuardaigh agus míneoidh sé láithreach cad ba chóir a cheannach agus cén fáth bunaithe ar na torthaí cuardaigh — sula scrollaíonn custaiméirí trí na tá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 chustaiméiriú freisin trí CSS a úsáid mar a thaispeántar thíos.

Bosca AI Summary a Stíliú

    /* 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 Chustaiméiriú

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 chur in oiriúint do do bhranda? Is féidir leat an cnaipe seo a chustaiméiriú freisin! Féach ar na samplaí thíos.

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

1. Seiceáil le haghaidh botún clóscríofa: Déan cinnte go bhfuil ainmneacha d’aicmí CSS litrithe i gceart (tosaíonn siad le .shoply-)
2. Glan taisce do bhrabhsálaí: Uaireanta déanann brabhsálaithe sean-stíleanna a thaisceadh
3. Seiceáil comhréir CSS: Déan cinnte go bhfuil do rialacha CSS uile dúnta i gceart le }
4. Úsáid !important: Mura bhfuil stíleanna á gcur i bhfeidhm, seans go mbeidh ort !important a chur leis chun stíleanna réamhshocraithe a shárú:
   css

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

Bíonn cuma éagsúil ar stíleanna ar mhóibíl

D’fhéadfadh coigeartuithe sainiúla do mhóibíl a bheith ag teastáil ó roinnt stíleanna. Úsáid media queries:

@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 limistéar téacs CSS a ghlanadh agus sábháil. Fillfidh an aip ar an stíliú réamhshocraithe.

Tuilleadh Cabhrach de Dhíth?

Má tá cúnamh breise uait le saincheapadh CSS:

1. Seiceáil na samplaí amhairc i socruithe na haipe (Product Card Preview agus AI Summary Preview)
2. Déan tagairt d’acmhainní cáipéiseachta CSS mar MDN Web Docs 
3. Déan teagmháil lenár bhfoireann tacaíochta le haghaidh cabhrach phearsantaithe ag customer-obsession@shoplyai.ai

Bain Sult as an gCustaiméiriú! 🎨

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