So passen Sie das Erscheinungsbild der AI Search an

Es gibt zwei Möglichkeiten, deine Shoply AI-Suchergebnisse anzupassen:

• Integrierte Optionen: Starte mit den Steuerelementen in deiner Shoply AI Admin Console, um Zusammenfassungen, Filter, Buttons, Farben und das Produktlayout zu ändern, ohne Code zu schreiben. Entdecke die integrierten Optionen und Vorschauen.
• Benutzerdefiniertes CSS: Wenn dir diese Steuerelemente nicht das gewünschte Design liefern, verwende CSS – die Stylesprache für Webseiten –, um Schriftarten, Abstände, Rahmen und andere visuelle Details fein abzustimmen. Du kannst es zusammen mit den integrierten Einstellungen verwenden. Zur CSS-Anleitung.

Wahrscheinlich brauchst du überhaupt kein CSS

Die meisten Änderungen am Suchlayout und Erscheinungsbild sind bereits unter Customize AI Search in deiner Shoply AI Admin Console verfügbar, egal ob du Shopify oder eine andere Website-Plattform verwendest. Probiere zuerst diese integrierten Optionen aus und klicke dann im Admin auf Save, um deine Auswahl anzuwenden. Verwende CSS für Styling, das von diesen Steuerelementen nicht abgedeckt wird.

Die interaktiven Beispiele unten verwenden dieselben Vorschauen wie im Admin. Sie sind Veranschaulichungen, die du hier ausprobieren kannst; sie ändern deinen Store nicht.

• AI Summary: Schalte die Zusammenfassung ein oder aus und wähle, ob sie über oder unter den Produktergebnissen erscheint.

• Suchfilter: Zeige die Filterleiste an oder blende sie aus und platziere Filter oben, links oder in einem schwebenden Panel. Das linke Layout wird auf kleineren Bildschirmen oberhalb der Ergebnisse angezeigt. Sieh dir die Einstellungen zur Sichtbarkeit von Suchfiltern an, um den gemeinsamen Effekt auf Chat-Ergebnisse zu verstehen.

• Produktaktionsbuttons und Farben: Wähle Add to Cart, View Product oder No Button. Lege die Hintergrund- und Textfarben des Buttons fest und ändere die Farbe der Bewertungssterne passend zu deinem Store.

• Produkte pro Zeile: Wähle auf dem Desktop drei oder vier Spalten und auf Mobilgeräten eine oder zwei Spalten. Weniger Spalten geben jedem Produktbild mehr Platz.

• Insgesamt angezeigte Produkte: Lege separate Produktanzahlen für kleine mobile Bildschirme, größere mobile Bildschirme und Desktop fest. Der Admin bietet 3, 4, 6, 8, 9, 12, 15, 16, 18 oder 20 Produkte an. Dies steuert die Anzahl der Ergebnisse und nicht die Anzahl der Spalten.

Wenn du weiterhin ein benutzerdefiniertes Design brauchst, fahre mit der CSS-Anleitung unten fort.

Erste Schritte

Wenn die integrierten Optionen dir nicht das gewünschte Aussehen geben, verwende benutzerdefiniertes CSS, um deine Suchergebnisse fein abzustimmen.

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

Aktiviere zuerst AI Search, bevor du sie stylst, damit du Änderungen an echten Ergebnissen in der Vorschau sehen kannst.

Wo du dein CSS hinzufügen kannst

Um die gesamte Filterleiste auszublenden, verwende das integrierte Steuerelement: Gehe zu Customize AI Search → Search filters, schalte Show filters in search results aus und klicke auf Save. Es ist kein CSS erforderlich. Siehe Hide Search Filters  für Details.

1. Navigiere zum Abschnitt Customize AI Search in der Admin Console der Shoply-App.
2. Finde das Textfeld CSS styles for search elements
3. Gib deinen benutzerdefinierten CSS-Code in das Textfeld ein
4. Klicke auf Save, um deine Änderungen anzuwenden

CSS-Grundlagen

Mit CSS kannst du Farben, Schriftarten, Abstände, Rahmen und mehr ändern. Die grundlegende Syntax ist:

.class-name {
    property: value;
}

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

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

Die Shoply-spezifischen CSS-Klassen verstehen

Shoply stellt spezifische CSS-Klassen bereit, mit denen du verschiedene Teile deiner Suchergebnisse gezielt ansprechen kannst. Jede Klasse entspricht einem bestimmten Element im Suchergebnis.

