Thunder Page Speed Optimizer mantiene la pagina del prodotto più veloce mentre gli acquirenti sono vicini alla cassa. Installa Thunder per ridurre il trascinamento degli script non critici, quindi utilizza questo elenco di controllo per correggere il pulsante di pagamento dinamico stesso.
Correzione rapida con Thunder
Il pulsante Acquista ora si trova nel punto più alto della pagina del prodotto. Quando gli script dell'app ritardano il thread principale, gli acquirenti possono vedere un pulsante che si carica in ritardo, ignora i tocchi o sembra inaffidabile sui dispositivi mobili.
Caratteristiche di Thunder migliora automaticamente il caricamento degli script, la distribuzione delle immagini e i Core Web Vitals. Non abiliterà l'impostazione del pulsante di pagamento disabilitato, ma aiuta a mantenere reattiva la pagina circostante.
Installa ThunderConferma che il pagamento dinamico è abilitato e idoneo
Shopify accelerated checkout buttons let customers skip the cart and go directly to checkout from a product page. Depending on the shopper, the button may appear as Buy it now, Shop Pay, Apple Pay, Google Pay, PayPal, or another available accelerated method.
Inizia nell'editor del tema. Apri il modello del prodotto e conferma che il blocco dei pulsanti di acquisto o l'impostazione del pagamento dinamico è abilitata. Quindi prova con un normale prodotto disponibile, non un preordine, una variante esaurita, un prodotto solo in abbonamento o un prodotto con regole del piano di vendita insolite.
Se mancano i pulsanti di pagamento accelerato ma anche il normale pulsante Aggiungi al carrello non funziona, utilizza il pulsante guida ai pulsanti aggiungi al carrello. Se i pulsanti accelerati vengono visualizzati in modo incoerente, confrontali con Pulsanti di checkout dinamico che non mostrano l'elenco di controllo.
Ripristina il pulsante di pagamento all'interno del modulo del prodotto
Nei temi Shopify, il pagamento accelerato si trova all'interno del modulo del prodotto. Se un modello di prodotto personalizzato ha rimosso l'output del pulsante di pagamento, Shopify non ha nulla da inizializzare. Se un generatore di pagine ha sostituito il modulo nativo, il pulsante può essere visualizzato ma invia il prodotto o la variante sbagliata.
{% form 'product', product %}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit" name="add">
Aggiungi al carrello
</button>
{{ form | payment_button }}
{% endform %} Mantieni il pulsante di pagamento legato allo stesso modulo prodotto della variante selezionata. Non creare un pulsante Acquista ora falso che faccia clic su un altro pulsante nascosto a meno che non controlli completamente gli aggiornamenti delle varianti, la convalida, i piani di vendita e gli stati di errore.
Se la selezione della variante non è affidabile, risolverlo prima. Il Guida alla selezione delle varianti di Shopify copre ID varianti nascosti, collegamenti diretti e conflitti nel selettore di app.
Trova CSS che nasconde o disabilita il pulsante Acquista ora
Le correzioni della community spesso rivelano problemi CSS: il pulsante è presente, ma un selettore, un overlay, una combinazione di colori o una regola mobile disabilitati lo fanno sembrare scomparso. Ispeziona l'involucro del pulsante dopo il caricamento della pagina del prodotto. Controlla se ha dimensioni, se un altro elemento si trova sopra di esso e se il testo si fonde con lo sfondo.
.shopify-payment-button {
display: block;
margin-top: 12px;
}
.shopify-payment-button__button {
min-height: 48px;
pointer-events: auto;
position: relative;
z-index: 2;
}
.product-form__buttons[aria-busy="true"] .shopify-payment-button__button {
opacity: 0.7;
} Evita regole generali come .product-form button[disabled] { pointer-events:none; } se un'app o un tema scrive disabilitato="falso". Testare l'effettivo stato disabilitato calcolato, non solo se esiste un attributo disabilitato.
Disattiva le app che sostituiscono i pulsanti del prodotto
App permanenti di aggiunta al carrello, app di abbonamento, app di preordine, app di upsell, generatori di pagine e app di opzioni prodotto possono tutte sostituire i pulsanti di acquisto nativi. Disattiva l'incorporamento dell'app in un tema duplicato e testa un prodotto semplice. Se il pulsante funziona, riattiva le app una alla volta.
Non eseguire il debug solo sul desktop. Molti negozi nascondono il pagamento accelerato sui dispositivi mobili perché una barra fissa si sovrappone a esso, un popup lo blocca o uno script del modulo prodotto viene inizializzato troppo tardi. Prova con tocchi mobili reali e controlla INP. Usa il Guida al debug dell'interazione mobile se anche altri pulsanti dell'intestazione o del cassetto non funzionano.
Per una pulizia più ampia delle prestazioni, seguire il guida completa all'ottimizzazione della velocità di Shopify, guida rapida alla pagina del prodottoe Guida alla correzione di JavaScript di terze parti.
Correzione manuale vs. Correzione Thunder
| Problema | Correzione manuale | Correzione del tuono |
|---|---|---|
| Pulsante di pagamento mancante | Ripristina il checkout dinamico nel modulo del prodotto. | Non è un sostituto del liquido. |
| Il pulsante si carica lentamente | Script di prodotto del profilo e incorporamenti di app. | Riduce automaticamente la pressione degli script non critici. |
| Il CSS nasconde il pulsante | Correggi visualizzazione, z-index, colore e regole disabilitate. | Non è una sostituzione logica CSS. |
| Conflitti dell'app | Disabilita le app dei pulsanti del prodotto e testale una per una. | Aiuta lo stack di app rimanente a costare meno. |
Se la pulizia del pulsante di pagamento fa parte di un progetto di conversione più ampio, confronta Prezzi tempestosi con Ottimizzazione della velocità professionale di Shopify.
FAQ
Perché il pulsante Acquista ora di Shopify non funziona?
The dynamic checkout button may be disabled, hidden by the product template, blocked by CSS, missing from the product form, unavailable for the selected variant, or delayed by app and theme JavaScript.
Perché il pulsante Acquista ora viene visualizzato sul desktop ma non sul dispositivo mobile?
CSS specifici per dispositivi mobili, app permanenti per l'aggiunta al carrello, impostazioni dei modelli di prodotto o idoneità del metodo di pagamento possono nascondere il pulsante di pagamento dinamico sugli schermi più piccoli.
Perché il pulsante Acquista ora di Shopify si blocca durante il caricamento?
A theme JavaScript error, invalid product form, unavailable variant, payment script delay, or app conflict can stop the accelerated checkout button from initializing.
I CSS possono rendere non selezionabile il pulsante Acquista ora?
Sì. Selettori con stato disabilitato, sovrapposizioni invisibili, regole degli eventi del puntatore, z-index basso o testo e sfondo dello stesso colore possono far sembrare mancante o impossibile fare clic su un pulsante valido.
Thunder ripara i pulsanti Acquista ora danneggiati?
Thunder migliora il lato prestazionale riducendo il ritardo degli script nelle interazioni con la pagina del prodotto. Non sostituisce il modulo del prodotto o il pulsante di pagamento Liquid mancanti, quindi la logica del tema non funzionante necessita ancora di una correzione manuale.
Mantieni reattivi i pulsanti di pagamento del prodotto.
Thunder riduce il trascinamento dello script che rallenta le azioni ad alto intento sulla pagina del prodotto sui dispositivi mobili.