Correzione rapida: non consentire agli script di ritardare i pulsanti di pagamento
I pulsanti di pagamento accelerato si trovano sotto il CTA del prodotto, dove ogni ritardo sembra sospetto. Se la pagina del prodotto è impegnata nel caricamento di widget di app, tag di tracciamento, personalizzazione e contenuti multimediali pesanti, i pulsanti di pagamento possono apparire in ritardo o spostarsi dopo che l'acquirente è pronto per l'acquisto.
Thunder Page Speed Optimizer migliora automaticamente il caricamento degli script e i Core Web Vitals. Utilizzare Analisi delle funzionalità di Thunder per il livello di prestazioni automatizzato, quindi utilizza i controlli di idoneità e tema riportati di seguito.
Accelera i CTA di pagamentoConferma l'impostazione del pagamento dinamico di Shopify
Shopify's help documentation explains that accelerated checkout buttons are controlled from the theme editor. Go to Online Store, Customize, open the product template, select the Buy buttons block, and enable the option to show accelerated checkout buttons. Repeat this for featured product sections if the issue happens on the homepage.
Usa Shopify Documentazione del pulsante di pagamento accelerato come linea di base. Se l'opzione è disattivata, la correzione è un'impostazione. Se l'opzione è attiva ma i pulsanti continuano a non essere visualizzati, passa al codice del tema e all'idoneità al pagamento.
Quando il problema fa parte di un problema più ampio relativo alla pagina del prodotto, confrontalo con Guida ai pulsanti Aggiungi al carrello di Shopify e guida rapida alla pagina del prodotto.
Scopri perché Apple Pay, PayPal e Google Pay variano
I pulsanti di pagamento dinamico non sono gli stessi per ogni visitatore. Apple Pay dipende dai dispositivi Apple, da Safari, dalla configurazione del portafoglio e dall'idoneità del commerciante. Google Pay dipende dal browser e dal contesto dell'account. PayPal può mostrare quando i pulsanti del portafoglio no. Questo è il motivo per cui un commerciante potrebbe vedere PayPal sul desktop ma non Apple Pay, mentre un cliente su iPhone vede un pulsante diverso.
Prova con dispositivi e metodi di pagamento reali invece di aspettarti uno screenshot per dimostrare tutto. Utilizza Safari su iPhone per Apple Pay, Chrome con un account Google configurato per Google Pay e una normale sessione desktop per PayPal. Quindi confronta il comportamento della pagina del prodotto, della pagina del carrello e del cassetto del carrello.
Se i pulsanti di pagamento compaiono solo dopo un lungo ritardo, leggere il Guida alla correzione di Shopify INP e Guida all'impatto degli script di terze parti.
Controlla il codice del tema, il posizionamento del cassetto del carrello e il CSS
La documentazione per gli sviluppatori di Shopify afferma che i pulsanti di pagamento accelerato possono essere aggiunti ai modelli di prodotto, ai modelli di carrello, alle sezioni e ai cassetti del carrello. Nei temi, la parte importante è rendere il componente del pulsante di pagamento in un contesto di modulo di prodotto valido. Se una sezione personalizzata lo ha rimosso, spostato all'esterno del modulo o inserito in CSS nascosti, non verrà visualizzato correttamente.
In Liquid, i pulsanti di pagamento appaiono spesso attraverso l'output del pulsante di pagamento del modulo prodotto:
{% form 'product', product %}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit">Aggiungi al carrello</button>
{{ form | payment_button }}
{% endform %}Se usi un tema personalizzato, controlla i CSS per regole come Display :nessuno, opacità, posizionamento assoluto o sovrapposizioni z-index attorno ai contenitori dei pulsanti di pagamento. Un'app di aggiunta al carrello o un blocco di acquisto rapido personalizzato possono nascondere i pulsanti senza disabilitarli in Shopify.
Per le implementazioni del cassetto del carrello, Shopify documenti per sviluppatori di pagamento accelerato sono il riferimento migliore rispetto agli snippet casuali.
Le app possono nascondere il checkout dinamico per motivi validi
Alcune app sopprimono intenzionalmente i pulsanti di pagamento dinamico perché il percorso diretto del portafoglio può saltare una configurazione di prodotto richiesta, un piano di vendita, una convalida del pacchetto, un'opzione regalo o un upselling del carrello. Questo non è sempre un bug. Diventa un problema quando l'app nasconde il pulsante anche per prodotti semplici che non necessitano di validazioni particolari.
Disabilita le app di abbonamento, pacchetto, preordine, personalizzazione e carrello in un tema duplicato. Testare nuovamente un prodotto semplice e un prodotto configurato reale. Se i prodotti semplici vengono ripristinati ma i prodotti configurati no, il problema è il percorso di pagamento dell'app. Se nessuno dei due si ripristina, controlla il codice del tema e le impostazioni di pagamento.
Mantieni sano il percorso più ampio delle entrate con Guida alla velocità di pagamento di Shopify, Elenco di controllo per il debug del pulsante di pagamentoe guida completa all'ottimizzazione della velocità di Shopify.
Elenco di controllo per il debug del pagamento dinamico manuale
| Controlla | Cosa dimostra | Correzione |
|---|---|---|
| Impostazione tema abilitata | I pulsanti sono consentiti nell'editor. | Abilita nel blocco pulsanti Acquista. |
| L'anteprima dell'alba funziona | Il tema o l'app live nasconde i pulsanti. | Forma del prodotto Diff e incorporamenti dell'app. |
| Viene visualizzato solo PayPal | Il contesto del portafoglio potrebbe essere normale. | Prova Apple Pay e Google Pay sui dispositivi idonei. |
| I pulsanti si caricano in ritardo | Gli script bloccano il rendering. | Riduci JS di terze parti e testa INP. |
| I prodotti configurati falliscono | La convalida dell'app potrebbe nascondere il pagamento diretto. | Conferma le regole dell'abbonamento, del pacchetto o dell'app opzionale. |
Se il percorso manuale è troppo lento, confrontare Prezzi tempestosi con Ottimizzazione pratica della velocità di Shopify. Per la selezione dell'app, vedere migliore guida alle app veloci di Shopify.
FAQ
Perché i pulsanti di pagamento dinamico di Shopify non vengono visualizzati?
Potrebbero essere disabilitati nel blocco del pulsante di acquisto del tema, nascosti dai CSS, bloccati dal codice del modulo del prodotto personalizzato, non supportati per il browser o il portafoglio dell'acquirente o influenzati dai requisiti di pagamento, pacchetto, abbonamento o app.
Perché vedo solo PayPal e non Apple Pay o Google Pay?
I pulsanti di pagamento accelerato sono contestuali. Shopify mostra i metodi di pagamento in base al dispositivo, al browser, alla configurazione del portafoglio, alla valuta, alle impostazioni di pagamento e all'idoneità del cliente.
I pulsanti di pagamento dinamico possono essere visualizzati nel cassetto del carrello?
Sì, la documentazione per gli sviluppatori di Shopify afferma che i pulsanti di pagamento accelerato possono essere aggiunti ai modelli di prodotto, ai modelli di carrello, alle sezioni o ai cassetti del carrello, ma il tema deve visualizzare il componente del pulsante di pagamento corretto.
Le app possono nascondere i pulsanti di pagamento accelerato di Shopify?
Sì. Le app relative a pacchetti, preordini, abbonamenti, carrelli o pagamenti possono alterare i moduli dei prodotti, richiedere la convalida del carrello o nascondere pulsanti accelerati per impedire percorsi di pagamento non supportati.
I pulsanti di checkout dinamico migliorano la conversione?
Possono ridurre l'attrito alla cassa per gli acquirenti idonei, ma non dovrebbero sostituire un percorso affidabile di aggiunta al carrello e carrello. Testa la conversione, la visibilità del portafoglio e la velocità prima di renderli l'unico CTA prominente.
Fai in modo che i CTA di pagamento vengano caricati in modo pulito.
Thunder aiuta le pagine dei prodotti a caricarsi e a rispondere più velocemente mentre risolvi l'esatta impostazione di pagamento dinamico, il tema o il conflitto dell'app.