Hur man anpassar AI Search utseendet

Det finns två sätt att anpassa dina sökresultat i Shoply AI:

• Inbyggda alternativ: Börja med kontrollerna i din Shoply AI Admin Console för att ändra sammanfattningar, filter, knappar, färger och produktlayout utan att skriva kod. Utforska de inbyggda alternativen och förhandsvisningarna.
• Anpassad CSS: Om dessa kontroller inte ger dig den design du vill ha kan du använda CSS – stilspråket för webbsidor – för att finjustera typsnitt, mellanrum, ramar och andra visuella detaljer. Du kan använda det tillsammans med de inbyggda inställningarna. Gå till CSS-guiden.

Du behöver förmodligen inte CSS alls

De flesta ändringar av söklayout och utseende finns redan under Customize AI Search i din Shoply AI Admin Console, oavsett om du använder Shopify eller en annan webbplatsplattform. Prova dessa inbyggda alternativ först och klicka sedan på Save i admin för att tillämpa dina val. Använd CSS för styling som dessa kontroller inte täcker.

De interaktiva exemplen nedan använder samma förhandsvisningar som i admin. De är illustrationer som du kan prova här; de ändrar inte din butik.

• AI Summary: Slå på eller av sammanfattningen och välj om den ska visas ovanför eller under produktresultaten.

• Sökfilter: Visa eller dölj filterfältet och placera filter överst, till vänster eller i en flytande panel. Layouten till vänster flyttas ovanför resultaten på mindre skärmar. Se inställningar för synlighet av sökfilter för den delade effekten på chattresultat.

• Produktåtgärdsknappar och färger: Välj Add to Cart, View Product eller No Button. Välj knappens bakgrunds- och textfärger och ändra färgen på betygsstjärnorna så att den matchar din butik.

• Produkter per rad: Välj tre eller fyra kolumner på desktop och en eller två kolumner på mobil. Färre kolumner ger varje produktbild mer utrymme.

• Totalt antal produkter som visas: Ställ in separata produktantal för små mobilskärmar, större mobilskärmar och desktop. Admin erbjuder 3, 4, 6, 8, 9, 12, 15, 16, 18 eller 20 produkter. Detta styr antalet resultat, snarare än antalet kolumner.

Om du fortfarande behöver en anpassad design kan du fortsätta med CSS-guiden nedan.

Komma igång

Om de inbyggda alternativen inte ger dig det utseende du vill ha kan du använda anpassad CSS för att finjustera dina sökresultat.

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

Börja med att aktivera AI Search innan du stylar den så att du kan förhandsgranska ändringar på riktiga resultat.

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 detaljer.

1. Gå till avsnittet Customize AI Search i Shoply-appens admin console.
2. Hitta textområdet CSS styles for search elements
3. Ange din anpassade CSS-kod i textområdet
4. 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:

.class-name {
    property: value;
}

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

.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 varje klass. Om du behöver åsidosätta standardstilarna lägger du till deklarationen !important i dina CSS-regler enligt förklaringen i MDN:s dokumentation om CSS !important .

Klasser för produktkort

Stilar för behållaren:

• .shoply-product-image - Stilar produktbilden
• .shoply-product-card - Stilar behållaren för produktkortet

Stilar för textinformationen:

• .shoply-product-brand - Stilar produktens varumärkes-/leverantörsnamn som visas ovanför produkttiteln
• .shoply-product-name - Stilar produkttiteln/-namnet

Stilar för pris:

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

Stilar för åtgärdsknappen:

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

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

Klasser för AI Summary

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

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

Ändra styling för produktvarumärke

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

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

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

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

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

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

/* 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 avsnittet AI Summary

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 har scrollat igenom produkterna.

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

Styla rutan för AI Summary

    /* 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å! Kolla in exemplen nedan.

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

1. Kontrollera stavfel: Se till att dina CSS-klassnamn är korrekt stavade (de börjar med .shoply-)
2. Rensa webbläsarens cache: Ibland cachar webbläsare gamla stilar
3. Kontrollera CSS-syntaxen: Se till att alla dina CSS-regler avslutas korrekt med }
4. Använd !important: Om stilar 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 mobilspecifika justeringar. Använd media queries:

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

Behöver återställa till standardstilar

Rensa helt enkelt CSS-textområdet och spara. Appen återgår då till standardstyling.

Behöver du mer hjälp?

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

1. Titta på de visuella exemplen i appens inställningar (Product Card Preview och AI Summary Preview)
2. Se dokumentationsresurser för CSS som MDN Web Docs 
3. 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 utseendet på dina sökresultat. Experimentera, testa och skapa en sökupplevelse som passar ditt varumärke perfekt!