Salta ai contenuti

Raccomandazioni sui prodotti

Aggiungi suggerimenti automatici di prodotti correlati con opzioni flessibili di layout e styling delle schede.

Usa questa sezione per mettere in evidenza prodotti correlati nelle pagine prodotto con raccomandazioni generate automaticamente. È un modo pratico per aggiungere cross-sell senza curare manualmente i prodotti per ogni articolo, offrendo al tempo stesso un forte controllo su layout, presentazione delle schede e styling della sezione.

Le raccomandazioni migliorano nel tempo in base ai dati di prodotto e ordine e possono anche essere influenzate tramite Search & Discovery. Per ulteriori informazioni su come Shopify gestisce le raccomandazioni, consulti documentazione Shopify sulle raccomandazioni dei prodotti. Può rivedere il riferimento della sezione in documentazione Company XYZ sulla sezione Raccomandazioni sui prodotti.

Il controllo principale a livello di sezione è Number of items. Lo usi per limitare quanti prodotti consigliati vengono mostrati, oppure lo imposti su 0 quando vuole che la sezione restituisca tutti gli elementi disponibili fino al massimo integrato.

Conteggi più piccoli in genere funzionano meglio in layout più compatti o quando la sezione appare più in basso nella pagina. Nei layout più ampi, un conteggio più alto può far sembrare la sezione più completa, soprattutto quando i clienti sono più propensi a continuare la navigazione oltre i primi elementi.

La sezione può mostrare meno prodotti del limite impostato quando è disponibile solo un set più ridotto di raccomandazioni pertinenti.

Queste impostazioni controllano come i prodotti consigliati sono disposti su desktop, tablet e mobile. Può scegliere tra layout a griglia e presentazione per dispositivo, quindi impostare il numero di colonne per ogni dimensione dello schermo.

Consulti documentazione Company XYZ sulle impostazioni di layout. In generale, usi più colonne quando le schede sono visivamente semplici e meno colonne quando includono titoli più lunghi, estratti, campioni di colore o uno styling più incisivo della call to action.

Il tablet può ereditare il numero di colonne del desktop quando viene lasciato su 0. Questo è utile quando vuole una configurazione più semplice, ma vale la pena controllare attentamente il tablet se il layout desktop è già denso.

Un approccio comune è usare la griglia sugli schermi più grandi per un confronto rapido, quindi la presentazione su mobile per una navigazione orizzontale più semplice. Se mantiene una griglia su mobile, eviti di sovraffollare le schede in modo che i dettagli del prodotto restino facili da consultare.

Quando il layout di presentazione è attivato su qualsiasi dispositivo, queste impostazioni controllano movimento, autoplay, looping, navigazione, paginazione e anteprime delle slide. Le consentono di decidere se la sezione risulta più editoriale e scandita oppure più diretta e navigabile.

Consulti documentazione Company XYZ sui controlli della presentazione. Usi queste impostazioni per supportare la navigazione, non per competere con i prodotti stessi.

L’animazione Fade è migliore quando desidera mettere in risalto un prodotto alla volta. Poiché forza un layout a singola slide e rimuove alcuni segnali di navigazione tra più schede, di solito è meno efficace quando i clienti devono confrontare rapidamente più raccomandazioni.

L’autoplay funziona meglio quando il movimento è discreto e il ritardo dà agli acquirenti abbastanza tempo per leggere. Su desktop, mettere in pausa al passaggio del mouse è una salvaguardia utile quando i clienti interagiscono con le schede.

La paginazione è più utile quando ci sono abbastanza slide da giustificare un orientamento aggiuntivo. L’anteprima della slide successiva può anche aiutare a segnalare che sono disponibili altre raccomandazioni senza fare affidamento solo sulle frecce o sulla paginazione.

Questi controlli regolano il contenuto introduttivo della sezione, inclusi l’icona, il testo del titolo e il testo del sottotitolo. Li usi quando questa sezione ha bisogno di un contrasto più forte o di un’enfasi leggermente diversa rispetto al contenuto circostante.

Consulti Impostazioni colore. Questo è particolarmente utile quando aggiunge uno sfondo personalizzato e ha bisogno che l’area del titolo rimanga chiara e leggibile.

