Hoe u uw zoekresultaten kunt aanpassen met CSS
Klaar om uw zoekresultaten er geweldig uit te laten zien? Deze gids laat u zien hoe u uw productzoekresultaten en AI-samenvattingssecties kunt stylen met CSS. Geen zorgen als u nieuw bent met CSS—we helpen u op weg! En als u er al vertrouwd mee bent, vindt u genoeg tips om uw aanpassingen naar een hoger niveau te tillen.
Aan de slag
Zowel Shoply AI Chat als AI Search kunnen zoekresultaten weergeven, dus de CSS-aanpassingsopties die u toevoegt, zijn van toepassing op beide. Opmerking: de functie AI Summary is alleen beschikbaar in Shoply AI Search.
Waar u uw CSS toevoegt
Om de volledige filterbalk te verbergen, gebruikt u de ingebouwde instelling: ga naar Customize AI Search → Search filters, schakel Show filters in search results uit en klik op Save. Er is geen CSS nodig. Zie Hide Search Filters voor meer informatie.
- Navigeer naar de sectie Customize AI Search in de beheerconsole van de Shoply-app.
- Zoek het tekstvak CSS styles for search elements
- Voer uw aangepaste CSS-code in het tekstvak in
- Klik op Save om uw wijzigingen toe te passen
CSS-basisprincipes
Met CSS kunt u kleuren, lettertypen, afstand, randen en meer wijzigen. De basissyntaxis is:
.class-name {
property: value;
}Bijvoorbeeld, om de tekstkleur te veranderen naar donkerrood:
.shoply-product-name {
color:rgb(82, 2, 2);
}De Shoply-specifieke CSS-klassen begrijpen
Shoply biedt specifieke CSS-klassen die u kunt gebruiken om verschillende onderdelen van uw zoekresultaten te targeten. Elke klasse komt overeen met een specifiek element in het zoekresultaat.
Shoply heeft ook bepaalde standaardstijlen voor deze klassen gedefinieerd. U kunt deze stijlen inspecteren met Chrome DevTools en zoeken op elke klasse. Als u de standaardstijlen moet overschrijven, voegt u de declaratie !important toe aan uw CSS-regels zoals uitgelegd in de MDN CSS !important-documentatie .
Productkaart-klassen
Stijlen voor de container:
.shoply-product-image- Stijlt de productafbeelding.shoply-product-card- Stijlt de container van de productkaart
Stijlen voor de tekstinformatie:
.shoply-product-brand- Stijlt de merk-/leveranciersnaam van het product die boven de producttitel wordt weergegeven.shoply-product-name- Stijlt de producttitel/-naam
Stijlen voor de prijs:
.shoply-product-price- Stijlt de productprijs (nadat de korting is toegepast).shoply-product-original-price-before-discount- Stijlt de oorspronkelijke prijs vóór korting (standaard met doorhaling).shoply-product-discount-percent- Stijlt de tekst van het kortingspercentage (standaard weergegeven als vetgedrukte rode tekst)
Stijlen voor de actieknop:
.shoply-product-action-button- Stijlt de belangrijkste actieknoppen (Add to Cart, View Product, enz.).shoply-product-action-button-sold-out- Stijlt de actieknop wanneer het product is uitverkocht (uitgeschakelde status)
Opmerking: In de sectie Customize AI Search van de beheerconsole van de Shoply-app kunt u configureren wat er gebeurt wanneer klanten op de actieknop klikken—ze kunnen het product aan de winkelwagen toevoegen, worden doorgestuurd naar de productpagina, of u kunt ervoor kiezen de actieknop volledig te verbergen.
AI Summary-klassen
.shoply-ai-summary-box- Stijlt het containervak voor door AI gegenereerde samenvattingen..shoply-ai-summary-button- Stijlt de knop die het genereren van een AI-samenvatting activeert.
Voorbeelden voor het aanpassen van productkaarten in zoekresultaten met CSS
De styling 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 deze bij uw 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 stylen van productprijzen
Laat uw prijzen opvallen met aangepaste styling:
/* 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
Uw actieknoppen (Add to Cart, View Product) kunnen worden gestyled zodat ze overeenkomen met het ontwerp van uw winkel:
/* 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 stylen
Verbeter uw 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-samenvattingssectie
Voor winkels die AI Search inschakelen, verschijnt AI Summary bovenaan de zoekresultaten en legt deze direct uit wat u moet kopen en waarom op basis van de zoekresultaten — nog voordat klanten door producten scrollen.
U kunt AI Summary uitschakelen op de pagina Customize AI Search in de beheerconsole van de app. U kunt het uiterlijk ook aanpassen met CSS zoals hieronder weergegeven.
Het AI Summary-vak 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);
}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. Wilt u dat deze bij uw merk past? U kunt deze knop ook aanpassen! Bekijk de onderstaande voorbeelden.
/* 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);
}Problemen oplossen
Mijn CSS-wijzigingen worden niet weergegeven
- Controleer op typefouten: Zorg ervoor dat uw CSS-klassenamen correct gespeld zijn (ze beginnen met
.shoply-) - Wis uw browsercache: Soms slaan browsers oude stijlen op in de cache
- Controleer de CSS-syntaxis: Zorg ervoor dat al uw CSS-regels correct worden afgesloten met
} - Gebruik
!important: Als stijlen niet worden toegepast, moet u mogelijk!importanttoevoegen 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;
}
}Moet u terugzetten naar de standaardstijlen
Leeg eenvoudig het CSS-tekstvak en sla op. De app keert terug naar de standaardstyling.
Meer hulp nodig?
Als u extra hulp nodig hebt bij CSS-aanpassingen:
- Bekijk de visuele voorbeelden in de app-instellingen (Product Card Preview en AI Summary Preview)
- Raadpleeg CSS-documentatiebronnen zoals MDN Web Docs
- Neem contact op met ons ondersteuningsteam voor persoonlijke hulp via customer-obsession@shoplyai.ai
Veel plezier met aanpassen! 🎨
Met deze CSS-klassen hebt u volledige controle over het uiterlijk van uw zoekresultaten. Experimenteer, test en creëer een zoekervaring die perfect bij uw merk past!