Jak dostosować wygląd AI Search

Istnieją dwa sposoby dostosowania wyników wyszukiwania Shoply AI:

• Wbudowane opcje: Zacznij od ustawień w konsoli administracyjnej Shoply AI Admin Console, aby zmieniać podsumowania, filtry, przyciski, kolory i układ produktów bez pisania kodu. Poznaj wbudowane opcje i podglądy.
• Własny CSS: Jeśli te ustawienia nie zapewniają wyglądu, którego chcesz, użyj CSS — języka stylów dla stron internetowych — aby dopracować czcionki, odstępy, obramowania i inne szczegóły wizualne. Możesz używać go razem z wbudowanymi ustawieniami. Przejdź do przewodnika po CSS.

Prawdopodobnie w ogóle nie potrzebujesz CSS

Większość zmian układu i wyglądu wyszukiwania jest już dostępna w sekcji Customize AI Search w Shoply AI Admin Console, niezależnie od tego, czy korzystasz z Shopify, czy z innej platformy strony internetowej. Najpierw wypróbuj te wbudowane opcje, a następnie kliknij Save w panelu administracyjnym, aby zastosować wybrane ustawienia. Użyj CSS do stylizacji, której te ustawienia nie obejmują.

Interaktywne przykłady poniżej korzystają z tych samych podglądów co panel administracyjny. Są to przykłady, które możesz tutaj wypróbować; nie zmieniają one Twojego sklepu.

• AI Summary: Włącz lub wyłącz podsumowanie i wybierz, czy ma pojawiać się nad wynikami produktów, czy pod nimi.

• Filtry wyszukiwania: Pokaż lub ukryj pasek filtrów i umieść filtry u góry, po lewej stronie albo w pływającym panelu. Układ po lewej stronie na mniejszych ekranach przenosi się nad wynikami. Zobacz ustawienia widoczności filtrów wyszukiwania, aby poznać wspólny efekt dla wyników czatu.

• Przyciski akcji produktów i kolory: Wybierz Add to Cart, View Product lub No Button. Ustaw kolor tła i tekstu przycisku oraz zmień kolor gwiazdek ocen, aby pasował do Twojego sklepu.

• Produkty w wierszu: Wybierz trzy lub cztery kolumny na komputerze oraz jedną lub dwie kolumny na urządzeniach mobilnych. Mniejsza liczba kolumn daje więcej miejsca na obraz każdego produktu.

• Łączna liczba wyświetlanych produktów: Ustaw osobną liczbę produktów dla małych ekranów mobilnych, większych ekranów mobilnych i komputerów. Panel administracyjny oferuje 3, 4, 6, 8, 9, 12, 15, 16, 18 lub 20 produktów. To ustawienie kontroluje liczbę wyników, a nie liczbę kolumn.

Jeśli nadal potrzebujesz własnego projektu, przejdź do poniższego przewodnika po CSS.

Pierwsze kroki

Jeśli wbudowane opcje nie zapewniają wyglądu, którego chcesz, użyj własnego CSS, aby dopracować wyniki wyszukiwania.

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

Najpierw włącz AI Search przed rozpoczęciem stylizacji, aby móc podglądać zmiany na rzeczywistych wynikach.

Gdzie dodać CSS

Aby ukryć cały pasek filtrów, użyj wbudowanego ustawienia: 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 sekcji Hide Search Filters .

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

Podstawy CSS

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

.class-name {
    property: value;
}

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

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

Zrozumienie klas CSS specyficznych dla Shoply

Shoply udostępnia konkretne klasy CSS, których możesz używać do wskazywania różnych części wyników wyszukiwania. Każda klasa odpowiada określonemu 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 tych klas. Jeśli musisz nadpisać style domyślne, dodaj deklarację !important do swoich reguł CSS, zgodnie z wyjaśnieniem w dokumentacji MDN CSS !important .

Klasy kart produktów

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 dla ceny:

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

Style dla 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 konsoli administracyjnej aplikacji Shoply możesz skonfigurować, co stanie się po kliknięciu przycisku akcji przez klienta — może on dodać produkt do koszyka, zostać przekierowany na stronę produktu lub możesz całkowicie ukryć przycisk akcji.

Klasy AI Summary

• .shoply-ai-summary-box - Stylizuje pole kontenera 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 dostosowań:

/* 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 jest jednym z najważniejszych elementów. Dostosuj ją tak, aby pasowała do Twojej marki:

/* 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 stylizacji cen produktów

Spraw, aby ceny bardziej się wyróżniały dzięki własnej stylizacji:

/* 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 projektu Twojego sklepu:

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

Stylizacja obrazów produktów

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

/* 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 pojawia się u góry wyników wyszukiwania i natychmiast wyjaśnia, co warto kupić i dlaczego, na podstawie wyników wyszukiwania — jeszcze zanim klienci zaczną przewijać produkty.

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

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

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 też możesz dostosować! Sprawdź poniższe przykłady.

/* 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 wyświetlają

1. Sprawdź literówki: Upewnij się, że nazwy klas CSS są zapisane poprawnie (zaczynają się od .shoply-)
2. Wyczyść pamięć podręczną przeglądarki: Czasami przeglądarki zapisują stare style w pamięci podręcznej
3. Sprawdź składnię CSS: Upewnij się, że wszystkie reguły CSS są poprawnie zamknięte znakiem }
4. 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:

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

Chcesz przywrócić style domyślne

Po prostu wyczyść pole tekstowe CSS i zapisz. Aplikacja przywróci stylizację domyślną.

Potrzebujesz więcej pomocy?

Jeśli potrzebujesz dodatkowej pomocy przy dostosowywaniu CSS:

1. Sprawdź przykłady wizualne w ustawieniach aplikacji (Product Card Preview i AI Summary Preview)
2. Skorzystaj z zasobów dokumentacji CSS, takich jak MDN Web Docs 
3. Skontaktuj się z naszym zespołem wsparcia, aby uzyskać spersonalizowaną pomoc pod adresem customer-obsession@shoplyai.ai

Miłego dostosowywania! 🎨

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