So passen Sie Ihre Suchergebnisse mit CSS an

How to Customize Your Search Results with CSS

Möchten Sie, dass Ihre Suchergebnisse großartig aussehen? Diese Anleitung zeigt Ihnen, wie Sie Ihre Produktsuchergebnisse und AI Summary-Bereiche mit CSS gestalten. Keine Sorge, wenn Sie neu bei CSS sind — wir helfen Ihnen weiter! Und wenn Sie sich bereits gut damit auskennen, finden Sie hier viele Tipps, um Ihre Anpassungen auf die nächste Stufe zu bringen.

Erste Schritte

Sowohl Shoply AI Chat als auch AI Search können Suchergebnisse anzeigen, daher gelten die von Ihnen hinzugefügten CSS-Anpassungsoptionen für beide. Hinweis: Die Funktion AI Summary ist nur in Shoply AI Search verfügbar.

Wo Sie Ihr CSS hinzufügen

Um die gesamte Filterleiste auszublenden, verwenden Sie die integrierte Einstellung: Gehen Sie zu Customize AI Search → Search filters, deaktivieren Sie Show filters in search results und klicken Sie auf Save. Es ist kein CSS erforderlich. Details finden Sie unter Hide Search Filters .

Navigieren Sie zum Bereich Customize AI Search in der Admin-Konsole der Shoply-App.
Suchen Sie das Textfeld CSS styles for search elements
Geben Sie Ihren benutzerdefinierten CSS-Code in das Textfeld ein
Klicken Sie auf Save, um Ihre Änderungen anzuwenden

CSS-Grundlagen

Mit CSS können Sie Farben, Schriftarten, Abstände, Rahmen und vieles mehr ändern. Die grundlegende Syntax lautet:

css


.class-name {
    property: value;
}

Zum Beispiel, um die Textfarbe in Dunkelrot zu ändern:

css


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

Die Shoply-spezifischen CSS-Klassen verstehen

Shoply stellt spezifische CSS-Klassen bereit, mit denen Sie verschiedene Teile Ihrer Suchergebnisse gezielt ansprechen können. Jede Klasse entspricht einem bestimmten Element im Suchergebnis.

Shoply hat für diese Klassen außerdem bestimmte Standardstile definiert. Sie können diese Stile mit Chrome DevTools untersuchen und nach jeder Klasse suchen. Wenn Sie die Standardstile überschreiben müssen, fügen Sie Ihren CSS-Regeln die Deklaration !important hinzu, wie in der MDN CSS !important-Dokumentation erklärt.

Produktkarten-Klassen

Customizing Product Cards in Search Results with CSS

Stile für den Container:

.shoply-product-image - Gestaltet das Produktbild
.shoply-product-card - Gestaltet den Container der Produktkarte

Stile für die Textinformationen:

.shoply-product-brand - Gestaltet den Produktmarken-/Anbieternamen, der über dem Produkttitel angezeigt wird
.shoply-product-name - Gestaltet den Produkttitel/-namen

Stile für Preise:

.shoply-product-price - Gestaltet den Produktpreis (nach Anwendung des Rabatts)
.shoply-product-original-price-before-discount - Gestaltet den Originalpreis vor dem Rabatt (standardmäßig mit Durchstreichung)
.shoply-product-discount-percent - Gestaltet den Text für den Rabattprozentsatz (standardmäßig als fetter roter Text angezeigt)

Stile für den Aktionsbutton:

.shoply-product-action-button - Gestaltet die Hauptaktionsbuttons (Add to Cart, View Product usw.)
.shoply-product-action-button-sold-out - Gestaltet den Aktionsbutton, wenn ein Produkt ausverkauft ist (deaktivierter Zustand)

Hinweis: Im Bereich Customize AI Search der Admin-Konsole der Shoply-App können Sie konfigurieren, was passiert, wenn Kund:innen auf den Aktionsbutton klicken — sie können das Produkt zum Warenkorb hinzufügen, zur Produktseite weitergeleitet werden, oder Sie können den Aktionsbutton vollständig ausblenden.

