Kuinka mukauttaa AI Searchin ulkoasua

On kaksi tapaa mukauttaa Shoply AI -hakutuloksiasi:

• Sisäänrakennetut vaihtoehdot: Aloita Shoply AI Admin Consolen asetuksilla muuttaaksesi yhteenvetoja, suodattimia, painikkeita, värejä ja tuoteasettelua ilman koodin kirjoittamista. Tutustu sisäänrakennettuihin vaihtoehtoihin ja esikatseluihin.
• Mukautettu CSS: Jos nämä asetukset eivät anna haluamaasi ulkoasua, käytä CSS:ää — verkkosivujen tyylikieltä — hienosäätääksesi fontteja, välistyksiä, reunoja ja muita visuaalisia yksityiskohtia. Voit käyttää sitä yhdessä sisäänrakennettujen asetusten kanssa. Siirry CSS-oppaaseen.

Et luultavasti tarvitse CSS:ää lainkaan

Useimmat haun asettelun ja ulkoasun muutokset ovat jo saatavilla Customize AI Search -osiossa Shoply AI Admin Consolessa, käytitpä Shopifyta tai muuta verkkosivualustaa. Kokeile ensin näitä sisäänrakennettuja vaihtoehtoja ja napsauta sitten ylläpidossa Save ottaaksesi valintasi käyttöön. Käytä CSS:ää sellaiseen tyylittelyyn, jota nämä asetukset eivät kata.

Alla olevat interaktiiviset esimerkit käyttävät samoja esikatseluja kuin ylläpito. Ne ovat havainnollistuksia, joita voit kokeilla täällä; ne eivät muuta kauppaasi.

• AI Summary: Ota yhteenveto käyttöön tai pois käytöstä ja valitse, näkyykö se tuotetulosten ylä- vai alapuolella.

• Search filters: Näytä tai piilota suodatinpalkki ja sijoita suodattimet yläreunaan, vasemmalle tai kelluvaan paneeliin. Vasemmanpuoleinen asettelu siirtyy tulosten yläpuolelle pienemmillä näytöillä. Katso hakusuodattimien näkyvyysasetukset nähdäksesi yhteisen vaikutuksen chat-tuloksiin.

• Product action buttons and colors: Valitse Add to Cart, View Product tai No Button. Valitse painikkeen tausta- ja tekstivärit sekä muuta tähtiarvioinnin väri vastaamaan kauppaasi.

• Products per row: Valitse työpöydällä kolme tai neljä saraketta ja mobiilissa yksi tai kaksi saraketta. Harvemmat sarakkeet antavat jokaiselle tuotekuvalle enemmän tilaa.

• Total products displayed: Aseta erilliset tuotemäärät pienille mobiilinäytöille, suuremmille mobiilinäytöille ja työpöydälle. Ylläpito tarjoaa vaihtoehdot 3, 4, 6, 8, 9, 12, 15, 16, 18 tai 20 tuotetta. Tämä ohjaa tulosten määrää eikä sarakkeiden määrää.

Jos tarvitset edelleen mukautetun ulkoasun, jatka alla olevaan CSS-oppaaseen.

Aloittaminen

Jos sisäänrakennetut vaihtoehdot eivät anna haluamaasi ulkoasua, käytä mukautettua CSS:ää hienosäätääksesi hakutuloksiasi.

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

Ota ensin AI Search käyttöön ennen sen tyylittelyä, jotta voit esikatsella muutoksia oikeilla tuloksilla.

Mihin lisätä CSS

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

1. Siirry Shoply-sovelluksen ylläpitokonsolissa Customize AI Search -osioon.
2. Etsi CSS styles for search elements -tekstialue
3. Syötä mukautettu CSS-koodisi tekstialueeseen
4. Napsauta Save ottaaksesi muutokset käyttöön

CSS:n perusteet

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

.class-name {
    property: value;
}

Esimerkiksi vaihtaaksesi tekstin värin tummanpunaiseksi:

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

Shoply-kohtaisten CSS-luokkien ymmärtäminen

Shoply tarjoaa tietyt CSS-luokat, joiden avulla voit kohdistaa 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 selitetään MDN:n CSS !important -dokumentaatiossa .

Tuotekorttien luokat

Tyylit säiliölle:

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

Tyylit tekstitiedoille:

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

Tyylit hinnalle:

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

Tyylit toimintopainikkeelle:

• .shoply-product-action-button - Tyylittelee pää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 ylläpitokonsolin Customize AI Search -osiossa voit määrittää, mitä tapahtuu, kun asiakkaat napsauttavat toimintopainiketta — he voivat lisätä tuotteen ostoskoriin, siirtyä tuotteen sivulle tai voit valita toimintopainikkeen piilottamisen kokonaan.

AI Summary -luokat

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

Esimerkkejä tuotekorttien mukauttamisesta hakutuloksissa CSS:n avulla

Tuotemerkin tyylin muuttaminen

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

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

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

Korosta hintoja mukautetulla tyylittelyllä:

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

/* 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 reunoilla, varjoilla tai hover-tehosteilla:

/* 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 selittää välittömästi, mitä kannattaa ostaa ja miksi hakutulosten perusteella — ennen kuin asiakkaat edes selaavat tuotteita.

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

AI Summary -laatikon tyylittely

    /* 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ä 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! Tutustu alla oleviin esimerkkeihin.

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

1. Tarkista kirjoitusvirheet: Varmista, että CSS-luokkien nimet on kirjoitettu oikein (ne alkavat muodolla .shoply-)
2. Tyhjennä selaimen välimuisti: Joskus selaimet tallentavat vanhoja tyylejä välimuistiin
3. Tarkista CSS-syntaksi: Varmista, että kaikki CSS-säännöt on suljettu oikein merkillä }
4. Käytä !important: Jos tyylit eivät tule voimaan, sinun on ehkä lisättävä !important ohittaaksesi oletustyylit:
   css

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

Tyylit näyttävät erilaisilta mobiilissa

Jotkin tyylit saattavat tarvita mobiilikohtaisia säätöjä. Käytä mediasääntöjä:

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

Haluatko palauttaa oletustyylit

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

Tarvitsetko lisää apua?

Jos tarvitset lisäapua CSS-mukauttamisessa:

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

Hauskoja mukautushetkiä! 🎨

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