Usi i controlli dell’header condivisi per aggiungere un’introduzione opzionale sopra le raccomandazioni, inclusi allineamento, icona, didascalia, titolo, sottotitolo e una pulsante opzionale. Scopri di più in documentazione Company XYZ sulle impostazioni dell’header.

Un header è utile quando la sezione ha bisogno di contesto, ad esempio per presentare i prodotti come articoli correlati o scelte complementari. La pulsante opzionale funziona bene per collegarsi a un elenco di prodotti più ampio, purché la destinazione corrisponda chiaramente alle raccomandazioni mostrate.

Usi i controlli della scheda condivisi per sostituire la presentazione predefinita della scheda prodotto solo per questa sezione. Scopri di più in documentazione Company XYZ sulle impostazioni delle schede prodotto.

Qui può rendere le schede di raccomandazione più visive, più compatte o più orientate al testo a seconda di quanto la sezione sia prominente nella pagina. Se attiva un selettore di varianti, si assicuri che la configurazione delle varianti supporti lo stile di visualizzazione scelto; la guida al selettore di varianti è disponibile in documentazione Company XYZ sulle varianti di prodotto.

Usi i controlli di padding condivisi per regolare lo spazio sopra e sotto la sezione. Scopri di più in documentazione Company XYZ sul padding della sezione.

Aumenti lo spaziamento quando le raccomandazioni devono sembrare un blocco di contenuto distinto. Lo riduca quando la sezione deve rimanere strettamente collegata ai contenuti vicini della pagina prodotto.

Usi i controlli di sfondo condivisi per aggiungere un colore, un gradiente, un’immagine o un video dietro la sezione. Scopri di più in documentazione Company XYZ sugli sfondi della sezione.

Gli sfondi possono aiutare a separare le raccomandazioni dal resto della pagina, ma aggiungono anche peso visivo. Se usa uno sfondo più marcato, controlli che il contenuto delle schede e il testo del titolo risaltino ancora chiaramente.

Usi i controlli dei separatori condivisi per aggiungere una linea di divisione superiore o inferiore intorno alla sezione. Scopri di più in documentazione Company XYZ sui separatori.

I separatori sono utili quando questa sezione si trova tra aree dense della pagina e ha bisogno di un confine più chiaro. In genere, stili di separatore discreti sono sufficienti per i layout delle pagine prodotto.

Usi i controlli di visibilità condivisi per decidere se questa sezione appare su tutti i dispositivi oppure solo su desktop o mobile. Scopri di più in documentazione Company XYZ sulle impostazioni di visibilità.

Questo è utile quando desidera esperienze di raccomandazione diverse in base al dispositivo, ad esempio una griglia desktop più ampia e una presentazione mobile più semplice. Se crea versioni separate, si assicuri che non risultino ripetitive.

Usi i controlli di larghezza condivisi per gestire sia la larghezza del contenuto sia la larghezza esterna della sezione. Scopri di più in documentazione Company XYZ sulle larghezze del layout.

Larghezze maggiori possono mostrare più prodotti alla volta, mentre larghezze minori spesso migliorano concentrazione e leggibilità. Visualizzi in anteprima le modifiche alla larghezza sia nello storefront live sia nell’editor, poiché la scala del layout può apparire diversa.

  1. Pianifichi risultati mancanti. Le raccomandazioni compaiono solo quando esiste un contesto di prodotto adeguato e un numero sufficiente di elementi restituiti, quindi la sezione può risultare più leggera del previsto su alcuni prodotti.
  2. Riveda entrambe le viewport. I layout desktop e mobile possono comportarsi in modo diverso, soprattutto con slider, controlli e media, quindi controlli sempre entrambe le dimensioni prima di pubblicare.
  3. Usi le sostituzioni in modo intenzionale. Scelte vuote o dallo stile predefinito di solito preservano lo styling di fallback del tema, mentre colori espliciti, gradienti o media personalizzati rendono la sezione più indipendente dal resto della pagina.
  4. Mantenga leggibili i media. Se usa media separati per desktop e mobile, verifichi ritaglio, caricamento e contrasto del testo in modo che la sezione resti chiara su ogni dispositivo.
  5. Renda gli stati facili da leggere. Se la sezione include interazioni in stile modulo o messaggi di convalida, mantenga semplici e leggibili gli stati di successo ed errore così che gli acquirenti possano recuperare rapidamente.