Hoe AI Search uiterlijk aan te passen

Er zijn twee manieren om je Shoply AI-zoekresultaten aan te passen:

• Ingebouwde opties: Begin met de bedieningselementen in je Shoply AI Admin Console om samenvattingen, filters, knoppen, kleuren en productlay-out te wijzigen zonder code te schrijven. Bekijk de ingebouwde opties en voorbeelden.
• Aangepaste CSS: Als deze bedieningselementen je niet het gewenste ontwerp geven, gebruik dan CSS—de opmaaktaal voor webpagina’s—om lettertypen, tussenruimte, randen en andere visuele details fijn af te stemmen. Je kunt dit naast de ingebouwde instellingen gebruiken. Ga naar de CSS-handleiding.

Je hebt waarschijnlijk helemaal geen CSS nodig

De meeste wijzigingen aan de zoeklay-out en het uiterlijk zijn al beschikbaar onder Customize AI Search in je Shoply AI Admin Console, of je nu Shopify of een ander websiteplatform gebruikt. Probeer eerst deze ingebouwde opties en klik daarna op Save in de admin om je keuzes toe te passen. Gebruik CSS voor opmaak die deze bedieningselementen niet dekken.

De interactieve voorbeelden hieronder gebruiken dezelfde previews als de admin. Het zijn illustraties die je hier kunt uitproberen; ze veranderen je winkel niet.

• AI Summary: Zet de samenvatting aan of uit en kies of deze boven of onder de productresultaten verschijnt.

• Zoekfilters: Toon of verberg de filterbalk en plaats filters bovenaan, links of in een zwevend paneel. De linkerlay-out verschuift op kleinere schermen boven de resultaten. Zie instellingen voor zichtbaarheid van zoekfilters voor het gedeelde effect op chatresultaten.

• Productactieknoppen en kleuren: Kies Add to Cart, View Product of No Button. Kies de achtergrond- en tekstkleur van de knop en wijzig de kleur van de beoordelingssterren zodat die bij je winkel past.

• Producten per rij: Kies drie of vier kolommen op desktop en één of twee kolommen op mobiel. Minder kolommen geven elke productafbeelding meer ruimte.

• Totaal aantal weergegeven producten: Stel afzonderlijke productaantallen in voor kleine mobiele schermen, grotere mobiele schermen en desktop. De admin biedt 3, 4, 6, 8, 9, 12, 15, 16, 18 of 20 producten. Dit bepaalt het aantal resultaten, niet het aantal kolommen.

Als je nog steeds een aangepast ontwerp nodig hebt, ga dan verder met de CSS-handleiding hieronder.

Aan de slag

Als de ingebouwde opties je niet het uiterlijk geven dat je wilt, gebruik dan aangepaste CSS om je zoekresultaten nauwkeuriger af te stemmen.

Zowel Shoply AI Chat als AI Search kunnen zoekresultaten weergeven, dus de CSS-aanpassingsopties die je toevoegt, zijn op beide van toepassing. Let op: de functie AI Summary is alleen beschikbaar in Shoply AI Search.

Schakel eerst AI Search in voordat je het opmaakt, zodat je wijzigingen kunt bekijken op echte resultaten.

Waar je je CSS toevoegt

Om de volledige filterbalk te verbergen, gebruik je de ingebouwde instelling: ga naar Customize AI Search → Search filters, zet Show filters in search results uit en klik op Save. Er is geen CSS nodig. Zie Hide Search Filters  voor details.

1. Navigeer naar het gedeelte Customize AI Search in de admin console van de Shoply-app.
2. Zoek het tekstvak CSS styles for search elements
3. Voer je aangepaste CSS-code in het tekstvak in
4. Klik op Save om je wijzigingen toe te passen

CSS-basisprincipes

Met CSS kun je kleuren, lettertypen, tussenruimte, randen en meer wijzigen. De basissyntaxis is:

.class-name {
    property: value;
}

Bijvoorbeeld, om de tekstkleur naar donkerrood te veranderen:

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

De Shoply-specifieke CSS-klassen begrijpen

Shoply biedt specifieke CSS-klassen die je kunt gebruiken om verschillende onderdelen van je zoekresultaten te targeten. Elke klasse komt overeen met een specifiek element in het zoekresultaat.

Shoply heeft ook bepaalde standaardstijlen voor deze klassen gedefinieerd. Je kunt die stijlen inspecteren met Chrome DevTools  en zoeken naar elke klasse. Als je de standaardstijlen moet overschrijven, voeg dan de declaratie !important toe aan je CSS-regels zoals uitgelegd in de MDN CSS !important-documentatie .

Productkaart-klassen

Stijlen voor de container:

• .shoply-product-image - Geeft stijl aan de productafbeelding
• .shoply-product-card - Geeft stijl aan de container van de productkaart