Shoply hat für diese Klassen außerdem bestimmte Standardstile definiert. Du kannst diese Stile mit den Chrome DevTools  untersuchen und nach jeder Klasse suchen. Wenn du die Standardstile überschreiben musst, füge die Deklaration !important zu deinen CSS-Regeln hinzu, wie in der MDN-Dokumentation zu CSS !important  erklärt.

Produktkarten-Klassen

Stile für den Container:

• .shoply-product-image - Stile für das Produktbild
• .shoply-product-card - Stile für den Container der Produktkarte

Stile für die Textinformationen:

• .shoply-product-brand - Stile für den Produktmarken-/Anbieternamen, der über dem Produkttitel angezeigt wird
• .shoply-product-name - Stile für den Produkttitel/-namen

Stile für den Preis:

• .shoply-product-price - Stile für den Produktpreis (nach Anwendung des Rabatts)
• .shoply-product-original-price-before-discount - Stile für den ursprünglichen Preis vor dem Rabatt (standardmäßig mit Durchstreichung dekoriert)
• .shoply-product-discount-percent - Stile für den Text des Rabattprozentsatzes (standardmäßig als fetter roter Text angezeigt)

Stile für den Aktionsbutton:

• .shoply-product-action-button - Stile für die Hauptaktionsbuttons (Add to Cart, View Product usw.)
• .shoply-product-action-button-sold-out - Stile für den Aktionsbutton, wenn das Produkt ausverkauft ist (deaktivierter Zustand)

Hinweis: Im Abschnitt Customize AI Search der Admin Console der Shoply-App kannst du konfigurieren, was passiert, wenn Kund:innen auf den Aktionsbutton klicken – sie können das Produkt in den Warenkorb legen, zur Produktseite weitergeleitet werden oder du kannst den Aktionsbutton vollständig ausblenden.

AI-Summary-Klassen

• .shoply-ai-summary-box - Stile für den Container der KI-generierten Zusammenfassungen.
• .shoply-ai-summary-button - Stile für 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 gängige Anpassungen:

/* 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. Passe ihn so an, dass er zu deiner Marke passt:

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

Lass deine Preise mit benutzerdefiniertem Styling hervorstechen:

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

Deine Aktionsbuttons (Add to Cart, View Product) können passend zum Design deines Stores gestaltet werden:

/* 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 stylen

Verbessere deine Produktbilder mit Rahmen, Schatten oder Hover-Effekten:

/* 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 Stores, die AI Search aktivieren, 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.

Du kannst AI Summary auf der Seite Customize AI Search in der Admin Console der App deaktivieren. Du kannst ihr Erscheinungsbild auch mit CSS anpassen, wie unten gezeigt.

Das AI-Summary-Feld stylen

    /* 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 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. Du möchtest, dass er zu deiner Marke passt? Du kannst auch diesen Button anpassen! Schau dir die Beispiele unten an.

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

1. Auf Tippfehler prüfen: Stelle sicher, dass deine CSS-Klassennamen korrekt geschrieben sind (sie beginnen mit .shoply-)
2. Browser-Cache leeren: Manchmal speichern Browser alte Stile zwischen
3. CSS-Syntax prüfen: Stelle sicher, dass alle deine CSS-Regeln korrekt mit } geschlossen werden
4. !important verwenden: Wenn Stile nicht angewendet werden, musst du möglicherweise !important hinzufügen, um Standardstile zu überschreiben:
   css

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

Auf Mobilgeräten sehen Stile anders aus

Einige Stile benötigen möglicherweise gerätespezifische Anpassungen für Mobilgeräte. Verwende Media Queries:

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

Standardstile wiederherstellen

Leere einfach das CSS-Textfeld und speichere. Die App stellt dann das Standard-Styling wieder her.

Brauchst du weitere Hilfe?

Wenn du zusätzliche Unterstützung bei der CSS-Anpassung brauchst:

1. Sieh dir die visuellen Beispiele in den App-Einstellungen an (Product Card Preview und AI Summary Preview)
2. Nutze CSS-Dokumentationsquellen wie MDN Web Docs 
3. Kontaktiere unser Support-Team für persönliche Hilfe unter customer-obsession@shoplyai.ai

Viel Spaß beim Anpassen! 🎨

Mit diesen CSS-Klassen hast du die volle Kontrolle über das Erscheinungsbild deiner Suchergebnisse. Probiere aus, teste und erstelle ein Sucherlebnis, das perfekt zu deiner Marke passt!