Jak přizpůsobit výsledky vyhledávání pomocí CSS

How to Customize Your Search Results with CSS

Jste připraveni, aby vaše výsledky vyhledávání vypadaly skvěle? Tento průvodce vám ukáže, jak pomocí CSS upravit vzhled výsledků vyhledávání produktů a sekcí AI Summary. Nemusíte se bát, pokud s CSS teprve začínáte — postaráme se o vás! A pokud už se v něm vyznáte, najdete tu spoustu tipů, jak posunout své úpravy na vyšší úroveň.

Začínáme

Výsledky vyhledávání mohou zobrazovat jak Shoply AI Chat, tak AI Search, takže možnosti přizpůsobení pomocí CSS, které přidáte, se použijí na obě funkce. Poznámka: funkce AI Summary je dostupná pouze v Shoply AI Search.

Kam přidat své CSS

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

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

Základy CSS

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

css


.class-name {
    property: value;
}

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

css


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

Vysvětlení CSS tříd specifických pro Shoply

Shoply poskytuje konkrétní CSS třídy, které můžete použít pro zacílení různých částí výsledků vyhledávání. Každá třída odpovídá konkrétnímu prvku ve výsledku vyhledávání.

Shoply také pro tyto třídy definoval určité výchozí styly. Tyto styly si můžete prohlédnout pomocí Chrome DevTools a vyhledáním každé z těchto 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 produktových karet

Customizing Product Cards in Search Results with CSS

Styly pro kontejner:

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

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 s procentem slevy (ve výchozím nastavení se zobrazuje 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 administrační konzoli 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 zvolit úplné skrytí akčního tlačítka.

Třídy AI Summary

Customizing the AI Summary Section with CSS

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

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

Změna stylu značky produktu

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

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

Přizpůsobení názvu produktu

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

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

Příklady stylování cen produktů

Zvýrazněte své ceny pomocí vlastního stylování:

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

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

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

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

Stylování obrázků produktů

Vylepšete obrázky produktů pomocí ohraničení, stínů nebo efektů při najetí myší:

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

Příklady přizpůsobení sekce AI Summary

U obchodů, které mají zapnuté AI Search, se AI Summary zobrazí v horní části výsledků vyhledávání a okamžitě vysvětlí, co koupit a proč na základě výsledků vyhledávání — ještě než zákazníci začnou procházet produkty.

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

Stylování boxu AI Summary

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

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

Ve výchozím nastavení je AI Summary krátká a stručná, aby šetřila místo na obrazovce. Zákazníci mohou kliknout na „AI Summary Button“ a rozbalit si plné znění. Chcete, aby odpovídalo vaší značce? Můžete si přizpůsobit i toto tlačítko! Podívejte se na příklady níže.

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

Řešení problémů

Moje změny CSS se nezobrazují

Zkontrolujte překlepy: Ujistěte se, že názvy CSS tříd jsou napsané správně (začínají na .shoply-)
Vymažte mezipaměť prohlížeče: Prohlížeče si někdy ukládají staré styly do mezipaměti
Zkontrolujte syntaxi CSS: Ujistěte se, že všechna vaše CSS pravidla jsou správně uzavřena pomocí }
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:

css


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

Potřebujete vrátit výchozí styly

Jednoduše vymažte textové pole s CSS a uložte změny. 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:

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

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

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