Stijlen voor de tekstinformatie:

• .shoply-product-brand - Geeft stijl aan de productmerk-/leveranciersnaam die boven de producttitel wordt weergegeven
• .shoply-product-name - Geeft stijl aan de producttitel/-naam

Stijlen voor de prijs:

• .shoply-product-price - Geeft stijl aan de productprijs (nadat de korting is toegepast)
• .shoply-product-original-price-before-discount - Geeft stijl aan de oorspronkelijke prijs vóór korting (standaard met doorgestreepte opmaak)
• .shoply-product-discount-percent - Geeft stijl aan de tekst van het kortingspercentage (standaard weergegeven als vetgedrukte rode tekst)

Stijlen voor de actieknop:

• .shoply-product-action-button - Geeft stijl aan de hoofdactieknoppen (Add to Cart, View Product, enz.)
• .shoply-product-action-button-sold-out - Geeft stijl aan de actieknop wanneer een product is uitverkocht (uitgeschakelde status)

Opmerking: In het gedeelte Customize AI Search van de admin console van de Shoply-app kun je instellen wat er gebeurt wanneer klanten op de actieknop klikken—ze kunnen het product aan de winkelwagen toevoegen, worden doorgestuurd naar de productpagina, of je kunt ervoor kiezen de actieknop volledig te verbergen.

AI Summary-klassen

• .shoply-ai-summary-box - Geeft stijl aan het containervak voor door AI gegenereerde samenvattingen.
• .shoply-ai-summary-button - Geeft stijl aan de knop die het genereren van AI-samenvattingen activeert.

Voorbeelden voor het aanpassen van productkaarten in zoekresultaten met CSS

De stijl van het productmerk wijzigen

Het productmerk verschijnt boven de producttitel. Hier zijn enkele veelvoorkomende aanpassingen:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Producttitel aanpassen

De productnaam is een van de belangrijkste elementen. Pas deze aan zodat hij bij je merk past:

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

Voorbeelden voor het opmaken van productprijzen

Laat je prijzen opvallen met aangepaste opmaak:

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

Actieknoppen aanpassen

Je actieknoppen (Add to Cart, View Product) kunnen worden opgemaakt zodat ze bij het ontwerp van je winkel passen:

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

Productafbeeldingen opmaken

Verbeter je productafbeeldingen met randen, schaduwen of hover-effecten:

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

Voorbeelden voor het aanpassen van de AI Summary-sectie

Voor winkels die AI Search inschakelen, verschijnt AI Summary bovenaan de zoekresultaten en legt direct uit wat je moet kopen en waarom op basis van de zoekresultaten — nog voordat klanten door producten scrollen.

Je kunt AI Summary uitschakelen op de pagina Customize AI Search in de admin console van de app. Je kunt ook het uiterlijk aanpassen met CSS zoals hieronder getoond.

Het AI Summary-vak opmaken

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

De AI Summary-knop aanpassen

Standaard wordt AI Summary kort en bondig gehouden om schermruimte te besparen. Klanten kunnen op de “AI Summary Button” klikken om uit te klappen en alle details te bekijken. Wil je dat deze bij je merk past? Je kunt deze knop ook aanpassen! Bekijk de voorbeelden hieronder.

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

Probleemoplossing

Mijn CSS-wijzigingen worden niet weergegeven

1. Controleer op typefouten: Zorg ervoor dat je CSS-klassenamen correct zijn gespeld (ze beginnen met .shoply-)
2. Wis de cache van je browser: Soms cachen browsers oude stijlen
3. Controleer de CSS-syntaxis: Zorg ervoor dat al je CSS-regels correct worden afgesloten met }
4. Gebruik !important: Als stijlen niet worden toegepast, moet je mogelijk !important toevoegen om standaardstijlen te overschrijven:
   css

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

Stijlen zien er anders uit op mobiel

Sommige stijlen hebben mogelijk mobiele-specifieke aanpassingen nodig. Gebruik media queries:

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

Terug naar de standaardstijlen

Maak simpelweg het CSS-tekstvak leeg en sla op. De app keert dan terug naar de standaardopmaak.

Meer hulp nodig?

Als je extra hulp nodig hebt bij CSS-aanpassingen:

1. Bekijk de visuele voorbeelden in de app-instellingen (Product Card Preview en AI Summary Preview)
2. Raadpleeg CSS-documentatiebronnen zoals MDN Web Docs 
3. Neem contact op met ons supportteam voor persoonlijke hulp via customer-obsession@shoplyai.ai

Veel plezier met aanpassen! 🎨

Met deze CSS-klassen heb je volledige controle over het uiterlijk van je zoekresultaten. Experimenteer, test en creëer een zoekervaring die perfect bij je merk past!