AI Summary-Klassen

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Gestaltet den Container für KI-generierte Zusammenfassungen.
.shoply-ai-summary-button - Gestaltet den Button, der die Generierung der AI Summary auslöst.

Beispiele zum Anpassen von Produktkarten in Suchergebnissen mit CSS

Styling der Produktmarke ändern

Die Produktmarke erscheint über dem Produkttitel. Hier sind einige häufige Anpassungen:

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

Produkttitel anpassen

Der Produktname ist eines der wichtigsten Elemente. Passen Sie ihn an Ihre Marke an:

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

Beispiele für das Styling von Produktpreisen

Lassen Sie Ihre Preise mit individuellem Styling hervorstechen:

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

Aktionsbuttons anpassen

Ihre Aktionsbuttons (Add to Cart, View Product) können so gestaltet werden, dass sie zum Design Ihres Shops passen:

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

Produktbilder gestalten

Werten Sie Ihre Produktbilder mit Rahmen, Schatten oder Hover-Effekten auf:

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

Beispiele zum Anpassen des AI Summary-Bereichs

Für Shops, die AI Search aktiviert haben, erscheint AI Summary oben in den Suchergebnissen und erklärt sofort, was man kaufen sollte und warum — basierend auf den Suchergebnissen, noch bevor Kund:innen durch die Produkte scrollen.

Sie können die AI Summary auf der Seite Customize AI Search in der Admin-Konsole der App deaktivieren. Sie können ihr Erscheinungsbild auch mit CSS anpassen, wie unten gezeigt.

Die AI Summary-Box gestalten

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

Den AI Summary-Button anpassen

Standardmäßig ist die AI Summary kurz und prägnant gehalten, um Platz auf dem Bildschirm zu sparen. Kund:innen können auf den “AI Summary Button” klicken, um ihn zu erweitern und alle Details zu sehen. Möchten Sie, dass er zu Ihrer Marke passt? Sie können auch diesen Button anpassen! Sehen Sie sich die folgenden Beispiele an.

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

Fehlerbehebung

Meine CSS-Änderungen werden nicht angezeigt

Auf Tippfehler prüfen: Stellen Sie sicher, dass Ihre CSS-Klassennamen korrekt geschrieben sind (sie beginnen mit .shoply-)
Browser-Cache leeren: Manchmal speichern Browser alte Styles im Cache
CSS-Syntax prüfen: Stellen Sie sicher, dass alle Ihre CSS-Regeln korrekt mit } geschlossen sind
!important verwenden: Wenn Styles nicht angewendet werden, müssen Sie möglicherweise !important hinzufügen, um Standardstile zu überschreiben:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Auf Mobilgeräten sehen Styles anders aus

Einige Styles benötigen möglicherweise mobile-spezifische Anpassungen. Verwenden Sie Media Queries:

css


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

Müssen Sie auf die Standardstile zurücksetzen?

Leeren Sie einfach das CSS-Textfeld und speichern Sie. Die App kehrt dann zum Standard-Styling zurück.

Brauchen Sie weitere Hilfe?

Wenn Sie zusätzliche Unterstützung bei der CSS-Anpassung benötigen:

Sehen Sie sich die visuellen Beispiele in den App-Einstellungen an (Product Card Preview und AI Summary Preview)
Nutzen Sie CSS-Dokumentationsressourcen wie MDN Web Docs
Kontaktieren Sie unser Support-Team für persönliche Hilfe unter customer-obsession@shoplyai.ai

Viel Erfolg beim Anpassen! 🎨

Mit diesen CSS-Klassen haben Sie die volle Kontrolle über das Erscheinungsbild Ihrer Suchergebnisse. Probieren Sie Dinge aus, testen Sie und erstellen Sie ein Sucherlebnis, das perfekt zu Ihrer Marke passt!