Jak přizpůsobit vzhled AI Search

Existují dva způsoby, jak přizpůsobit výsledky vyhledávání ve Shoply AI:

• Vestavěné možnosti: Začněte ovládacími prvky ve své Shoply AI Admin Console, kde můžete měnit souhrny, filtry, tlačítka, barvy a rozvržení produktů bez psaní kódu. Prozkoumejte vestavěné možnosti a náhledy.
• Vlastní CSS: Pokud vám tyto ovládací prvky neposkytnou požadovaný vzhled, použijte CSS — jazyk pro stylování webových stránek — k doladění písem, rozestupů, okrajů a dalších vizuálních detailů. Můžete jej používat společně s vestavěnými nastaveními. Přejít na průvodce CSS.

CSS pravděpodobně vůbec nepotřebujete

Většina změn rozvržení a vzhledu vyhledávání je již dostupná v části Customize AI Search ve vaší Shoply AI Admin Console, ať už používáte Shopify nebo jinou webovou platformu. Nejprve vyzkoušejte tyto vestavěné možnosti a poté klikněte v administraci na Save, aby se vaše volby použily. CSS použijte pro stylování, které tyto ovládací prvky nepokrývají.

Interaktivní příklady níže používají stejné náhledy jako administrace. Jsou to ukázky, které si zde můžete vyzkoušet; váš obchod nezmění.

• AI Summary: Zapněte nebo vypněte souhrn a zvolte, zda se zobrazí nad výsledky produktů, nebo pod nimi.

• Search filters: Zobrazte nebo skryjte panel filtrů a umístěte filtry nahoru, vlevo nebo do plovoucího panelu. Rozvržení vlevo se na menších obrazovkách přesune nad výsledky. Informace o společném dopadu na výsledky chatu najdete v nastavení viditelnosti vyhledávacích filtrů.

• Tlačítka akcí produktu a barvy: Zvolte Add to Cart, View Product nebo No Button. Vyberte barvu pozadí a textu tlačítka a změňte barvu hvězdiček hodnocení tak, aby odpovídala vašemu obchodu.

• Počet produktů na řádek: Vyberte tři nebo čtyři sloupce na desktopu a jeden nebo dva sloupce na mobilu. Méně sloupců dá každému obrázku produktu více prostoru.

• Celkový počet zobrazených produktů: Nastavte samostatný počet produktů pro malé mobilní obrazovky, větší mobilní obrazovky a desktop. Administrace nabízí 3, 4, 6, 8, 9, 12, 15, 16, 18 nebo 20 produktů. Toto nastavení určuje počet výsledků, nikoli počet sloupců.

Pokud stále potřebujete vlastní design, pokračujte níže průvodcem CSS.

Začínáme

Pokud vám vestavěné možnosti neposkytnou vzhled, který chcete, použijte vlastní CSS k doladění výsledků vyhledávání.

Jak Shoply AI Chat, tak AI Search mohou zobrazovat výsledky vyhledávání, takže přidané možnosti přizpůsobení pomocí CSS se použijí na obojí. Poznámka: Funkce AI Summary je dostupná pouze v Shoply AI Search.

Nejprve povolte AI Search před jeho stylováním, abyste mohli náhled změn zobrazit na skutečných výsledcích.

Kam přidat vaše CSS

Chcete-li skrýt celý panel filtrů, použijte vestavěný ovládací prvek: přejděte na Customize AI Search → Search filters, vypněte Show filters in search results a klikněte na Save. CSS není potřeba. Podrobnosti najdete v Hide Search Filters .

1. Přejděte do sekce Customize AI Search v administraci aplikace Shoply.
2. Najděte textové pole CSS styles for search elements
3. Zadejte svůj vlastní CSS kód do textového pole
4. Kliknutím na Save použijte své změny

Základy CSS

CSS vám umožňuje měnit barvy, písma, rozestupy, okraje a další vlastnosti. Základní syntaxe je:

.class-name {
    property: value;
}

Například pro změnu barvy textu na tmavě červenou:

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

Porozumění CSS třídám specifickým pro Shoply

Shoply poskytuje konkrétní CSS třídy, které můžete použít k cílení na různé části výsledků vyhledávání. Každá třída odpovídá určitému prvku ve výsledku vyhledávání.

Shoply pro tyto třídy také definovalo určité výchozí styly. Tyto styly můžete zkontrolovat pomocí Chrome DevTools  a vyhledáním jednotlivých tříd. Pokud potřebujete výchozí styly přepsat, přidejte do svých CSS pravidel deklaraci !important, jak je vysvětleno v dokumentaci MDN CSS !important .

Třídy karet produktů

Styly pro kontejner:

