Utilizzare Bundlex con un page builder (GemPages, PageFly, Shogun)

Se la pagina prodotto è realizzata con un page builder come GemPages, PageFly o Shogun, utilizza uno snippet di ancoraggio per scegliere dove appare il widget Bundlex. Incollalo in un blocco HTML personalizzato sulla pagina prodotto. Se il widget manca completamente, controlla anche l'incorporamento dell'app, il bundle pubblicato e il modulo prodotto; l'ancora controlla solo il posizionamento.

Perché un page builder ha bisogno di un'ancora

Normalmente il widget rileva il modulo prodotto e si inserisce prima del relativo contenitore. Un page builder può modificare questa struttura. L'ancora indica al widget un punto preciso in cui eseguire il rendering, ma Bundlex deve comunque trovare il modulo Aggiungi al carrello del prodotto per collegare l'offerta al pulsante di acquisto.

Ottieni lo snippet

L'ancora è uno snippet pronto da copiare nell'editor del bundle.

1. Apri nella dashboard Bundlex il bundle che vuoi mostrare sulla pagina del page builder.
2. Apri la scheda Avanzate.
3. Trova l'opzione Stai utilizzando un page builder? e fai clic per espanderla.
4. Fai clic su Copia per copiare lo snippet negli appunti.

Lo snippet è sempre lo stesso:

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

Incollalo nel page builder

1. Apri la pagina prodotto nell'editor del tuo page builder (GemPages, PageFly, Shogun o un altro page builder).
2. Aggiungi un blocco HTML personalizzato o codice nel punto esatto in cui vuoi che appaia il widget, ad esempio subito sotto il prezzo o sopra il pulsante Aggiungi al carrello.
3. Incolla lo snippet in quel blocco.
4. Visualizza l'anteprima della pagina prodotto, quindi salva e pubblica quando il widget si trova nella posizione corretta.

Con l'incorporamento dell'app attivo e senza un target di posizionamento personalizzato corrispondente che abbia la priorità, il widget viene visualizzato all'interno della prima ancora. Un blocco dell'app viene visualizzato invece nella posizione assegnata al blocco. Mantieni l'ancora all'interno dell'area prodotto della pagina, vicino ai controlli di acquisto.

Un solo snippet funziona per ogni bundle

Non hai bisogno di uno snippet diverso per ogni bundle. Esattamente lo stesso <div data-bundlex-widget></div> viene utilizzato per tutti. Bundlex decide quale bundle visualizzare in base al prodotto mostrato nella pagina, quindi l'ancora controlla solo dove appare il widget, mai quale bundle. Incollalo una volta in ogni pagina prodotto del page builder che ne ha bisogno.

Inseriscilo solo nella superficie pertinente

Aggiungi l'ancora solo alla superficie della pagina in cui vuoi effettivamente visualizzare il widget. Se lo stesso snippet finisce in più di un punto caricato contemporaneamente, ad esempio in un carrello a scomparsa o in un popup di visualizzazione rapida che ripete il markup del prodotto, il widget si collega alla prima ancora trovata nella pagina. Per mantenere prevedibile il posizionamento, inserisci lo snippet in un unico punto pertinente invece di distribuirlo tra più template.

Controlla sia i layout desktop sia quelli per telefono. Alcuni builder mantengono nella stessa pagina moduli prodotto separati per desktop e dispositivi mobili. Un selettore o un'ancora che raggiunge la copia nascosta può funzionare a una larghezza e non a un'altra. Se succede, chiedi all'assistenza di controllare entrambi i layout.

Se il widget non si sposta dopo averlo incollato

Se il widget non si è spostato nella nuova posizione:

• Controlla di utilizzare l'incorporamento dell'app, non un blocco dell'app posizionato altrove. Un selettore di posizionamento personalizzato corrispondente nell'incorporamento ha la priorità sull'ancora.
• Esegui un aggiornamento completo della pagina del negozio: Cmd/Ctrl + Shift + R. Questo può ricaricare risorse obsolete del browser, ma non pubblica una pagina in bozza né corregge un selettore errato.
• Verifica che la pagina sia pubblicata, non solo salvata nell'editor del page builder.
• Assicurati di aver incollato lo snippet esattamente, senza caratteri aggiuntivi intorno.

Se il widget continua a non apparire

L'ancora posiziona solo il widget. Per essere caricato, il widget deve comunque soddisfare le condizioni abituali:

• L'incorporamento dell'app Bundlex deve essere attivato per utilizzare questo metodo con l'ancora. Utilizza un blocco dell'app quando vuoi che il posizionamento sia controllato dal blocco.
• Un bundle pubblicato deve corrispondere al prodotto presente nella pagina.
• Bundlex deve poter rilevare il modulo prodotto corretto e il pulsante Aggiungi al carrello.

Se l'incorporamento e lo sconto corrispondente sono attivi, controlla la priorità del posizionamento e il rilevamento del modulo prodotto. Contatta l'assistenza indicando l'URL del prodotto se l'ancora rimane vuota.

Le landing page sono diverse

Lo snippet di ancoraggio funziona solo sulle pagine prodotto. Se vuoi offrire bundle su una normale pagina Shopify (qualsiasi URL /pages/), aggiungi la sezione Prodotto in evidenza del tema e inserisci al suo interno il blocco Bundlex Bundles featured. Imposta nel blocco lo stesso prodotto della sezione oppure mantieni la connessione al prodotto della sezione. La sezione fornisce il modulo di acquisto; il blocco carica il widget senza uno snippet di ancoraggio.

Controlla il risultato

1. Apri l'URL effettivo del prodotto pubblicato con larghezze desktop e mobile.
2. Verifica che appaia un solo widget nella posizione prevista, con il prodotto e i prezzi dell'offerta corrispondenti.
3. Scegli un'offerta e aggiungila al carrello. Controlla il prodotto principale, le varianti, le quantità e gli eventuali extra selezionati.
4. Procedi al checkout e controlla lo sconto e il subtotale prima di effettuare l'ordine. Se funziona solo l'anteprima del page builder, invia all'assistenza l'URL del prodotto pubblicato.

Per una panoramica completa di come Bundlex sceglie un posizionamento, inclusi il blocco prodotto in evidenza per le landing page, il selettore di posizionamento personalizzato e il blocco dell'app del tema, consulta Dove appare il widget sulla pagina prodotto.