Dove viene visualizzato il widget nella pagina del prodotto

Per impostazione predefinita, il widget Bundlex viene visualizzato appena sopra il pulsante Aggiungi al carrello nella pagina del prodotto. Se questa posizione non è adatta al tuo tema, puoi spostarlo in due modi: usando un selettore di posizionamento personalizzato nell'incorporamento dell'app oppure un'ancora del page builder. Questo articolo spiega dove viene posizionato il widget e come Bundlex sceglie tra queste opzioni.

La posizione predefinita

Quando nessuna sostituzione della posizione corrisponde, Bundlex inserisce il widget prima del contenitore del modulo prodotto rilevato nell'area di acquisto. La posizione esatta rispetto ai controlli delle varianti e della quantità del tema dipende dal tema stesso. In pratica, le schede dell'offerta vengono visualizzate sopra il pulsante Aggiungi al carrello, dove la maggior parte degli acquirenti si aspetta di vedere un'offerta sulla quantità o un bundle.

Questa posizione predefinita dipende dal rilevamento automatico del modulo prodotto da parte di Bundlex. La maggior parte dei temi viene rilevata automaticamente. Se il tuo tema non viene rilevato, il widget non può collegarsi in modo affidabile ad Aggiungi al carrello. Una semplice ancora di posizionamento non risolve un modulo prodotto mancante o errato; chiedi all'assistenza di verificare anche il rilevamento del modulo.

La catena di priorità del posizionamento

Per la visualizzazione tramite incorporamento dell'app, Bundlex cerca una destinazione di posizionamento in un ordine fisso e usa la prima che trova. Gli elementi più in alto nell'elenco hanno la precedenza su quelli più in basso.

1. Selettore di posizionamento personalizzato, priorità massima. Un selettore CSS impostato nell'incorporamento dell'app Bundlex. Quando è impostato e corrisponde a un elemento, il widget viene inserito direttamente dopo quell'elemento e nessuna delle opzioni successive nell'elenco viene utilizzata.
2. Ancora del page builder (data-bundlex-widget). Un elemento HTML con l'attributo data-bundlex-widget che inserisci nella pagina. Il widget viene posizionato all'interno della prima ancora corrispondente. Viene utilizzata quando non viene trovata alcuna destinazione di posizionamento personalizzata.
3. Posizione predefinita prima del modulo prodotto, priorità minima. Il posizionamento automatico descritto sopra. Viene utilizzato quando nessuna delle due sostituzioni fornisce una destinazione corrispondente.

Poiché la catena si interrompe alla prima corrispondenza, una destinazione di posizionamento personalizzata corrispondente sostituisce sia l'ancora sia la posizione predefinita, mentre un'ancora corrispondente sostituisce la posizione predefinita. Se un selettore smette di corrispondere dopo una modifica del tema, Bundlex può passare a una posizione con priorità inferiore.

Opzione 1: il selettore di posizionamento personalizzato, incorporamento dell'app

Usa un selettore di posizionamento personalizzato quando vuoi mantenere la visualizzazione tramite incorporamento dell'app e posizionare il widget dopo un elemento specifico della pagina. Se non conosci il selettore, chiedi all'assistenza Bundlex di aiutarti a sceglierne uno. Provalo prima in un tema in bozza.

Impostalo nell'incorporamento dell'app Bundlex:

1. Nell'amministrazione Shopify, vai su Negozio online e fai clic su Modifica tema.
2. Apri Incorporamenti dell'app e trova Bundlex Bundles.
3. Attiva Mostra impostazioni avanzate, quindi inserisci un selettore CSS nel campo Selettore di posizionamento personalizzato.
4. Salva il tema.

Il widget viene inserito subito dopo l'elemento a cui corrisponde il selettore. Se non sai quale selettore usare, l'assistenza Bundlex può aiutarti a trovarne uno. Le impostazioni avanzate mostrano anche i campi per il modulo prodotto, il pulsante Aggiungi al carrello e i selettori di quantità, che servono a correggere il rilevamento automatico nei temi personalizzati, non a posizionare il widget.

Opzione 2: un'ancora del page builder

Se crei pagine prodotto con un page builder visuale come GemPages, PageFly o Shogun, di solito vuoi inserire il widget in un punto specifico del layout. A questo scopo, aggiungi un blocco HTML o di codice personalizzato nel punto in cui vuoi visualizzare il widget e inserisci al suo interno un elemento vuoto con l'attributo data-bundlex-widget:

<div data-bundlex-widget></div>

Non devi scriverlo a mano: apri la scheda Avanzate dell'editor del bundle ed espandi Usi un page builder?. Seleziona Copia, quindi incolla lo snippet nella pagina.

