Hogyan testreszabjuk az AI Search megjelenését

Kétféleképpen szabhatod testre a Shoply AI keresési eredményeit:

• Beépített lehetőségek: Kezdd a Shoply AI Admin Console vezérlőivel, hogy kódírás nélkül módosítsd az összefoglalókat, szűrőket, gombokat, színeket és a termékelrendezést. Fedezd fel a beépített lehetőségeket és előnézeteket.
• Egyéni CSS: Ha ezek a vezérlők nem adják meg a kívánt megjelenést, használj CSS-t — a weboldalak stílusnyelvét — a betűtípusok, térközök, szegélyek és egyéb vizuális részletek finomhangolásához. A beépített beállítások mellett is használhatod. Ugrás a CSS útmutatóhoz.

Valószínűleg egyáltalán nincs szükséged CSS-re

A keresési elrendezés és megjelenés legtöbb módosítása már elérhető a Customize AI Search alatt a Shoply AI Admin Console felületén, akár Shopify-t, akár más weboldalplatformot használsz. Először próbáld ki ezeket a beépített lehetőségeket, majd kattints az adminban a Save gombra a választásaid alkalmazásához. Olyan stílusozáshoz használj CSS-t, amelyet ezek a vezérlők nem fednek le.

Az alábbi interaktív példák ugyanazokat az előnézeteket használják, mint az adminfelület. Ezek itt kipróbálható illusztrációk; nem módosítják az áruházadat.

• AI Summary: Kapcsold be vagy ki az összefoglalót, és válaszd ki, hogy a termékeredmények fölött vagy alatt jelenjen meg.

• Search filters: Jelenítsd meg vagy rejtsd el a szűrősávot, és helyezd a szűrőket felülre, bal oldalra vagy lebegő panelre. A bal oldali elrendezés kisebb képernyőkön az eredmények fölé kerül. A csevegési eredményekre gyakorolt közös hatásért lásd a keresési szűrők láthatósági beállításait.

• Product action buttons and colors: Válaszd az Add to Cart, View Product vagy No Button lehetőséget. Állítsd be a gomb háttér- és szövegszínét, valamint módosítsd az értékelési csillagok színét, hogy illeszkedjen az áruházadhoz.

• Products per row: Válassz három vagy négy oszlopot asztali nézetben, illetve egy vagy két oszlopot mobilon. Kevesebb oszlop esetén több hely jut az egyes termékképeknek.

• Total products displayed: Állíts be külön termékszámot kis mobilképernyőkre, nagyobb mobilképernyőkre és asztali nézetre. Az admin 3, 4, 6, 8, 9, 12, 15, 16, 18 vagy 20 terméket kínál fel. Ez az eredmények számát szabályozza, nem az oszlopok számát.

Ha továbbra is egyéni dizájnra van szükséged, folytasd az alábbi CSS útmutatóval.

Első lépések

Ha a beépített lehetőségek nem adják meg a kívánt megjelenést, használj egyéni CSS-t a keresési eredmények finomhangolásához.

Mind a Shoply AI Chat, mind az AI Search képes keresési eredményeket megjeleníteni, így a hozzáadott CSS-testreszabási lehetőségek mindkettőre érvényesek lesznek. Megjegyzés: az AI Summary funkció csak a Shoply AI Searchben érhető el.

Először engedélyezd az AI Search funkciót még a stílusozás előtt, hogy valós eredményeken tudd előnézetben megtekinteni a módosításokat.

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 részhez, kapcsold ki a Show filters in search results opciót, majd kattints a Save gombra. Nincs szükség CSS-re. A részletekért lásd: Hide Search Filters .

1. Navigálj a Shoply alkalmazás admin konzoljának Customize AI Search szakaszához.
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 sok más elem módosítását. Az alap 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 konkrét 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 bizonyos alapértelmezett stílusokat is meghatározott ezekhez az osztályokhoz. Ezeket a stílusokat a Chrome DevTools  segítségével vizsgálhatod meg, és rákereshetsz az egyes osztályokra. Ha felül kell írnod az alapértelmezett stílusokat, add hozzá a !important deklarációt a CSS-szabályaidhoz, ahogy azt a MDN CSS !important dokumentációja  is ismerteti.

Product Card osztályok

Stílusok a konténerhez:

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

Stílusok a szöveges információkhoz:

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

Stílusok az árhoz:

• .shoply-product-price - A termék árának stílusozása (a kedvezmény alkalmazása után)
• .shoply-product-original-price-before-discount - Az eredeti, kedvezmény előtti ár stílusozása (alapértelmezetten áthúzott formázással)
• .shoply-product-discount-percent - A kedvezményszázalék szövegének stílusozása (alapértelmezetten félkövér piros szövegként jelenik meg)

Stílusok a műveleti gombhoz:

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

Megjegyzés: A Shoply alkalmazás admin konzoljának Customize AI Search részében beállíthatod, mi történjen, amikor a vásárlók a műveleti gombra kattintanak — a terméket kosárba tehetik, átirányíthatók a termékoldalra, vagy dönthetsz úgy is, hogy teljesen elrejted a műveleti gombot.

AI Summary osztályok

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

Példák a keresési eredmények Product Card elemeinek 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 stílusozására

Emeld ki az árakat egyéni stílusozással:

/* 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 gombjaidat (Add to Cart, View Product) úgy stílusozhatod, hogy illeszkedjenek az áruházad dizájnjához:

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

A termékképek stílusozása

Tedd még jobbá 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 Summary 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 funkciót kikapcsolhatod az alkalmazás admin konzoljának Customize AI Search oldalán. A megjelenését CSS használatával is testreszabhatod, ahogy az alább látható.

Az AI Summary doboz stílusozá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 Summary gomb testreszabása

Alapértelmezetten az AI Summary rövid és tömö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 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 elgépeléseket: Győződj meg róla, hogy a CSS-osztálynevek helyesen vannak írva (ezek .shoply- kezdetűek)
2. Töröld a böngésző gyorsítótárát: A böngészők néha régi stílusokat tárolnak gyorsítótárban
3. Ellenőrizd a CSS szintaxisát: Győződj meg róla, hogy minden CSS-szabály megfelelően le van zárva } karakterrel
4. Használj !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épp néznek ki mobilon

Egyes stílusokhoz mobileszközökre szabott módosításokra lehet szükség. Használj media queryket:

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

Vissza kell á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ílusozásra.

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

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

1. Nézd meg az alkalmazás beállításaiban található vizuális példákat (Product Card Preview és AI Summary Preview)
2. Böngészd át a CSS dokumentációs forrásokat, például az MDN Web Docs  oldalt
3. Személyre szabott segítségért lépj kapcsolatba ügyfélszolgálatunkkal itt: customer-obsession@shoplyai.ai

Jó testreszabást! 🎨

Ezekkel a CSS-osztályokkal teljes irányításod van a keresési eredmények 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!