Sådan tilpasser du dine søgeresultater med CSS

How to Customize Your Search Results with CSS

Klar til at få dine søgeresultater til at se fantastiske ud? Denne guide viser dig, hvordan du kan style dine produktsøgeresultater og AI-oversigtssektioner med CSS. Bare rolig, hvis du er ny til CSS — vi hjælper dig godt i gang! Og hvis du allerede er fortrolig med det, finder du masser af tips til at tage din tilpasning til næste niveau.

Kom godt i gang

Både Shoply AI Chat og AI Search kan vise søgeresultater, så de CSS-tilpasningsmuligheder, du tilføjer, gælder for begge. Bemærk: AI Summary-funktionen er kun tilgængelig i Shoply AI Search.

Hvor du tilføjer din CSS

For at skjule hele filterlinjen skal du bruge den indbyggede kontrol: gå til Customize AI Search → Search filters, slå Show filters in search results fra, og klik på Save. Der er ikke brug for CSS. Se Hide Search Filters for detaljer.

Gå til sektionen Customize AI Search i Shoply-appens admin-konsol.
Find tekstfeltet CSS styles for search elements
Indtast din brugerdefinerede CSS-kode i tekstfeltet
Klik på Save for at anvende dine ændringer

Grundlæggende om CSS

CSS giver dig mulighed for at ændre farver, skrifttyper, afstand, kanter og meget mere. Den grundlæggende syntaks er:

css


.class-name {
    property: value;
}

For eksempel, for at ændre tekstfarven til mørkerød:

css


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

Forstå de Shoply-specifikke CSS-klasser

Shoply stiller specifikke CSS-klasser til rådighed, som du kan bruge til at målrette forskellige dele af dine søgeresultater. Hver klasse svarer til et bestemt element i søgeresultatet.

Shoply har også defineret visse standardstile for disse klasser. Du kan inspicere disse stile med Chrome DevTools og søge efter hver af klasserne. Hvis du har brug for at tilsidesætte standardstilene, skal du tilføje erklæringen !important til dine CSS-regler som forklaret i MDN CSS !important documentation .

Produktkort-klasser

Customizing Product Cards in Search Results with CSS

Stile for containeren:

.shoply-product-image - Styler produktbilledet
.shoply-product-card - Styler produktkortets container

Stile for tekstinformation:

.shoply-product-brand - Styler produktets brand-/leverandørnavn, som vises over produkttitlen
.shoply-product-name - Styler produkttitlen/-navnet

Stile for pris:

.shoply-product-price - Styler produktprisen (efter rabatten er anvendt)
.shoply-product-original-price-before-discount - Styler den oprindelige pris før rabat (med gennemstregning som standard)
.shoply-product-discount-percent - Styler teksten for rabatprocenten (vises som standard som fed rød tekst)

Stile for handlingsknappen:

.shoply-product-action-button - Styler de primære handlingsknapper (Add to Cart, View Product osv.)
.shoply-product-action-button-sold-out - Styler handlingsknappen, når produktet er udsolgt (deaktiveret tilstand)

Bemærk: I sektionen Customize AI Search i Shoply-appens admin-konsol kan du konfigurere, hvad der sker, når kunder klikker på handlingsknappen — de kan lægge produktet i kurven, blive omdirigeret til produktsiden, eller du kan vælge helt at skjule handlingsknappen.

AI Summary-klasser

Customizing the AI Summary Section with CSS

.shoply-ai-summary-box - Styler containerboksen for AI-genererede oversigter.
.shoply-ai-summary-button - Styler knappen, der udløser generering af AI Summary.

Eksempler på tilpasning af produktkort i søgeresultater med CSS

Ændring af styling for produktbrand

Produktbrandet vises over produkttitlen. Her er nogle almindelige tilpasninger:

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

Tilpasning af produkttitel

Produktnavnet er et af de vigtigste elementer. Tilpas det, så det matcher dit brand:

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

Eksempler på styling af produktpriser

Få dine priser til at skille sig ud med brugerdefineret 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;
}

Tilpasning af handlingsknapper

Dine handlingsknapper (Add to Cart, View Product) kan styles, så de matcher din butiks 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;
}

Styling af produktbilleder

Forbedr dine produktbilleder med kanter, skygger eller hover-effekter:

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

Eksempler på tilpasning af AI Summary-sektionen

For butikker, der aktiverer AI Search, vises AI Summary øverst i søgeresultaterne og forklarer med det samme, hvad man skal købe og hvorfor baseret på søgeresultaterne — før kunderne overhovedet scroller gennem produkter.

Du kan deaktivere AI Summary på siden Customize AI Search i appens admin-konsol. Du kan også tilpasse udseendet med CSS som vist nedenfor.

Styling af AI Summary-boksen

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

Tilpasning af AI Summary-knappen

Som standard holdes AI Summary kort og præcis for at spare skærmplads. Kunder kan klikke på “AI Summary Button” for at udvide og se alle detaljer. Vil du have, at den matcher dit brand? Du kan også tilpasse denne knap! Se eksemplerne nedenfor.

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

Fejlfinding

Mine CSS-ændringer vises ikke

Tjek for tastefejl: Sørg for, at dine CSS-klassenavne er stavet korrekt (de starter med .shoply-)
Ryd din browsers cache: Nogle gange cacher browsere gamle stile
Tjek CSS-syntaks: Sørg for, at alle dine CSS-regler er korrekt afsluttet med }
Brug !important: Hvis stilene ikke anvendes, skal du muligvis tilføje !important for at tilsidesætte standardstile:
css
```
.shoply-product-action-button {
    background-color: #ff0000 !important;
}
```

Stile ser anderledes ud på mobil

Nogle stile kan have brug for mobil-specifikke justeringer. Brug media queries:

css


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

Har du brug for at nulstille til standardstile

Ryd blot CSS-tekstfeltet og gem. Appen vender tilbage til standardstyling.

Har du brug for mere hjælp?

Hvis du har brug for yderligere hjælp med CSS-tilpasning:

Se de visuelle eksempler i appens indstillinger (Product Card Preview og AI Summary Preview)
Se CSS-dokumentationsressourcer som MDN Web Docs
Kontakt vores supportteam for personlig hjælp på customer-obsession@shoplyai.ai

God fornøjelse med tilpasningen! 🎨

Med disse CSS-klasser har du fuld kontrol over udseendet af dine søgeresultater. Eksperimentér, test, og skab en søgeoplevelse, der passer perfekt til dit brand!