Salta ai contenuti

Prodotti complementari

Metti in evidenza componenti aggiuntivi pertinenti con layout responsive e uno stile flessibile delle schede prodotto.

Usi questa sezione per mostrare prodotti che si abbinano bene al prodotto attuale, come accessori, bundle o articoli di reintegro. Funziona meglio quando desidera aumentare gli acquisti di componenti aggiuntivi senza interrompere il flusso di acquisto principale. Per una panoramica più ampia sul funzionamento delle sezioni del tema, veda la documentazione Shopify sulle sezioni e i blocchi

Questa sezione mostra solo i prodotti che sono stati configurati come raccomandazioni complementari nell’app Search & Discovery.

I prodotti esauriti o già presenti nel carrello vengono esclusi automaticamente dall’elenco.

Usi Numero di articoli per controllare quante raccomandazioni vengono visualizzate. Se desidera che la sezione restituisca l’insieme completo disponibile, usi 0 per consentire tutti gli articoli corrispondenti fino al limite della sezione.

Un numero minore di prodotti mantiene l’area compatta vicino al modulo di acquisto. Un numero maggiore ha più senso quando desidera un’esperienza di consultazione più ampia in una griglia o in una presentazione più estesa.

Queste impostazioni controllano come le raccomandazioni sono organizzate su desktop, tablet e mobile. Per il comportamento del layout condiviso, veda il riferimento delle impostazioni di layout.

Può scegliere un layout separato per dispositivo, utile quando desidera una griglia facile da confrontare sugli schermi più grandi e una presentazione facile da scorrere su quelli più piccoli. Le impostazioni delle colonne aiutano a bilanciare la dimensione delle schede rispetto a quanti prodotti i clienti possono vedere contemporaneamente.

Se non ha bisogno di un layout separato per tablet, lasci che il tablet segua la configurazione desktop per mantenere la sezione più facile da gestire.

Quando qualsiasi dispositivo usa un layout di presentazione, queste impostazioni controllano come i clienti si muovono tra le raccomandazioni. Per le opzioni di interazione condivise, veda il riferimento dei controlli della presentazione.

L’animazione predefinita è la scelta più flessibile per la consultazione di più schede. Fade crea una presentazione più semplice, una alla volta, che risulta più calma ma riduce la quantità di contenuti che possono essere mostrati contemporaneamente.

La riproduzione automatica può aggiungere movimento, ma di solito è meglio usarla con cautela nelle raccomandazioni di prodotto. Se la abilita, scelga un intervallo che dia tempo sufficiente per leggere i nomi dei prodotti e i prezzi.

Navigazione, paginazione e anteprime della diapositiva successiva aiutano a segnalare che sono disponibili altri prodotti. L’anteprima della diapositiva successiva è particolarmente utile sui dispositivi touch, ma non si applica quando si usa l’animazione fade.

L’animazione Fade forza una presentazione a diapositiva singola. Disabilita anche la paginazione e le anteprime della diapositiva successiva.

Il riferimento alle impostazioni dell’header copre i controlli condivisi dell’header usati qui. In questa sezione, l’header introduce l’area delle raccomandazioni con un titolo, una didascalia facoltativa, testo di supporto e un pulsante facoltativo.

Mantenga la heading breve in modo che i prodotti rimangano il focus. Aggiunga un pulsante solo quando offre un passaggio successivo chiaro, ad esempio la consultazione di una raccolta correlata più ampia.

Il riferimento alle impostazioni delle schede prodotto e il riferimento alle impostazioni della scheda spiegano i controlli condivisi usati qui. Queste impostazioni consentono di sostituire la normale presentazione della scheda prodotto solo per questa sezione.

Usale per rendere i prodotti complementari più semplici, più compatti o più promozionali rispetto alle schede altrove. Rapporti immagine coerenti di solito offrono il risultato più pulito, soprattutto quando diversi prodotti compaiono fianco a fianco.

Le scelte relative alla CTA e al selettore di varianti modificano la quantità di azione che avviene direttamente nella sezione. Se abilita la selezione delle varianti, si assicuri che le opzioni siano facili da capire a colpo d’occhio.

I colori dell’overlay del banner contano solo quando lo stile della scheda è impostato su Banner. Per qualsiasi modifica ai colori delle schede, controlli attentamente il contrasto in modo che titoli, prezzi e azioni rimangano leggibili.

Il riferimento alle impostazioni di padding copre i controlli di spaziatura condivisi usati in questa sezione. Usi il padding per controllare quanto vicino le raccomandazioni si trovano ai contenuti prodotto circostanti.

Uno spaziamento più ridotto aiuta la sezione a sembrare collegata all’area del prodotto principale. Uno spaziamento maggiore funziona meglio quando desidera che venga percepita come un blocco di contenuto separato.

Il riferimento alle impostazioni dello sfondo sezione spiega le opzioni di sfondo condivise usate qui. Può aggiungere un colore, un gradiente, un’immagine o un video per far risaltare l’area delle raccomandazioni.

Questo funziona meglio quando desidera una separazione visiva più netta dal resto della pagina prodotto. Se aggiunge un’immagine o un video di sfondo, mantenga le schede facili da leggere ed eviti sfondi che competano con le immagini dei prodotti.

Il riferimento alle impostazioni dei separatori copre i controlli di linea condivisi usati qui. I separatori superiori e inferiori danno alla sezione più struttura senza aggiungere un trattamento di sfondo completo.

Questa è una buona opzione quando la pagina ha già abbastanza contrasto visivo e ha solo bisogno di un leggero confine attorno alle raccomandazioni.

Il riferimento alle impostazioni di visibilità spiega i controlli di visualizzazione responsive condivisi. In questa sezione, sono più utili quando desidera strategie di raccomandazione diverse su desktop e mobile.

Usi questa opzione con attenzione in modo che i clienti non perdano l’accesso a utili suggerimenti di componenti aggiuntivi sui dispositivi che contano di più per il suo negozio.

Il riferimento alle impostazioni di larghezza copre i controlli di larghezza condivisi usati qui. La larghezza dei contenuti influisce su quanti schede entrano comodamente in una riga, mentre la larghezza della sezione conta di più quando usa uno sfondo o desidera un trattamento visivo più ampio.

I layout più ampi di solito si adattano a insiemi di prodotti più grandi e a griglie su più colonne. Le larghezze più ridotte possono aiutare a concentrare l’attenzione su un numero minore di raccomandazioni.

  1. Configuri prima le raccomandazioni. Se la sezione appare vuota, confermi che i prodotti complementari siano stati assegnati nell’app Search & Discovery. Se non sono disponibili raccomandazioni idonee, la sezione non forzerà un’esperienza completa di stato vuoto.
  2. Scelga il layout in base al dispositivo. Esamini sia il layout desktop sia quello mobile, poiché i controlli di griglia e presentazione possono modificare allineamento, visibilità, navigazione e la quantità di contenuti mostrata contemporaneamente.
  3. Mantenga i valori predefiniti quando desidera uno stile di fallback. Lasci non impostati colori di sfondo, gradienti e media se desidera che la sezione erediti un aspetto più semplice. Le sostituzioni esplicite rendono l’area più autonoma.
  4. Riveda con attenzione i media. Se usa media diversi per desktop e mobile, controlli ritaglio, leggibilità e caricamento in modo che le schede prodotto risultino chiare su entrambe le aree di visualizzazione.
  5. Esegua l’anteprima con prodotti reali. Testi la sezione su prodotti che hanno diverse raccomandazioni per confermare spaziatura, quantità e comportamento della presentazione.