A keresési eredmények testreszabása CSS-sel

Készen állsz arra, hogy a keresési eredményeid nagyszerűen nézzenek ki? Ez az útmutató megmutatja, hogyan formázd a termékkeresési eredményeket és az AI-összefoglaló szakaszokat CSS segítségével. Semmi gond, ha még új vagy a CSS-ben — segítünk! Ha pedig már magabiztosan használod, rengeteg tippet találsz majd ahhoz, hogy a testreszabást magasabb szintre emeld.

Első lépések

A Shoply AI Chat és az AI Search is képes keresési eredményeket megjeleníteni, ezért az általad hozzáadott CSS testreszabási beállítások mindkettőre érvényesek lesznek. Megjegyzés: az AI Summary funkció csak a Shoply AI Search-ben érhető el.

Hová add hozzá a CSS-t

A teljes szűrősáv elrejtéséhez használd a beépített vezérlőt: lépj a Customize AI Search → Search filters menüpontra, kapcsold ki a Show filters in search results beállítást, majd kattints a Save gombra. Ehhez nincs szükség CSS-re. A részletekért lásd: Hide Search Filters .

1. Navigálj a Shoply alkalmazás admin konzoljában a Customize AI Search szakaszhoz.
2. Keresd meg a CSS styles for search elements szövegmezőt
3. Írd be az egyéni CSS-kódodat a szövegmezőbe
4. Kattints a Save gombra a módosítások alkalmazásához

CSS alapok

A CSS lehetővé teszi a színek, betűtípusok, térközök, szegélyek és egyebek módosítását. Az alapvető szintaxis a következő:

.class-name {
    property: value;
}

Például a szöveg színének sötétvörösre változtatásához:

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

A Shoply-specifikus CSS-osztályok megértése

A Shoply olyan specifikus CSS-osztályokat biztosít, amelyekkel a keresési eredmények különböző részeit célozhatod meg. Minden osztály a keresési eredmény egy adott elemének felel meg.

A Shoply ezekhez az osztályokhoz bizonyos alapértelmezett stílusokat is definiált. Ezeket a stílusokat a Chrome DevTools  segítségével vizsgálhatod meg, és rákereshetsz az egyes osztályokra. Ha felül szeretnéd írni az alapértelmezett stílusokat, add hozzá a !important deklarációt a CSS-szabályaidhoz, ahogy azt az MDN CSS !important dokumentációja  ismerteti.

Termékkártya-osztályok

A konténer stílusai:

• .shoply-product-image - A termékkép stílusa
• .shoply-product-card - A termékkártya konténerének stílusa

A szöveges információk stílusai:

• .shoply-product-brand - A termék márka-/beszállítói nevének stílusa, amely a termékcím fölött jelenik meg
• .shoply-product-name - A termék címének/nevének stílusa

Az ár stílusai:

• .shoply-product-price - A termék árának stílusa (a kedvezmény alkalmazása után)
• .shoply-product-original-price-before-discount - Az eredeti, kedvezmény előtti ár stílusa (alapértelmezetten áthúzva)
• .shoply-product-discount-percent - A kedvezmény százalékos értékét megjelenítő szöveg stílusa (alapértelmezetten félkövér piros szövegként jelenik meg)

A műveleti gomb stílusai:

• .shoply-product-action-button - A fő műveleti gombok stílusa (Add to Cart, View Product stb.)
• .shoply-product-action-button-sold-out - A műveleti gomb stílusa, amikor a termék elfogyott (letiltott állapot)

Megjegyzés: a Shoply alkalmazás admin konzoljának Customize AI Search szakaszában beállíthatod, mi történjen, amikor a vásárlók a műveleti gombra kattintanak — hozzáadhatják a terméket a kosárhoz, átirányíthatók a termékoldalra, vagy akár teljesen el is rejtheted a műveleti gombot.

AI Summary osztályok

• .shoply-ai-summary-box - Az AI által generált összefoglalók konténerdobozának stílusa.
• .shoply-ai-summary-button - Az AI-összefoglaló létrehozását indító gomb stílusa.

Példák a keresési eredmények termékkártyáinak CSS-es testreszabására

A termékmárka stílusának módosítása

A termékmárka a termékcím fölött jelenik meg. Íme néhány gyakori testreszabási lehetőség:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

A termékcím testreszabása

A terméknév az egyik legfontosabb elem. Szabd testre úgy, hogy illeszkedjen a márkádhoz:

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

Példák a termékárak formázására

Emeld ki az árakat egyéni stílusokkal:

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

A műveleti gombok testreszabása

A műveleti gombjaid (Add to Cart, View Product) a boltod dizájnjához igazíthatók:

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

Termékképek formázása

Dobd fel a termékképeket szegélyekkel, árnyékokkal vagy hover effektekkel:

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

Példák az AI-összefoglaló szakasz testreszabására

Azoknál az áruházaknál, amelyek engedélyezik az AI Search funkciót, az AI Summary a keresési eredmények tetején jelenik meg, és azonnal elmagyarázza, mit érdemes megvenni és miért a keresési eredmények alapján — még mielőtt a vásárlók végiggörgetnék a termékeket.

Az AI Summary kikapcsolható az alkalmazás admin konzoljának Customize AI Search oldalán. A megjelenését CSS segítségével is testreszabhatod, ahogy az alábbiakban látható.

Az AI-összefoglaló doboz formázása

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

Az AI-összefoglaló gomb testreszabása

Alapértelmezés szerint az AI Summary rövid és lényegre törő, hogy helyet takarítson meg a képernyőn. A vásárlók az “AI Summary Button” gombra kattintva kibonthatják, és megtekinthetik a teljes részleteket. Szeretnéd, hogy ez is illeszkedjen a márkádhoz? Ezt a gombot is testreszabhatod! Nézd meg az alábbi példákat.

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

Hibaelhárítás

A CSS-módosításaim nem jelennek meg

1. Ellenőrizd az elírásokat: Győződj meg róla, hogy a CSS-osztálynevek helyesen vannak írva (mind .shoply- kezdetűek)
2. Töröld a böngésző gyorsítótárát: Néha a böngészők a régi stílusokat tárolják gyorsítótárban
3. Ellenőrizd a CSS-szintaxist: Győződj meg róla, hogy minden CSS-szabály megfelelően } jellel zárul
4. Használd a !important deklarációt: Ha a stílusok nem érvényesülnek, lehet, hogy hozzá kell adnod a !important deklarációt az alapértelmezett stílusok felülírásához:
   css

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

A stílusok másként néznek ki mobilon

Néhány stílus mobil-specifikus igazítást igényelhet. Használj media query-ket:

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

Vissza szeretnéd állítani az alapértelmezett stílusokat

Egyszerűen töröld a CSS szövegmező tartalmát, és mentsd el. Az alkalmazás visszaáll az alapértelmezett stílusokra.

További segítségre van szükséged?

Ha további segítségre van szükséged a CSS testreszabásával kapcsolatban:

1. Nézd meg a vizuális példákat az alkalmazás beállításaiban (Product Card Preview és AI Summary Preview)
2. Tekintsd át a CSS-dokumentációs forrásokat, például az MDN Web Docs  oldalt
3. Vedd fel a kapcsolatot a támogatási csapatunkkal személyre szabott segítségért itt: customer-obsession@shoplyai.ai

Jó testreszabást! 🎨

Ezekkel a CSS-osztályokkal teljes irányításod van a keresési eredményeid megjelenése felett. Kísérletezz, tesztelj, és hozz létre egy olyan keresési élményt, amely tökéletesen illeszkedik a márkádhoz!