Hvordan tilpasse AI Search utseendet

Det finnes to måter å tilpasse søkeresultatene i Shoply AI på:

• Innebygde alternativer: Start med kontrollene i Shoply AI Admin Console for å endre sammendrag, filtre, knapper, farger og produktoppsett uten å skrive kode. Utforsk de innebygde alternativene og forhåndsvisningene.
• Egendefinert CSS: Hvis disse kontrollene ikke gir deg designet du ønsker, kan du bruke CSS—stilingsspråket for nettsider—for å finjustere skrifttyper, avstand, rammer og andre visuelle detaljer. Du kan bruke det sammen med de innebygde innstillingene. Gå til CSS-veiledningen.

Du trenger sannsynligvis ikke CSS i det hele tatt

De fleste endringer i søkeoppsett og utseende er allerede tilgjengelige under Customize AI Search i Shoply AI Admin Console, enten du bruker Shopify eller en annen nettsideplattform. Prøv disse innebygde alternativene først, og klikk deretter Save i admin for å bruke valgene dine. Bruk CSS for styling som disse kontrollene ikke dekker.

De interaktive eksemplene nedenfor bruker de samme forhåndsvisningene som i admin. De er illustrasjoner du kan prøve her; de endrer ikke butikken din.

• AI Summary: Slå sammendraget av eller på, og velg om det skal vises over eller under produktresultatene.

• Search filters: Vis eller skjul filterlinjen, og plasser filtre øverst, til venstre eller i et flytende panel. Oppsettet til venstre flyttes over resultatene på mindre skjermer. Se search filter visibility settings for den delte effekten på chatresultater.

• Product action buttons and colors: Velg Add to Cart, View Product eller No Button. Velg knappens bakgrunns- og tekstfarger, og endre fargen på vurderingsstjernene slik at den passer til butikken din.

• Products per row: Velg tre eller fire kolonner på desktop, og én eller to kolonner på mobil. Færre kolonner gir hvert produktbilde mer plass.

• Total products displayed: Angi separate produktantall for små mobilskjermer, større mobilskjermer og desktop. Admin tilbyr 3, 4, 6, 8, 9, 12, 15, 16, 18 eller 20 produkter. Dette styrer antall resultater, ikke antall kolonner.

Hvis du fortsatt trenger et egendefinert design, fortsett med CSS-veiledningen nedenfor.

Kom i gang

Hvis de innebygde alternativene ikke gir deg utseendet du ønsker, kan du bruke egendefinert CSS for å finjustere søkeresultatene dine.

Både Shoply AI Chat og AI Search kan vise søkeresultater, så CSS-tilpasningene du legger til vil gjelde for begge. Merk: AI Summary-funksjonen er bare tilgjengelig i Shoply AI Search.

Først må du aktivere AI Search før du styler det, slik at du kan forhåndsvise endringer på ekte resultater.

Hvor du legger til CSS-en din

For å skjule hele filterlinjen, bruk den innebygde kontrollen: gå til Customize AI Search → Search filters, slå av Show filters in search results, og klikk Save. Ingen CSS er nødvendig. Se Hide Search Filters  for detaljer.

1. Gå til delen Customize AI Search i administratorkonsollen for Shoply-appen.
2. Finn tekstfeltet CSS styles for search elements
3. Skriv inn den egendefinerte CSS-koden din i tekstfeltet
4. Klikk Save for å bruke endringene dine

Grunnleggende CSS

CSS lar deg endre farger, skrifttyper, avstand, rammer og mer. Den grunnleggende syntaksen er:

.class-name {
    property: value;
}

For eksempel, for å endre tekstfargen til mørkerød:

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

Forstå de Shoply-spesifikke CSS-klassene

Shoply tilbyr spesifikke CSS-klasser som du kan bruke for å målrette ulike deler av søkeresultatene dine. Hver klasse tilsvarer et bestemt element i søkeresultatet.

Shoply har også definert enkelte standardstiler for disse klassene. Du kan inspisere disse stilene med Chrome DevTools  og søke etter hver klasse. Hvis du trenger å overstyre standardstilene, kan du legge til deklarasjonen !important i CSS-reglene dine, slik det er forklart i MDN CSS !important documentation .

