Slik tilpasser du søkeresultatene med CSS

Klar til å få søkeresultatene dine til å se fantastiske ut? Denne veiledningen viser deg hvordan du kan utforme produktsøkeresultatene og AI Summary-delene med CSS. Det går helt fint om du er ny på CSS – vi hjelper deg gjennom det! Hvis du allerede er komfortabel med CSS, finner du mange tips for å ta tilpasningen til neste nivå.

Kom i gang

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

Hvor du legger til CSS

Gå til delen Customize AI Search i administrasjonskonsollen i Shoply-appen.
Finn tekstområdet CSS styles for search elements
Skriv inn den egendefinerte CSS-koden din i tekstområdet
Klikk på Save for å bruke endringene

Grunnleggende om CSS

Med CSS kan du endre farger, skrifter, avstand, kanter og mye mer. Den grunnleggende syntaksen er:

css


.class-name {
    property: value;
}

For eksempel, slik endrer du tekstfargen til mørkerød:

css


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

Forstå de Shoply-spesifikke CSS-klassene

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

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

Klasser for produktkort

Tilpasse produktkort i søkeresultater med CSS

Stiler for beholderen:

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

Stiler for tekstinformasjonen:

.shoply-product-brand – Stiler merkenavnet-/leverandørnavnet for produktet som vises over produkttittelen
.shoply-product-name – Stiler produkttittelen/-navnet

Stiler for pris:

.shoply-product-price – Stiler produktprisen (etter at rabatten er trukket fra)
.shoply-product-original-price-before-discount – Stiler den opprinnelige prisen før rabatt (med gjennomstreking som standard)
.shoply-product-discount-percent – Stiler teksten for rabattprosenten (vises som fet rød tekst som standard)

Stiler for handlingsknappen:

.shoply-product-action-button – Stiler hovedknappene for handlinger (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 administrasjonskonsollen i Shoply-appen kan du konfigurere hva som skjer når kundene klikker på handlingsknappen – de kan legge produktet i handlekurven, bli videresendt til produktsiden, eller du kan velge å skjule handlingsknappen helt.

Klasser for AI Summary

.shoply-ai-summary-box – Stiler beholderboksen for AI-genererte sammendrag.
.shoply-ai-summary-button – Stiler knappen som starter genereringen av AI-sammendraget.

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

Endre utformingen av produktmerket

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

Tilpasse produkttittelen

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

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å utforming av produktpriser

Få prisene dine til å skille seg ut med egendefinert utforming:

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

Tilpasse handlingsknapper

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

Utforme produktbilder

Gjør produktbildene mer fremtredende med kanter, skygger eller sveveeffekter:

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 av AI Summary-delen

For butikker som aktiverer AI Search, vises AI Summary øverst i søkeresultatene og forklarer umiddelbart hva kundene 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 administrasjonskonsollen i appen. Du kan også tilpasse utseendet ved hjelp av CSS, slik eksemplene nedenfor viser.

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

Tilpasse AI Summary-knappen

Som standard holdes AI Summary kort og konsist for å spare plass på skjermen. Kundene 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.

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

Feilsøking

CSS-endringene mine vises ikke

Se etter skrivefeil: Kontroller at CSS-klassenavnene er skrevet riktig (de begynner med .shoply-)
Tøm nettleserens hurtigbuffer: Nettlesere lagrer noen ganger gamle stiler i hurtigbufferet
Kontroller CSS-syntaksen: Kontroller at alle CSS-reglene dine er ordentlig avsluttet med }
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

Enkelte stiler kan trenge mobilspesifikke justeringer. Bruk mediespørringer:

css


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

Trenger å tilbakestille til standardstiler

Tøm CSS-tekstområdet og lagre. Appen går tilbake til standardutformingen.

Trenger du mer hjelp?

Hvis du trenger mer hjelp med CSS-tilpasning:

Se de visuelle eksemplene i appinnstillingene (forhåndsvisning av produktkort og forhåndsvisning av AI Summary)
Se ressurser med CSS-dokumentasjon, for eksempel MDN Web Docs
Kontakt supportteamet vårt for personlig hjelp på customer-obsession@shoplyai.ai

God fornøyelse med tilpasningen! 🎨

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