Ricerca

Link in evidenza

1. Documentazione Company XYZ sulle impostazioni della ricerca predittiva
2. App Search & Discovery
3. Documentazione Company XYZ sul blocco Search
4. Documentazione Company XYZ sull’uso dei video
5. Documentazione Company XYZ sulle icone
6. Documentazione Company XYZ sulle impostazioni dei colori dei banner
7. Documentazione Company XYZ sulle impostazioni delle schede
8. Documentazione Company XYZ sulle impostazioni di visibilità
9. Documentazione Shopify sulle sezioni e i blocchi

Video utili

Video di Shopify Academy: personalizzare il tuo negozio

Video di Shopify Academy: personalizzare il tuo negozio

Questo blocco aggiunge un campo di ricerca con risultati live opzionali, suggerimenti predefiniti curati e contenuti banner promozionali. Usalo quando vuoi che la ricerca faccia più che accettare query e guidi attivamente i clienti verso prodotti, collezioni o pagine chiave. Per una panoramica più ampia di come funzionano i blocchi nei temi, consulta la documentazione Shopify sulle sezioni e i blocchi

Impostazioni principali

Le impostazioni principali del testo definiscono la prima impressione dell’esperienza di ricerca. Usa il segnaposto per indicare ai clienti cosa possono cercare e mantieni l’etichetta del pulsante breve, in modo che si adatti comodamente ai diversi layout.

Nella maggior parte dei casi, funziona meglio un testo semplice. I prompt chiari sono più facili da leggere rispetto alle frasi di branding che rendono il campo meno evidente.

Impostazioni di ricerca predittiva

Questo gruppo controlla l’esperienza di ricerca live che appare mentre i clienti digitano. Consente anche di definire lo stato vuoto con link predefiniti curati, così il blocco rimane utile prima che venga inserita una query.

La ricerca predittiva in tempo reale richiede che l’app Search & Discovery sia installata e configurata. Consulta i riferimenti forniti dal sorgente per le impostazioni di ricerca predittiva, l’app Search & Discovery e il riferimento canonico del Ricerca.

Le impostazioni di questo gruppo si applicano solo quando la ricerca predittiva è attiva. Se i risultati live non sono disponibili, questi controlli non modificheranno l’esperienza di ricerca come previsto.

Usa i menu dei risultati predefiniti e secondari per trasformare lo stato vuoto della ricerca in un pannello di scoperta utile. Collezioni popolari, destinazioni stagionali, pagine di supporto o categorie comuni di solito funzionano meglio qui rispetto a menu lunghi e profondamente annidati.

Se lasci vuoto il titolo dei risultati predefiniti, viene usato il nome del menu. Controlla con attenzione l’etichetta del menu, così il pannello di ricerca appare comunque intenzionale.

Il banner opzionale e la barra delle funzionalità possono aggiungere merchandising e rassicurazione, ma dovrebbero supportare la ricerca invece di competere con essa. Se il pannello inizia a sembrare troppo affollato, semplifica i contenuti circostanti prima di ridurre la visibilità dei risultati.

Sfondo del banner

Questo gruppo controlla lo sfondo dell’area banner opzionale. Puoi usare un’immagine o un video e regolare il modo in cui i media di sfondo si adattano allo spazio.

I media di sfondo specifici per dispositivi mobili sono utili quando il ritaglio desktop non si adatta bene agli schermi più piccoli. Questo è particolarmente importante quando la grafica include testo, persone o prodotti vicino ai bordi.

Scegli media che lascino comunque spazio per contenuti in primo piano leggibili. Una risorsa visivamente forte è utile solo se titoli, pulsanti e testo di supporto restano facili da leggere.

Consiglio

Usa risorse di sfondo dedicate per mobile quando i tuoi media desktop dipendono da un ritaglio ampio. In genere questo offre un inquadramento migliore e un contrasto del testo più pulito sugli schermi più piccoli.

Per le migliori pratiche di configurazione dei video, consulta using video.

Primo piano del banner

Questo gruppo ti consente di sovrapporre contenuti promozionali allo sfondo del banner. Puoi aggiungere un’icona, una didascalia, un titolo, un sottotitolo e una call to action, quindi posizionare questi contenuti all’interno del banner.

I campi vuoti vengono semplicemente nascosti, quindi puoi mantenere quest’area minimale oppure creare un messaggio promozionale più completo. Nella maggior parte dei casi, un titolo chiaro, una breve riga di supporto e un’azione funzionano meglio di una struttura di contenuti troppo densa.

Scegli il tipo di titolo in modo che corrisponda alla gerarchia della pagina circostante. L’obiettivo è far sembrare il banner strutturato senza sovrastare i contenuti vicini.