Klasser for produktkort

Stiler for beholderen:

• .shoply-product-image - Stiler produktbildet
• .shoply-product-card - Stiler beholderen for produktkortet

Stiler for tekstinformasjonen:

• .shoply-product-brand - Stiler produktets merke-/leverandørnavn som vises over produkttittelen
• .shoply-product-name - Stiler produkttittelen/-navnet

Stiler for pris:

• .shoply-product-price - Stiler produktprisen (etter at rabatten er brukt)
• .shoply-product-original-price-before-discount - Stiler opprinnelig pris før rabatt (med gjennomstreking som standard)
• .shoply-product-discount-percent - Stiler teksten for rabattprosent (vises som standard som fet rød tekst)

Stiler for handlingsknappen:

• .shoply-product-action-button - Stiler de viktigste handlingsknappene (Add to Cart, View Product osv.)
• .shoply-product-action-button-sold-out - Stiler handlingsknappen når produktet er utsolgt (deaktivert tilstand)

Merk: I delen Customize AI Search i administratorkonsollen for Shoply-appen kan du konfigurere hva som skjer når kunder klikker på handlingsknappen—de kan legge produktet i handlekurven, bli sendt videre til produktsiden, eller du kan velge å skjule handlingsknappen helt.

AI Summary-klasser

• .shoply-ai-summary-box - Stiler beholderboksen for AI-genererte sammendrag.
• .shoply-ai-summary-button - Stiler knappen som utløser generering av AI-sammendrag.

Eksempler på tilpasning av produktkort i søkeresultater med CSS

Endre styling for produktmerke

Produktmerket vises over produkttittelen. Her er noen vanlige 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;
}

Tilpasse produkttittel

Produktnavnet er et av de viktigste elementene. Tilpass det slik at det passer til merkevaren din:

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

Få prisene dine til å skille seg ut med egendefinert 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;
}

Tilpasse handlingsknapper

Handlingsknappene dine (Add to Cart, View Product) kan styles slik at de passer til butikkens 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 av produktbilder

Forbedre produktbildene dine 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 av AI Summary-seksjonen

For butikker som aktiverer AI Search, vil AI Summary vises øverst i søkeresultatene og umiddelbart forklare hva man bør kjøpe og hvorfor, basert på søkeresultatene — før kundene i det hele tatt blar gjennom produktene.

Du kan deaktivere AI Summary på siden Customize AI Search i appens administratorkonsoll. Du kan også tilpasse utseendet med CSS som vist nedenfor.

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

Tilpasse AI Summary-knappen

Som standard holdes AI Summary kort og konsist for å spare skjermplass. Kunder kan klikke på “AI Summary Button” for å utvide og se alle detaljene. Vil du at den skal passe til merkevaren din? Du kan tilpasse denne knappen også! Se eksemplene 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);
}

Feilsøking

CSS-endringene mine vises ikke

1. Se etter skrivefeil: Sørg for at CSS-klassenavnene dine er stavet riktig (de begynner med .shoply-)
2. Tøm nettleserbufferen: Noen ganger cacher nettlesere gamle stiler
3. Sjekk CSS-syntaksen: Sørg for at alle CSS-reglene er korrekt avsluttet med }
4. Bruk !important: Hvis stilene ikke brukes, kan det hende du må legge til !important for å overstyre standardstilene:
   css

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

Stilene ser annerledes ut på mobil

Noen stiler kan trenge mobilspesifikke justeringer. Bruk media queries:

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

Trenger du å tilbakestille til standardstiler

Bare tøm CSS-tekstfeltet og lagre. Appen vil gå tilbake til standardstyling.

Trenger du mer hjelp?

Hvis du trenger mer hjelp med CSS-tilpasning:

1. Sjekk de visuelle eksemplene i appinnstillingene (Product Card Preview og AI Summary Preview)
2. Se CSS-dokumentasjonsressurser som MDN Web Docs 
3. Kontakt supportteamet vårt for personlig hjelp på customer-obsession@shoplyai.ai

Lykke til med tilpasningen! 🎨

Med disse CSS-klassene har du full kontroll over utseendet på søkeresultatene dine. Eksperimenter, test og skap en søkeopplevelse som passer perfekt til merkevaren din!