• .shoply-product-image - Styluje obrázek produktu
• .shoply-product-card - Styluje kontejner karty produktu

Styly pro textové informace:

• .shoply-product-brand - Styluje název značky/dodavatele produktu zobrazený nad názvem produktu
• .shoply-product-name - Styluje název produktu

Styly pro cenu:

• .shoply-product-price - Styluje cenu produktu (po uplatnění slevy)
• .shoply-product-original-price-before-discount - Styluje původní cenu před slevou (ve výchozím nastavení s přeškrtnutím)
• .shoply-product-discount-percent - Styluje text procenta slevy (ve výchozím nastavení zobrazen jako tučný červený text)

Styly pro akční tlačítko:

• .shoply-product-action-button - Styluje hlavní akční tlačítka (Add to Cart, View Product atd.)
• .shoply-product-action-button-sold-out - Styluje akční tlačítko, když je produkt vyprodaný (deaktivovaný stav)

Poznámka: V sekci Customize AI Search v administraci aplikace Shoply můžete nastavit, co se stane, když zákazníci kliknou na akční tlačítko — mohou přidat produkt do košíku, být přesměrováni na stránku produktu nebo můžete akční tlačítko úplně skrýt.

Třídy AI Summary

• .shoply-ai-summary-box - Styluje kontejnerový box pro souhrny generované AI.
• .shoply-ai-summary-button - Styluje tlačítko, které spouští generování AI souhrnu.

Příklady přizpůsobení karet produktů ve výsledcích vyhledávání pomocí CSS

Změna stylování značky produktu

Značka produktu se zobrazuje nad názvem produktu. Zde jsou některé běžné úpravy:

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

Přizpůsobení názvu produktu

Název produktu je jedním z nejdůležitějších prvků. Přizpůsobte jej tak, aby odpovídal vaší značce:

/* 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říklady stylování cen produktů

Nechte své ceny vyniknout pomocí vlastního stylování:

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

Přizpůsobení akčních tlačítek

Vaše akční tlačítka (Add to Cart, View Product) lze nastylovat tak, aby odpovídala designu vašeho obchodu:

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

Stylování obrázků produktů

Vylepšete obrázky svých produktů pomocí okrajů, stínů nebo efektů při najetí:

/* 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říklady přizpůsobení sekce AI Summary

V obchodech, které mají povolený AI Search, se AI Summary zobrazí nahoře ve výsledcích vyhledávání a okamžitě vysvětlí, co koupit a proč, na základě výsledků vyhledávání — ještě dříve, než zákazníci začnou procházet produkty.

AI Summary můžete vypnout na stránce Customize AI Search v administraci aplikace. Její vzhled můžete také přizpůsobit pomocí CSS, jak je ukázáno níže.

Stylování boxu AI Summary

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

Přizpůsobení tlačítka AI Summary

Ve výchozím nastavení je AI Summary stručné a výstižné, aby šetřilo místo na obrazovce. Zákazníci mohou kliknout na „AI Summary Button“, aby jej rozbalili a zobrazili všechny podrobnosti. Chcete, aby odpovídalo vaší značce? I toto tlačítko si můžete přizpůsobit! Podívejte se na příklady níže.

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

Řešení problémů

Moje změny CSS se nezobrazují

1. Zkontrolujte překlepy: Ujistěte se, že názvy vašich CSS tříd jsou napsány správně (začínají .shoply-)
2. Vymažte mezipaměť prohlížeče: Prohlížeče si někdy ukládají staré styly do mezipaměti
3. Zkontrolujte syntaxi CSS: Ujistěte se, že všechna vaše CSS pravidla jsou správně uzavřena pomocí }
4. Použijte !important: Pokud se styly neaplikují, možná budete muset přidat !important, abyste přepsali výchozí styly:
   css

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

Styly vypadají na mobilu jinak

Některé styly mohou vyžadovat úpravy specifické pro mobilní zařízení. Použijte media queries:

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

Potřebujete obnovit výchozí styly

Jednoduše vymažte textové pole pro CSS a uložte. Aplikace se vrátí k výchozímu stylování.

Potřebujete další pomoc?

Pokud potřebujete další pomoc s přizpůsobením CSS:

1. Podívejte se na vizuální příklady v nastavení aplikace (Product Card Preview a AI Summary Preview)
2. Prostudujte si zdroje s dokumentací CSS, například MDN Web Docs 
3. Kontaktujte náš tým podpory pro individuální pomoc na adrese customer-obsession@shoplyai.ai

Příjemné přizpůsobování! 🎨

S těmito CSS třídami máte plnou kontrolu nad vzhledem výsledků vyhledávání. Experimentujte, testujte a vytvořte prostředí vyhledávání, které bude dokonale odpovídat vaší značce!