Kuinka mukauttaa hakutuloksiasi CSS:n avulla

How to Customize Your Search Results with CSS

Oletko valmis tekemään hakutuloksistasi upean näköisiä? Tämä opas näyttää, miten voit tyylitellä tuotteiden hakutulokset ja AI Summary -osiot CSS:n avulla. Ei huolta, vaikka CSS olisi sinulle uutta — me autamme sinua! Ja jos CSS on jo tuttu, löydät täältä runsaasti vinkkejä, joilla viet mukauttamisesi seuraavalle tasolle.

Aloittaminen

Sekä Shoply AI Chat että AI Search voivat näyttää hakutuloksia, joten lisäämäsi CSS-mukautusasetukset koskevat molempia. Huomaa: AI Summary -ominaisuus on saatavilla vain Shoply AI Searchissa.

Mihin lisätä CSS

Jos haluat piilottaa koko suodatinpalkin, käytä sisäänrakennettua asetusta: siirry kohtaan Customize AI Search → Search filters, kytke pois päältä Show filters in search results ja napsauta Save. CSS:ää ei tarvita. Katso lisätietoja kohdasta Hide Search Filters .

Siirry Shoply-sovelluksen hallintapaneelissa kohtaan Customize AI Search.
Etsi tekstialue CSS styles for search elements
Syötä oma CSS-koodisi tekstialueelle
Ota muutokset käyttöön napsauttamalla Save

CSS:n perusteet

CSS:n avulla voit muuttaa värejä, fontteja, välistyksiä, reunuksia ja paljon muuta. Perussyntaksi on:

css


.class-name {
    property: value;
}

Esimerkiksi tekstin värin muuttaminen tummanpunaiseksi:

css


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

Shoply-kohtaisten CSS-luokkien ymmärtäminen

Shoply tarjoaa tietyt CSS-luokat, joiden avulla voit kohdistaa tyylejä hakutulostesi eri osiin. Jokainen luokka vastaa tiettyä elementtiä hakutuloksessa.

Shoply on myös määrittänyt näille luokille tietyt oletustyylit. Voit tarkastella näitä tyylejä käyttämällä Chrome DevToolsia ja hakemalla kutakin luokkaa. Jos sinun täytyy ohittaa oletustyylit, lisää CSS-sääntöihisi !important-määre, kuten on selitetty MDN:n CSS !important -dokumentaatiossa .

Tuotekorttien luokat

Customizing Product Cards in Search Results with CSS

Säiliön tyylit:

.shoply-product-image - Tyylittelee tuotekuvan
.shoply-product-card - Tyylittelee tuotekortin säiliön

Tekstitietojen tyylit:

.shoply-product-brand - Tyylittelee tuotemerkin/toimittajan nimen, joka näytetään tuotteen otsikon yläpuolella
.shoply-product-name - Tyylittelee tuotteen otsikon/nimen

Hintojen tyylit:

.shoply-product-price - Tyylittelee tuotteen hinnan (alennuksen jälkeen)
.shoply-product-original-price-before-discount - Tyylittelee alkuperäisen hinnan ennen alennusta (oletuksena yliviivattuna)
.shoply-product-discount-percent - Tyylittelee alennusprosenttitekstin (näytetään oletuksena lihavoituna punaisena tekstinä)

Toimintopainikkeen tyylit:

.shoply-product-action-button - Tyylittelee ensisijaiset toimintopainikkeet (Add to Cart, View Product jne.)
.shoply-product-action-button-sold-out - Tyylittelee toimintopainikkeen, kun tuote on loppuunmyyty (pois käytöstä -tila)

Huomaa: Shoply-sovelluksen hallintapaneelin Customize AI Search -osiossa voit määrittää, mitä tapahtuu, kun asiakkaat napsauttavat toimintopainiketta — he voivat lisätä tuotteen ostoskoriin, siirtyä tuotteen sivulle tai voit halutessasi piilottaa toimintopainikkeen kokonaan.

AI Summary -luokat

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Tyylittelee AI:n luomien yhteenvetojen säiliölaatikon.
.shoply-ai-summary-button - Tyylittelee painikkeen, joka käynnistää AI Summaryn luonnin.

Esimerkkejä tuotekorttien mukauttamisesta hakutuloksissa CSS:n avulla

Tuotemerkin tyylin muuttaminen

Tuotemerkki näkyy tuotteen otsikon yläpuolella. Tässä on joitakin yleisiä mukautuksia:

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

Tuotteen otsikon mukauttaminen

Tuotteen nimi on yksi tärkeimmistä elementeistä. Mukauta se vastaamaan brändiäsi:

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

Esimerkkejä tuotehintojen tyylittelystä

Tuo hintasi esiin mukautetulla tyylillä:

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

Toimintopainikkeiden mukauttaminen

Toimintopainikkeesi (Add to Cart, View Product) voidaan tyylitellä vastaamaan kauppasi ilmettä:

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

Tuotekuvien tyylittely

Paranna tuotekuviasi reunuksilla, varjoilla tai hover-tehosteilla:

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

Esimerkkejä AI Summary -osion mukauttamisesta

Kaupoissa, joissa AI Search on käytössä, AI Summary näkyy hakutulosten yläosassa ja kertoo heti, mitä kannattaa ostaa ja miksi hakutulosten perusteella — jo ennen kuin asiakkaat edes selaavat tuotteita.

Voit poistaa AI Summaryn käytöstä sovelluksen hallintapaneelin Customize AI Search -sivulla. Voit myös mukauttaa sen ulkoasua CSS:n avulla alla esitetyllä tavalla.

AI Summary -laatikon tyylittely

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

AI Summary -painikkeen mukauttaminen

Oletuksena AI Summary pidetään lyhyenä ja ytimekkäänä näytön tilan säästämiseksi. Asiakkaat voivat napsauttaa “AI Summary Button” -painiketta laajentaakseen näkymän ja nähdäkseen kaikki yksityiskohdat. Haluatko saada sen vastaamaan brändiäsi? Voit mukauttaa myös tätä painiketta! Katso alla olevat esimerkit.

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

Vianmääritys

CSS-muutokseni eivät näy

Tarkista kirjoitusvirheet: Varmista, että CSS-luokkien nimet on kirjoitettu oikein (ne alkavat muodolla .shoply-)
Tyhjennä selaimen välimuisti: Joskus selaimet tallentavat vanhoja tyylejä välimuistiin
Tarkista CSS-syntaksi: Varmista, että kaikki CSS-säännöt on suljettu oikein merkillä }
Käytä !important: Jos tyylit eivät tule voimaan, saatat joutua lisäämään !important-määreen ohittaaksesi oletustyylit:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Tyylit näyttävät erilaisilta mobiilissa

Jotkin tyylit voivat vaatia mobiilikohtaisia säätöjä. Käytä mediakyselyitä:

css


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

Haluatko palauttaa oletustyylit

Tyhjennä vain CSS-tekstialue ja tallenna. Sovellus palautuu oletustyylitykseen.

Tarvitsetko lisää apua?

Jos tarvitset lisäapua CSS-mukauttamiseen:

Tarkista visuaaliset esimerkit sovelluksen asetuksista (Product Card Preview ja AI Summary Preview)
Tutustu CSS-dokumentaatioresursseihin, kuten MDN Web Docs
Ota yhteyttä tukitiimiimme henkilökohtaista apua varten osoitteessa customer-obsession@shoplyai.ai

Mukavia mukautushetkiä! 🎨

Näiden CSS-luokkien avulla hallitset täysin hakutulostesi ulkoasua. Kokeile, testaa ja luo hakukokemus, joka vastaa täydellisesti brändiäsi!