Jak dostosować wyniki wyszukiwania za pomocą CSS

How to Customize Your Search Results with CSS

Chcesz, aby Twoje wyniki wyszukiwania wyglądały świetnie? Ten przewodnik pokaże Ci, jak stylizować wyniki wyszukiwania produktów i sekcje podsumowań AI za pomocą CSS. Nie martw się, jeśli dopiero zaczynasz z CSS — pomożemy Ci! A jeśli już dobrze się w tym odnajdujesz, znajdziesz tu mnóstwo wskazówek, które pozwolą Ci przenieść personalizację na wyższy poziom.

Pierwsze kroki

Zarówno Shoply AI Chat, jak i AI Search mogą wyświetlać wyniki wyszukiwania, więc dodane przez Ciebie opcje dostosowywania CSS będą stosowane do obu. Uwaga: funkcja AI Summary jest dostępna tylko w Shoply AI Search.

Gdzie dodać swój CSS

Aby ukryć cały pasek filtrów, użyj wbudowanej opcji: przejdź do Customize AI Search → Search filters, wyłącz Show filters in search results i kliknij Save. CSS nie jest potrzebny. Szczegóły znajdziesz w Hide Search Filters .

Przejdź do sekcji Customize AI Search w panelu administracyjnym aplikacji Shoply.
Znajdź pole tekstowe CSS styles for search elements
Wprowadź własny kod CSS w polu tekstowym
Kliknij Save, aby zastosować zmiany

Podstawy CSS

CSS pozwala zmieniać kolory, czcionki, odstępy, obramowania i wiele więcej. Podstawowa składnia wygląda tak:

css


.class-name {
    property: value;
}

Na przykład, aby zmienić kolor tekstu na ciemnoczerwony:

css


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

Omówienie klas CSS specyficznych dla Shoply

Shoply udostępnia specjalne klasy CSS, których możesz używać do kierowania stylów na różne części wyników wyszukiwania. Każda klasa odpowiada konkretnemu elementowi w wyniku wyszukiwania.

Shoply zdefiniowało również pewne domyślne style dla tych klas. Możesz sprawdzić te style za pomocą Chrome DevTools i wyszukać każdą z klas. Jeśli chcesz nadpisać style domyślne, dodaj deklarację !important do swoich reguł CSS, zgodnie z wyjaśnieniem w dokumentacji MDN CSS !important .

Klasy kart produktów

Customizing Product Cards in Search Results with CSS

Style dla kontenera:

.shoply-product-image - Stylizuje obraz produktu
.shoply-product-card - Stylizuje kontener karty produktu

Style dla informacji tekstowych:

.shoply-product-brand - Stylizuje nazwę marki/dostawcy produktu wyświetlaną nad tytułem produktu
.shoply-product-name - Stylizuje tytuł/nazwę produktu

Style ceny:

.shoply-product-price - Stylizuje cenę produktu (po zastosowaniu rabatu)
.shoply-product-original-price-before-discount - Stylizuje oryginalną cenę przed rabatem (domyślnie z przekreśleniem)
.shoply-product-discount-percent - Stylizuje tekst z procentem rabatu (domyślnie wyświetlany jako pogrubiony czerwony tekst)

Style przycisku akcji:

.shoply-product-action-button - Stylizuje główne przyciski akcji (Add to Cart, View Product itp.)
.shoply-product-action-button-sold-out - Stylizuje przycisk akcji, gdy produkt jest wyprzedany (stan wyłączony)

Uwaga: W sekcji Customize AI Search w panelu administracyjnym aplikacji Shoply możesz skonfigurować, co stanie się po kliknięciu przez klientów przycisku akcji — mogą dodać produkt do koszyka, zostać przekierowani na stronę produktu lub możesz całkowicie ukryć przycisk akcji.

Klasy AI Summary

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Stylizuje kontener dla podsumowań generowanych przez AI.
.shoply-ai-summary-button - Stylizuje przycisk uruchamiający generowanie AI Summary.

Przykłady dostosowywania kart produktów w wynikach wyszukiwania za pomocą CSS

Zmiana stylu marki produktu

Marka produktu pojawia się nad tytułem produktu. Oto kilka typowych sposobów dostosowania:

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

Dostosowywanie tytułu produktu

Nazwa produktu to jeden z najważniejszych elementów. Dostosuj ją tak, aby pasowała do Twojej marki:

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

Przykłady stylizowania cen produktów

Wyróżnij swoje ceny dzięki własnym stylom:

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

Dostosowywanie przycisków akcji

Twoje przyciski akcji (Add to Cart, View Product) można wystylizować tak, aby pasowały do wyglądu Twojego sklepu:

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

Stylizowanie obrazów produktów

Ulepsz obrazy produktów za pomocą obramowań, cieni lub efektów po najechaniu:

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

Przykłady dostosowywania sekcji AI Summary

W sklepach, które mają włączone AI Search, AI Summary pojawi się na górze wyników wyszukiwania i natychmiast wyjaśni, co warto kupić i dlaczego, na podstawie wyników wyszukiwania — jeszcze zanim klienci zaczną przewijać listę produktów.

Możesz wyłączyć AI Summary na stronie Customize AI Search w panelu administracyjnym aplikacji. Możesz także dostosować jego wygląd za pomocą CSS, jak pokazano poniżej.

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

Dostosowywanie przycisku AI Summary

Domyślnie AI Summary jest krótkie i zwięzłe, aby oszczędzać miejsce na ekranie. Klienci mogą kliknąć „AI Summary Button”, aby rozwinąć i zobaczyć pełne szczegóły. Chcesz, aby pasował do Twojej marki? Ten przycisk również możesz dostosować! Zobacz poniższe przykłady.

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

Rozwiązywanie problemów

Moje zmiany CSS się nie pokazują

Sprawdź literówki: Upewnij się, że nazwy klas CSS są zapisane poprawnie (zaczynają się od .shoply-)
Wyczyść pamięć podręczną przeglądarki: Czasami przeglądarki przechowują stare style w pamięci podręcznej
Sprawdź składnię CSS: Upewnij się, że wszystkie reguły CSS są poprawnie zamknięte znakiem }
Użyj !important: Jeśli style się nie stosują, może być konieczne dodanie !important, aby nadpisać style domyślne:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Style wyglądają inaczej na urządzeniach mobilnych

Niektóre style mogą wymagać dostosowań specyficznych dla urządzeń mobilnych. Użyj media queries:

css


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

Chcesz przywrócić style domyślne

Po prostu wyczyść pole tekstowe CSS i zapisz zmiany. Aplikacja wróci do domyślnego stylu.

Potrzebujesz dodatkowej pomocy?

Jeśli potrzebujesz dodatkowego wsparcia przy dostosowywaniu CSS:

Sprawdź przykłady wizualne w ustawieniach aplikacji (Product Card Preview i AI Summary Preview)
Zajrzyj do dokumentacji CSS, na przykład MDN Web Docs
Skontaktuj się z naszym zespołem wsparcia, aby uzyskać indywidualną pomoc pod adresem customer-obsession@shoplyai.ai

Miłego dostosowywania! 🎨

Dzięki tym klasom CSS masz pełną kontrolę nad wyglądem swoich wyników wyszukiwania. Eksperymentuj, testuj i twórz doświadczenie wyszukiwania, które idealnie pasuje do Twojej marki!