Sådan tilpasser du AI Search udseendet

Der er to måder at tilpasse dine Shoply AI-søgeresultater på:

• Indbyggede muligheder: Start med kontrollerne i din Shoply AI Admin Console for at ændre resuméer, filtre, knapper, farver og produktlayout uden at skrive kode. Udforsk de indbyggede muligheder og forhåndsvisninger.
• Tilpasset CSS: Hvis disse kontroller ikke giver dig det design, du ønsker, kan du bruge CSS — websidernes stylingssprog — til at finjustere skrifttyper, afstande, rammer og andre visuelle detaljer. Du kan bruge det sammen med de indbyggede indstillinger. Gå til CSS-guiden.

Du har sandsynligvis slet ikke brug for CSS

De fleste ændringer af søgelayout og udseende er allerede tilgængelige under Customize AI Search i din Shoply AI Admin Console, uanset om du bruger Shopify eller en anden websiteplatform. Prøv først disse indbyggede muligheder, og klik derefter på Save i admin for at anvende dine valg. Brug CSS til styling, som disse kontroller ikke dækker.

De interaktive eksempler nedenfor bruger de samme forhåndsvisninger som i admin. De er illustrationer, du kan prøve her; de ændrer ikke din butik.

• AI Summary: Slå resuméet til eller fra, og vælg om det skal vises over eller under produktresultaterne.

• Søgefiltre: Vis eller skjul filterlinjen, og placér filtre øverst, til venstre eller i et flydende panel. Layoutet til venstre flyttes over resultaterne på mindre skærme. Se indstillinger for synlighed af søgefiltre for den fælles effekt på chatresultater.

• Produkt-handlingsknapper og farver: Vælg Add to Cart, View Product eller No Button. Vælg knappens baggrunds- og tekstfarver, og skift farven på vurderingsstjernerne, så de matcher din butik.

• Produkter pr. række: Vælg tre eller fire kolonner på desktop og én eller to kolonner på mobil. Færre kolonner giver hvert produktbillede mere plads.

• Samlet antal viste produkter: Indstil separate produktantal for små mobilskærme, større mobilskærme og desktop. Admin tilbyder 3, 4, 6, 8, 9, 12, 15, 16, 18 eller 20 produkter. Dette styrer antallet af resultater frem for antallet af kolonner.

Hvis du stadig har brug for et tilpasset design, så fortsæt med CSS-guiden nedenfor.

Kom godt i gang

Hvis de indbyggede muligheder ikke giver dig det udseende, du ønsker, kan du bruge tilpasset CSS til at finjustere dine søgeresultater.

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

Først skal du aktivere AI Search, før du styler den, så du kan forhåndsvise ændringer på rigtige resultater.

Hvor du tilføjer din CSS

Hvis du vil 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.

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

Grundlæggende CSS

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

.class-name {
    property: value;
}

For eksempel, hvis du vil ændre tekstfarven til mørkerød:

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

Forståelse af 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 stilarter med Chrome DevTools  og søge efter hver enkelt klasse. Hvis du har brug for at tilsidesætte standardstilarterne, skal du tilføje deklarationen !important til dine CSS-regler, som forklaret i MDN CSS !important-dokumentationen .

Klasser til produktkort

Stilarter for containeren:

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

Stilarter for tekstinformationen:

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

Stilarter for pris:

• .shoply-product-price - Styler produktprisen (efter at 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)

Stilarter 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 at skjule handlingsknappen helt.

Klasser til AI Summary

• .shoply-ai-summary-box - Styler containerboksen til AI-genererede resuméer.
• .shoply-ai-summary-button - Styler knappen, der udløser generering af AI-resumé.

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

Ændring af styling for produktbrand

Produktbrandet vises over produkttitlen. Her er nogle almindelige tilpasninger:

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

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

Tilpasning af handlingsknapper

Dine handlingsknapper (Add to Cart, View Product) kan styles, så de matcher din butiks design:

/* 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 rammer, skygger eller hover-effekter:

/* 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 bør købe og hvorfor baseret på søgeresultaterne — før kunderne overhovedet scroller gennem produkterne.

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

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

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

1. Tjek for tastefejl: Sørg for, at dine CSS-klassenavne er stavet korrekt (de starter med .shoply-)
2. Ryd din browsers cache: Nogle gange cacher browsere gamle stilarter
3. Tjek CSS-syntaksen: Sørg for, at alle dine CSS-regler er korrekt afsluttet med }
4. Brug !important: Hvis stilarterne ikke anvendes, kan det være nødvendigt at tilføje !important for at tilsidesætte standardstilarter:
   css

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

Stilarter ser anderledes ud på mobil

Nogle stilarter kan have brug for mobilspecifikke justeringer. Brug media queries:

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

Har du brug for at nulstille til standardstilarter

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

Brug for mere hjælp?

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

1. Tjek de visuelle eksempler i appindstillingerne (Product Card Preview og AI Summary Preview)
2. Se CSS-dokumentationsressourcer som MDN Web Docs 
3. 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!