Bundlex riempie la prima ancora corrispondente con il widget. Non hai bisogno di uno snippet diverso per ogni bundle. L'ancora controlla solo la posizione. Bundlex sceglie comunque quale bundle pubblicato mostrare in base al prodotto.

Viene utilizzata solo la prima ancora corrispondente

Se nella pagina esiste più di un elemento data-bundlex-widget, Bundlex usa solo il primo nell'ordine DOM. Questo è importante quando il tuo negozio online duplica i contenuti, ad esempio in una finestra modale di visualizzazione rapida o in un carrello a comparsa che ripete il markup del prodotto. Inserisci l'ancora solo nella superficie in cui vuoi effettivamente visualizzare il widget, in modo che la prima corrispondenza sia quella corretta.

Quando usare invece il blocco dell'app

Bundlex offre anche un blocco dell'app del tema per la pagina del prodotto, un metodo separato per visualizzare il widget rispetto all'incorporamento dell'app. Usa il blocco dell'app quando vuoi inserire il widget in una posizione specifica tramite la funzione di trascinamento dell'editor del tema, senza scrivere un selettore CSS o modificare il markup della pagina:

1. Nell'editor del tema, apri un modello prodotto.
2. Fai clic su Aggiungi blocco nella sezione in cui vuoi visualizzare il widget.
3. Apri la scheda App, scegli Bundlex Bundles e trascina il blocco nella posizione esatta che preferisci.
4. Salva il tema.

Il blocco posiziona il widget nel punto in cui lo inserisci nella sezione, quindi rappresenta una soluzione intermedia tra la posizione predefinita automatica e un selettore scritto manualmente. Il blocco ignora il selettore di posizionamento personalizzato e l'ancora del page builder dell'incorporamento. Usa un solo metodo di visualizzazione per la pagina del prodotto: l'esecuzione contemporanea dell'incorporamento e del blocco può rendere la posizione e le impostazioni dipendenti da quale dei due viene inizializzato per primo.

Prova prima la modifica in un tema in bozza. Prima di disattivare un incorporamento funzionante in quella bozza, verifica che il blocco si trovi all'interno di una sezione visualizzata nel modello effettivo del prodotto. Ricarica subito la pagina del prodotto dopo la modifica; se il widget scompare, riattiva l'incorporamento. Per gli sconti con regali, preferisci una posizione che mantenga l'incorporamento e la relativa pulizia dei regali nella pagina del carrello. Consulta incorporamento o blocco.

Qualunque posizione tu scelga, il widget viene visualizzato solo quando l'incorporamento dell'app, o il blocco, è attivo e un bundle pubblicato corrisponde al prodotto. Se il widget non viene visualizzato affatto, verifica questi due aspetti prima di modificare la posizione.

Landing page: il blocco "Bundlex Bundles in evidenza"

I metodi descritti sopra si applicano alle pagine prodotto. In una normale pagina Shopify, qualsiasi URL /pages/, ad esempio una landing page creata per una campagna, il widget non può collegarsi autonomamente e neppure l'HTML personalizzato lo caricherà.

Aggiungi invece la sezione Prodotto in evidenza del tuo tema e inserisci al suo interno il blocco Bundlex Bundles in evidenza. La sezione del tema fornisce il pulsante Aggiungi al carrello e il blocco aggiunge il widget, proprio come nella home page:

1. Nell'amministrazione Shopify, vai su Negozio online e fai clic su Modifica tema.
2. Nel menu a discesa dei modelli in alto, seleziona Pagine e scegli il modello utilizzato dalla landing page.
3. Fai clic su Aggiungi sezione e scegli la sezione Prodotto in evidenza del tuo tema, quindi seleziona il prodotto di cui vuoi mostrare il bundle.
4. All'interno di quella sezione, fai clic su Aggiungi blocco, apri la scheda App e scegli Bundlex Bundles in evidenza.
5. Nelle impostazioni del blocco in evidenza, imposta Prodotto sullo stesso prodotto della sezione oppure mantieni il collegamento Prodotto della sezione.
6. Salva il tema.

Il blocco da solo, al di fuori di una sezione Prodotto in evidenza, non trova alcun modulo Aggiungi al carrello e non mostra nulla. Inserito all'interno della sezione, mostra il prodotto con le relative offerte bundle pubblicate e consente agli acquirenti di aggiungerlo al carrello direttamente dalla landing page. La stessa configurazione funziona anche nella home page.

Riferimento rapido

Metodo di posizionamento	Dove impostarlo	Priorità
Selettore di posizionamento personalizzato	Incorporamenti dell'app > Bundlex Bundles > Mostra impostazioni avanzate	Massima
data-bundlex-widget ancora	Markup della pagina o page builder	Utilizzato se nessuna destinazione personalizzata corrisponde
Predefinito (prima del modulo prodotto)	Automatico	Utilizzato se nessuna sostituzione corrisponde