Come personalizzare i risultati di ricerca con CSS

Pronto a rendere fantastici i tuoi risultati di ricerca? Questa guida ti mostrerà come applicare stili ai risultati di ricerca dei prodotti e alle sezioni di riepilogo AI con CSS. Nessun problema se sei alle prime armi con CSS: ci pensiamo noi! E se invece ti senti già a tuo agio, troverai tanti suggerimenti per portare la tua personalizzazione al livello successivo.

Per iniziare

Sia Shoply AI Chat sia AI Search possono mostrare risultati di ricerca, quindi le opzioni di personalizzazione CSS che aggiungi si applicheranno a entrambi. Nota: la funzione AI Summary è disponibile solo in Shoply AI Search.

Dove aggiungere il tuo CSS

Per nascondere l’intera barra dei filtri, usa il controllo integrato: vai su Customize AI Search → Search filters, disattiva Show filters in search results e fai clic su Save. Non è necessario alcun CSS. Consulta Hide Search Filters  per i dettagli.

1. Vai alla sezione Customize AI Search nella console di amministrazione dell’app Shoply.
2. Trova l’area di testo CSS styles for search elements
3. Inserisci il tuo codice CSS personalizzato nell’area di testo
4. Fai clic su Save per applicare le modifiche

Basi del CSS

Il CSS ti permette di cambiare colori, font, spaziatura, bordi e altro ancora. La sintassi di base è:

.class-name {
    property: value;
}

Per esempio, per cambiare il colore del testo in rosso scuro:

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

Comprendere le classi CSS specifiche di Shoply

Shoply fornisce classi CSS specifiche che puoi usare per selezionare diverse parti dei tuoi risultati di ricerca. Ogni classe corrisponde a un elemento specifico del risultato di ricerca.

Shoply ha anche definito alcuni stili predefiniti per queste classi. Puoi ispezionare questi stili usando Chrome DevTools  e cercando ciascuna classe. Se hai bisogno di sovrascrivere gli stili predefiniti, aggiungi la dichiarazione !important alle tue regole CSS come spiegato nella documentazione MDN CSS !important .

Classi della scheda prodotto

Stili per il contenitore:

• .shoply-product-image - Definisce lo stile dell’immagine del prodotto
• .shoply-product-card - Definisce lo stile del contenitore della scheda prodotto

Stili per le informazioni testuali:

• .shoply-product-brand - Definisce lo stile del nome del brand/fornitore del prodotto visualizzato sopra il titolo del prodotto
• .shoply-product-name - Definisce lo stile del titolo/nome del prodotto

Stili per il prezzo:

• .shoply-product-price - Definisce lo stile del prezzo del prodotto (dopo l’applicazione dello sconto)
• .shoply-product-original-price-before-discount - Definisce lo stile del prezzo originale prima dello sconto (con barratura per impostazione predefinita)
• .shoply-product-discount-percent - Definisce lo stile del testo della percentuale di sconto (mostrato in rosso e in grassetto per impostazione predefinita)

Stili per il pulsante di azione:

• .shoply-product-action-button - Definisce lo stile dei pulsanti di azione principali (Add to Cart, View Product, ecc.)
• .shoply-product-action-button-sold-out - Definisce lo stile del pulsante di azione quando il prodotto è esaurito (stato disabilitato)

Nota: nella sezione Customize AI Search della console di amministrazione dell’app Shoply, puoi configurare cosa succede quando i clienti fanno clic sul pulsante di azione: possono aggiungere il prodotto al carrello, essere reindirizzati alla pagina prodotto oppure puoi scegliere di nascondere completamente il pulsante di azione.

Classi di AI Summary

• .shoply-ai-summary-box - Definisce lo stile del riquadro contenitore per i riepiloghi generati dall’AI.
• .shoply-ai-summary-button - Definisce lo stile del pulsante che attiva la generazione del riepilogo AI.

Esempi per personalizzare le schede prodotto nei risultati di ricerca con CSS

Modificare lo stile del brand del prodotto

Il brand del prodotto appare sopra il titolo del prodotto. Ecco alcune personalizzazioni comuni:

/* Make brand name smaller and gray */
.shoply-product-brand {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

Personalizzare il titolo del prodotto

Il nome del prodotto è uno degli elementi più importanti. Personalizzalo per adattarlo al tuo 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;
}

Esempi di stile per i prezzi dei prodotti

Fai risaltare i tuoi prezzi con uno stile personalizzato:

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

Personalizzare i pulsanti di azione

I tuoi pulsanti di azione (Add to Cart, View Product) possono essere personalizzati per adattarsi al design del tuo negozio:

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

Applicare uno stile alle immagini prodotto

Migliora le immagini dei tuoi prodotti con bordi, ombre o effetti al passaggio del mouse:

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

Esempi per personalizzare la sezione AI Summary

Per i negozi che abilitano AI Search, AI Summary apparirà in cima ai risultati di ricerca e spiegherà immediatamente cosa acquistare e perché in base ai risultati di ricerca, ancora prima che i clienti inizino a scorrere i prodotti.

Puoi disattivare AI Summary nella pagina Customize AI Search nella console di amministrazione dell’app. Puoi anche personalizzarne l’aspetto usando CSS come mostrato qui sotto.

Applicare uno stile al riquadro 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);
}

Personalizzare il pulsante AI Summary

Per impostazione predefinita, AI Summary viene mantenuto breve e conciso per risparmiare spazio sullo schermo. I clienti possono fare clic sul pulsante “AI Summary Button” per espanderlo e vedere tutti i dettagli. Vuoi farlo combaciare con il tuo brand? Puoi personalizzare anche questo pulsante! Dai un’occhiata agli esempi qui sotto.

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

Risoluzione dei problemi

Le mie modifiche CSS non vengono visualizzate

1. Controlla eventuali errori di battitura: assicurati che i nomi delle classi CSS siano scritti correttamente (iniziano con .shoply-)
2. Svuota la cache del browser: a volte i browser memorizzano nella cache i vecchi stili
3. Controlla la sintassi CSS: assicurati che tutte le regole CSS siano chiuse correttamente con }
4. Usa !important: se gli stili non vengono applicati, potresti dover aggiungere !important per sovrascrivere gli stili predefiniti:
   css

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

Gli stili appaiono diversi su mobile

Alcuni stili potrebbero richiedere regolazioni specifiche per mobile. Usa le media query:

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

Hai bisogno di ripristinare gli stili predefiniti

Svuota semplicemente l’area di testo CSS e salva. L’app tornerà allo stile predefinito.

Hai bisogno di ulteriore aiuto?

Se hai bisogno di ulteriore assistenza con la personalizzazione CSS:

1. Controlla gli esempi visivi nelle impostazioni dell’app (Product Card Preview e AI Summary Preview)
2. Consulta risorse di documentazione CSS come MDN Web Docs 
3. Contatta il nostro team di supporto per un aiuto personalizzato all’indirizzo customer-obsession@shoplyai.ai

Buona personalizzazione! 🎨

Con queste classi CSS, hai il pieno controllo sull’aspetto dei tuoi risultati di ricerca. Sperimenta, fai test e crea un’esperienza di ricerca che si adatti perfettamente al tuo brand!