Se aggiungi un pulsante, mantieni un testo diretto e orientato all’azione. Le impostazioni di layout, icona e stile aiutano a rifinire la presentazione, ma lo stile del link ha l’effetto maggiore sul comportamento del banner.

Attenzione

La scelta di uno stile di link a blocco completo rimuove i link dal testo del sottotitolo. Usalo solo quando vuoi che l’intera area del banner agisca come obiettivo principale del clic.

Se usi le icone, puoi inserire un’emoji o il nome di un’icona supportata. Per indicazioni sulle icone, consulta icons.

Media in primo piano del banner

Usa questo gruppo per aggiungere un’immagine in primo piano accanto al testo del banner, ad esempio un logo, un badge, una sagoma di prodotto o una grafica della campagna. Questi media appaiono insieme ai contenuti in primo piano, e non dietro di essi.

Le larghezze dell’immagine più ridotte funzionano bene per loghi e accenti decorativi, mentre le larghezze maggiori sono adatte a grafica di prodotto o a elementi promozionali d’impatto. Se imposti la larghezza su 0, l’immagine può estendersi su tutto lo spazio disponibile, quindi controlla attentamente il risultato sugli schermi più piccoli.

Se aggiungi un link all’immagine, mantienilo coerente con il messaggio del banner. Destinazioni separate all’interno di un banner compatto possono rendere il blocco meno focalizzato.

Colori del banner

Questo gruppo ti consente di sostituire le scelte di colore del tema più ampie per l’area banner. Usalo quando il banner di ricerca necessita di un branding più marcato o quando i media di sfondo richiedono un contrasto aggiuntivo.

I colori dell’overlay e del testo sono di solito i controlli più importanti qui. Un overlay sottile può preservare l’aspetto di un’immagine o di un video, rendendo al tempo stesso titoli, testo e azioni molto più facili da leggere.

Dai priorità alla leggibilità rispetto all’abbinamento decorativo dei colori. Se il banner include testo o azioni, assicurati che restino chiari sia nella vista desktop sia in quella mobile.

Per maggiori informazioni su questi controlli, consulta Impostazioni colore banner.

Impostazioni standard del blocco

Impostazioni scheda

Queste impostazioni condivise controllano il modo in cui i risultati basati su schede vengono presentati in questo blocco. Usale per allineare le schede dei risultati al resto del tuo negozio o per dare ai risultati di ricerca un trattamento visivo più distintivo.

Le scelte più incisive sono lo stile della scheda, il rapporto dell’immagine e la quantità di testo mostrata da ciascuna scheda. Se i clienti probabilmente esamineranno rapidamente diversi risultati, privilegia schede facili da leggere rispetto a layout che rendono ogni risultato troppo alto.

Per il riferimento condiviso, consulta Impostazioni scheda.

Impostazioni di visibilità

Usa queste impostazioni per mostrare o nascondere il blocco in base alla dimensione del dispositivo. Sono più utili quando desideri una presentazione di ricerca diversa su desktop e mobile.

Se nascondi questo blocco in una determinata dimensione del dispositivo, assicurati che lì sia disponibile un altro punto di ingresso alla ricerca chiaramente visibile. Per il riferimento condiviso, consulta Impostazioni di visibilità.

Impostazioni dell’editor

Queste impostazioni influenzano solo il modo in cui il blocco viene etichettato nell’editor. Un titolo personalizzato dell’editor è utile quando usi più blocchi Search o vuoi identificare più facilmente una versione specifica per una campagna.

Note sull’uso

1. Pianifica due stati di ricerca. Lo stato vuoto e lo stato con query digitata possono servire obiettivi diversi, quindi fai in modo che entrambi risultino intenzionali.
   1. Usa contenuti predefiniti curati per guidare la navigazione di chi visita per la prima volta.
   2. Mantieni i risultati live focalizzati sulle corrispondenze più utili.
2. Controlla entrambe le viewport. I controlli per desktop e mobile possono modificare layout, allineamento e comportamento dei media, quindi verifica entrambe le dimensioni prima della pubblicazione.
   1. Verifica che il testo del banner resti leggibile.
   2. Assicurati che i ritagli dei media continuino a supportare il messaggio.
3. Mantieni deliberate le scelte di stile. I valori vuoti o predefiniti di solito mantengono l’aspetto di fallback del tema, mentre colori, gradienti o sostituzioni dei media espliciti rendono l’area più personalizzata.
4. Usa i media con attenzione. Immagini e video possono influire su ritaglio, caricamento, fallback e leggibilità, soprattutto quando le risorse desktop e mobile sono diverse.
5. Favorisci la chiarezza dei moduli. Mantieni etichette, prompt ed eventuali messaggi di successo o di errore facili da leggere, così i clienti possono cercare senza confusione.