Come personalizzare l’aspetto di AI Search

Esistono due modi per personalizzare i risultati di ricerca di Shoply AI:

• Opzioni integrate: Inizia con i controlli nella tua Shoply AI Admin Console per modificare riepiloghi, filtri, pulsanti, colori e layout dei prodotti senza scrivere codice. Esplora le opzioni integrate e le anteprime.
• CSS personalizzato: Se questi controlli non ti offrono il design che desideri, usa il CSS, il linguaggio di stile per le pagine web, per regolare con precisione font, spaziatura, bordi e altri dettagli visivi. Puoi usarlo insieme alle impostazioni integrate. Vai alla guida CSS.

Probabilmente Non Hai Affatto Bisogno del CSS

La maggior parte delle modifiche al layout e all’aspetto della ricerca è già disponibile in Customize AI Search nella tua Shoply AI Admin Console, sia che tu usi Shopify sia un’altra piattaforma per siti web. Prova prima queste opzioni integrate, poi fai clic su Save nell’admin per applicare le tue scelte. Usa il CSS per gli stili che questi controlli non coprono.

Gli esempi interattivi qui sotto usano le stesse anteprime dell’admin. Sono dimostrazioni che puoi provare qui; non modificano il tuo negozio.

• AI Summary: Attiva o disattiva il riepilogo e scegli se visualizzarlo sopra o sotto i risultati prodotto.

• Filtri di ricerca: Mostra o nascondi la barra dei filtri e posiziona i filtri in alto, a sinistra oppure in un pannello flottante. Il layout a sinistra si sposta sopra i risultati sugli schermi più piccoli. Vedi impostazioni di visibilità dei filtri di ricerca per l’effetto condiviso sui risultati della chat.

• Pulsanti di azione prodotto e colori: Scegli Add to Cart, View Product oppure No Button. Seleziona i colori di sfondo e del testo del pulsante e modifica il colore delle stelle di valutazione in modo che corrisponda al tuo negozio.

• Prodotti per riga: Scegli tre o quattro colonne su desktop e una o due colonne su mobile. Meno colonne danno a ogni immagine prodotto più spazio.

• Totale prodotti visualizzati: Imposta conteggi separati dei prodotti per schermi mobile piccoli, schermi mobile più grandi e desktop. L’admin offre 3, 4, 6, 8, 9, 12, 15, 16, 18 o 20 prodotti. Questo controlla il numero di risultati, non il numero di colonne.

Se hai ancora bisogno di un design personalizzato, continua con la guida CSS qui sotto.

Per Iniziare

Se le opzioni integrate non ti danno l’aspetto che desideri, usa CSS personalizzato per regolare con precisione i risultati di ricerca.

Sia Shoply AI Chat sia AI Search possono visualizzare 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.

Per prima cosa, attiva AI Search prima di applicare lo stile così potrai visualizzare in anteprima le modifiche su risultati reali.

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

Nozioni di Base sul CSS

Il CSS ti permette di modificare 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 nel 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 devi 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 decorazione barrata per impostazione predefinita)
• .shoply-product-discount-percent - Definisce lo stile del testo della percentuale di sconto (visualizzato come testo rosso 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 del prodotto oppure puoi scegliere di nascondere completamente il pulsante di azione.

Classi di AI Summary

• .shoply-ai-summary-box - Definisce lo stile del 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 con CSS le Schede Prodotto nei Risultati di Ricerca

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

Stilizzare le Immagini dei Prodotti

Migliora le immagini dei tuoi prodotti con bordi, ombre o effetti hover:

/* 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 attivano AI Search, AI Summary apparirà nella parte superiore dei risultati di ricerca e spiega immediatamente cosa acquistare e perché in base ai risultati di ricerca — prima ancora che i clienti scorrano i prodotti.

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

Stilizzare il Riquadro di 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 di AI Summary

Per impostazione predefinita, AI Summary resta breve e conciso per risparmiare spazio sullo schermo. I clienti possono fare clic sul “AI Summary Button” per espandere 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 mantengono in cache gli stili vecchi
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 hanno un aspetto diverso 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 Altro 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. Fai riferimento a risorse sulla documentazione CSS come MDN Web Docs 
3. Contatta il nostro team di supporto per assistenza personalizzata a 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 corrisponda perfettamente al tuo brand!