Så anpassar du dina sökresultat med CSS

How to Customize Your Search Results with CSS

Redo att få dina sökresultat att se fantastiska ut? Den här guiden visar dig hur du kan styla dina produktsökresultat och AI-sammanfattningssektioner med CSS. Ingen fara om du är nybörjare på CSS — vi hjälper dig! Och om du redan känner dig bekväm med det hittar du massor av tips för att ta din anpassning till nästa nivå.

Kom igång

Både Shoply AI Chat och AI Search kan visa sökresultat, så de CSS-anpassningar du lägger till kommer att gälla för båda. Obs: Funktionen AI Summary är endast tillgänglig i Shoply AI Search.

Var du lägger till din CSS

För att dölja hela filterfältet använder du den inbyggda kontrollen: gå till Customize AI Search → Search filters, stäng av Show filters in search results och klicka på Save. Ingen CSS behövs. Se Hide Search Filters för mer information.

Gå till avsnittet Customize AI Search i Shoply-appens administratörskonsol.
Hitta textfältet CSS styles for search elements
Ange din anpassade CSS-kod i textfältet
Klicka på Save för att tillämpa dina ändringar

Grunderna i CSS

CSS låter dig ändra färger, typsnitt, mellanrum, ramar och mycket mer. Den grundläggande syntaxen är:

css


.class-name {
    property: value;
}

Till exempel, för att ändra textfärgen till mörkröd:

css


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

Förstå de Shoply-specifika CSS-klasserna

Shoply tillhandahåller specifika CSS-klasser som du kan använda för att rikta in dig på olika delar av dina sökresultat. Varje klass motsvarar ett specifikt element i sökresultatet.

Shoply har också definierat vissa standardstilar för dessa klasser. Du kan inspektera dessa stilar med Chrome DevTools och söka efter var och en av klasserna. Om du behöver åsidosätta standardstilarna lägger du till deklarationen !important i dina CSS-regler, som förklaras i MDN CSS !important documentation .

Klasser för produktkort

Customizing Product Cards in Search Results with CSS

Stilar för behållaren:

.shoply-product-image - Stylar produktbilden
.shoply-product-card - Stylar produktkortets behållare

Stilar för textinformationen:

.shoply-product-brand - Stylar produktens varumärke/leverantörsnamn som visas ovanför produkttiteln
.shoply-product-name - Stylar produkttiteln/-namnet

Stilar för pris:

.shoply-product-price - Stylar produktpriset (efter att rabatten har tillämpats)
.shoply-product-original-price-before-discount - Stylar det ursprungliga priset före rabatt (med genomstrykning som standard)
.shoply-product-discount-percent - Stylar texten för rabattprocenten (visas som fet röd text som standard)

Stilar för åtgärdsknappen:

.shoply-product-action-button - Stylar de huvudsakliga åtgärdsknapparna (Add to Cart, View Product osv.)
.shoply-product-action-button-sold-out - Stylar åtgärdsknappen när produkten är slutsåld (inaktiverat läge)

Obs: I avsnittet Customize AI Search i Shoply-appens administratörskonsol kan du konfigurera vad som ska hända när kunder klickar på åtgärdsknappen — de kan lägga till produkten i kundvagnen, omdirigeras till produktsidan, eller så kan du välja att dölja åtgärdsknappen helt.

Klasser för AI Summary

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Stylar behållarrutan för AI-genererade sammanfattningar.
.shoply-ai-summary-button - Stylar knappen som utlöser generering av AI-sammanfattning.

Exempel på att anpassa produktkort i sökresultat med CSS

Ändra stilen för produktvarumärke

Produktvarumärket visas ovanför produkttiteln. Här är några vanliga anpassningar:

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

Anpassa produkttiteln

Produktnamnet är ett av de viktigaste elementen. Anpassa det så att det matchar ditt varumärke:

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

Exempel på styling av produktpriser

Få dina priser att sticka ut med anpassad styling:

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

Anpassa åtgärdsknappar

Dina åtgärdsknappar (Add to Cart, View Product) kan stylas så att de matchar butikens design:

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

Styla produktbilder

Förbättra dina produktbilder med ramar, skuggor eller hovringseffekter:

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

Exempel på att anpassa AI-sammanfattningssektionen

För butiker som aktiverar AI Search visas AI Summary högst upp i sökresultaten och förklarar direkt vad man bör köpa och varför, baserat på sökresultaten — innan kunderna ens börjar skrolla bland produkter.

Du kan inaktivera AI Summary på sidan Customize AI Search i appens administratörskonsol. Du kan också anpassa dess utseende med CSS som visas nedan.

Styla rutan för AI Summary

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

Anpassa knappen för AI Summary

Som standard hålls AI Summary kort och koncis för att spara skärmutrymme. Kunder kan klicka på “AI Summary Button” för att expandera och se alla detaljer. Vill du få den att matcha ditt varumärke? Du kan anpassa den här knappen också! Ta en titt på exemplen nedan.

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

Felsökning

Mina CSS-ändringar visas inte

Kontrollera stavfel: Se till att dina CSS-klassnamn är korrekt stavade (de börjar med .shoply-)
Rensa webbläsarens cache: Ibland cachelagrar webbläsare gamla stilar
Kontrollera CSS-syntaxen: Se till att alla dina CSS-regler avslutas korrekt med }
Använd !important: Om stilarna inte tillämpas kan du behöva lägga till !important för att åsidosätta standardstilar:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Stilar ser annorlunda ut på mobil

Vissa stilar kan behöva mobilanpassade justeringar. Använd media queries:

css


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

Behöver du återställa till standardstilar

Rensa helt enkelt CSS-textfältet och spara. Appen återgår då till standardstyling.

Behöver du mer hjälp?

Om du behöver ytterligare hjälp med CSS-anpassning:

Kolla de visuella exemplen i appinställningarna (Product Card Preview och AI Summary Preview)
Se CSS-dokumentationsresurser som MDN Web Docs
Kontakta vårt supportteam för personlig hjälp på customer-obsession@shoplyai.ai

Lycka till med anpassningen! 🎨

Med dessa CSS-klasser har du full kontroll över hur dina sökresultat ser ut. Experimentera, testa och skapa en sökupplevelse som passar ditt varumärke perfekt!