Shopify Checkout Extensibility nel 2026: scadenze, estensioni UI e guida all'aggiornamento
Di Eoin Villarin2026-02-05, aggiornato il 2026-11-14
L'estensibilità del checkout di Shopify ha sostituito checkout.liquid e Shopify Scripts. Vedi ogni scadenza, cosa succede se non hai aggiornato e come costruire estensioni dell'interfaccia utente di checkout con Preact.
Cos'è l'estensibilità del checkout Shopify e qual era la scadenza?
Shopify checkout extensibility è il modo basato su app di Shopify per personalizzare il checkout, utilizzando estensioni dell'interfaccia utente del checkout, Shopify Functions, web pixels e impostazioni di branding al posto di checkout.liquid, script aggiuntivi e Shopify Scripts. I negozi Plus hanno perso checkout.liquid il 13 agosto 2024 (passaggi del checkout) e il 28 agosto 2025 (pagine di ringraziamento e stato dell'ordine), gli script hanno smesso di funzionare il 30 giugno 2026 e i negozi non Plus hanno dovuto aggiornare entro il 26 agosto 2026.
Punti chiave
- checkout.liquid ha smesso di funzionare sui passaggi Informazioni, Spedizione e Pagamento il 13 agosto 2024 e sulle pagine di ringraziamento e stato dell'ordine Plus il 28 agosto 2025.
- Shopify Scripts si sono bloccati il 15 aprile 2026 e hanno smesso di funzionare il 30 giugno 2026; la logica di sconto, spedizione e pagamento ora appartiene a Shopify Functions.
- I negozi Non‑Plus hanno avuto fino al 26 agosto 2026 per aggiornare le pagine di Ringraziamento e Stato ordine; i tag script su quelle pagine sono ora terminati.
- Le estensioni dell'interfaccia utente del checkout ora utilizzano @shopify/ui-extensions con componenti web Preact e Polaris, sostituendo il vecchio pacchetto @shopify/checkout-ui-extensions-react, con un limite di bundle di 64 KB.
- Le estensioni nei passaggi Informazioni, Spedizione e Pagamento e le app personalizzate con Funzioni richiedono Shopify Plus; le estensioni di stato dell'ordine e di ringraziamento funzionano su ogni piano.
Estensibilità del checkout di Shopify è l'unico modo supportato per personalizzare il checkout di Shopify nel 2026. Ha sostituito checkout.liquidscript aggiuntivi, tag di script e Shopify Scripts con quattro blocchi di costruzione basati su app: estensioni dell'interfaccia utente di checkout, Shopify Functions, pixel web e impostazioni di branding. Tutti i termini limite sono scaduti. checkout.liquid ha smesso di funzionare sui passaggi Informazioni, Spedizione e Pagamento il 13 agosto 2024, i negozi Plus lo hanno perso nelle pagine di ringraziamento e stato ordine il 28 agosto 2025, Shopify Scripts hanno smesso di funzionare il 30 giugno 2026 e i negozi non Plus hanno raggiunto il termine ultimo per le pagine di ringraziamento e stato ordine il 26 agosto 2026.
Se il tuo negozio ha perso una di quelle date, il vecchio codice non è "pausato", semplicemente non viene più eseguito. Questa guida spiega cosa è checkout extensibility, la timeline completa, cosa ha sostituito cosa, come aggiornare passo dopo passo e come creare un'estensione UI del checkout con i componenti web Preact e Polaris attuali. Creo e migro checkout Shopify per vivere, quindi l'ho resa pratica e ho dichiarato solo fatti che ho potuto verificare rispetto alla documentazione ufficiale di Shopify, elencata alla fine.
Cos'è l'estensibilità del checkout di Shopify?
L'estensibilità del checkout di Shopify è l'insieme di strumenti che consente agli app e ai commercianti di modificare l'aspetto e il comportamento del checkout senza modificare direttamente il codice del checkout. Invece di un grande modello Liquid che potevi riscrivere liberamente, il checkout è ora una pagina di proprietà di Shopify con posizioni definite dove il codice approvato può collegarsi. Shopify descrive i pezzi principali su panoramica app del checkout:
- Estensioni dell'interfaccia utente del checkout aggiungi elementi dell'interfaccia come campi, banner, upsell e caselle di controllo. I commercianti li posizionano nell'editor di checkout.
- Shopify Functions cambiare la logica aziendale sui server di Shopify: sconti, opzioni di consegna, opzioni di pagamento, convalida del carrello e del checkout, bundle, ritiro locale e vincoli di adempimento.
- Pixel web gestione dell'analisi e del monitoraggio delle conversioni sottoscrivendo eventi standard del cliente all'interno di una sandbox, invece di iniettare script.
- Branding controlla colori, caratteri, loghi, raggio degli angoli e layout tramite l'editor del checkout e, per modifiche più profonde, l'API Admin GraphQL.
- Estensioni dei pagamenti consente ai fornitori di pagamento di integrare i loro metodi nel checkout.
Lo scambio è semplice. Rinunci alla libertà di riscrivere qualsiasi parte della pagina e in cambio le tue personalizzazioni sopravvivono agli aggiornamenti di Shopify, il checkout rimane veloce e sicuro e funzionalità come Shop Pay, il checkout a una pagina e i nuovi metodi di pagamento continuano a funzionare senza che tu debba toccare nulla.
Scadenza e timeline dell'estensibilità del checkout
La migrazione lontano da checkout.liquid è avvenuta in fasi. La tabella seguente elenca ogni data che conta, chi è stato interessato e cosa è successo. Le date provengono dal changelog di Shopify, dal centro di aiuto e dalla documentazione per gli sviluppatori.
| Data | Cosa è successo | Chi è stato interessato |
|---|---|---|
| 13 febbraio 2023 | Shopify ha annunciato che il file del tema checkout.liquid stava per essere deprecato | Shopify Plus |
| 15 febbraio 2024 | È stato rilasciato un report di personalizzazioni basate su AI per aiutare i negozi Plus a pianificare il loro aggiornamento | Shopify Plus |
| 13 agosto 2024 | checkout.liquid ha smesso di funzionare sui passaggi Informazioni, Spedizione e Pagamento | Shopify Plus |
| 28 agosto 2025 | checkout.liquid, script aggiuntivi e tag di script tramonto sulle pagine di ringraziamento e stato dell'ordine; la casella degli script aggiuntivi è diventata in sola lettura | Shopify Plus (casella di sola visualizzazione per tutti i negozi) |
| 15 aprile 2026 | Shopify Scripts non possono più essere modificati o pubblicati | Negozi Plus che usano Scripts |
| 30 giugno 2026 | Shopify Scripts e l'app Script Editor ritirati; gli script non vengono più eseguiti su nessun negozio | Negozi Plus che usano Scripts |
| 26 agosto 2026 | Scadenza per l'aggiornamento delle pagine di ringraziamento e stato dell'ordine; sunset dei tag script | Negozi Non‑Plus |
In breve, l'aggiornamento a checkout extensibility non è più opzionale per nessuno. A partire da novembre 2026 non esiste un piano o un'impostazione che ripristini checkout.liquid, script aggiuntivi o Shopify Scripts.
Cosa succede se un negozio non si aggiorna?
Il codice legacy smette di funzionare e il negozio torna alle pagine standard di Shopify. In pratica ciò significa:
- modifiche checkout.liquid non renderizzano più. Di Shopify documentazione checkout.liquid dichiara che non è supportato nelle fasi Informazioni, Spedizione e Pagamento ed è stato eliminato nelle pagine Thank you e Order status il 28 agosto 2025.
- Script aggiuntivi non può essere modificato, perché la casella è stata in sola lettura dal 28 agosto 2025 e il codice al suo interno non viene più eseguito sulle pagine aggiornate. Le tipiche vittime sono i tag di conversione, il monitoraggio degli affiliati, i sondaggi post-acquisto e le richieste di recensione.
- Tag di script dalle app le pagine Thank you e Order status sono tramontate (Plus il 28 agosto 2025, non Plus il 26 agosto 2026).
- Shopify Scripts non applicare più sconti, nascondere le tariffe di spedizione o riordinare i metodi di pagamento. Di Shopify Pagina di transizione degli script dice chiaramente che gli script non vengono più eseguiti su nessun negozio.
la guida per l'aggiornamento non Plus di Shopify conferma che l'aggiornamento sostituisce le pagine esistenti di Thank you e Order status e qualsiasi personalizzazione su di esse, e che i negozi sul piano Pause and Build vengono aggiornati automaticamente e permanentemente. Per i checkout Plus ancora su checkout.liquid, Shopify ha dichiarato che li avrebbe aggiornati automaticamente entro 30 giorni dalla notifica via email. Le pagine di aiuto attuali di Shopify non pubblicano una data di auto-aggiornamento esatta per ogni tipo di negozio, quindi il controllo più sicuro è aprire Impostazioni, Checkout nel tuo admin e guarda quale versione è presente su ogni pagina.
checkout.liquid vs estensibilità del checkout
Questo è il confronto che faccio passare ai clienti quando chiedono perché le loro vecchie personalizzazioni non possono semplicemente essere copiate.
| Area | checkout.liquid (legacy) | Estensibilità del checkout (corrente) |
|---|---|---|
| Come personalizzi | Modifica un modello Liquid, CSS e JavaScript direttamente | Le app aggiungono estensioni UI, funzioni e pixel in posizioni definite |
| Chi potrebbe usarlo | Solo Shopify Plus | Tutti i piani nelle pagine di ringraziamento e stato dell'ordine; Plus per le fasi di Informazioni, Spedizione e Pagamento |
| Aggiorna la sicurezza | Gli aggiornamenti di Shopify potrebbero interrompere il codice personalizzato | Le estensioni sono versionate e continuano a funzionare attraverso gli aggiornamenti del checkout |
| Logica di sconto e spedizione | Shopify Scripts scritti in Ruby | Shopify Functions compilate in WebAssembly (Rust o JavaScript) |
| Tracciamento | Script aggiuntivi ed etichette di script nella pagina | Pixel dell'app e pixel personalizzati in un sandbox |
| Stilizzazione | Qualsiasi CSS | Branding dell'editor del checkout più l'API di branding GraphQL su Plus |
| Prestazioni e sicurezza | Gli script di terze parti sono stati eseguiti sulla pagina di pagamento | Le estensioni vengono eseguite in un sandbox Web Worker senza accesso al DOM |
| Shop Pay e checkout in una pagina | Non compatibile con template personalizzati | Completamente supportato |
| Stato nel 2026 | Rimosso | L'unica opzione supportata |
Quali parti del checkout Shopify puoi personalizzare?
Le estensioni dell'interfaccia utente del checkout vengono renderizzate in bersagliUn target è un punto denominato nel checkout e Shopify raggruppa i target in tre tipi.
- Bersagli di bloccocome
purchase.checkout.block.renderepurchase.thank-you.block.renderche i commercianti possono trascinare in qualsiasi posizione supportata nell'editor di checkout. - bersagli staticiche vengono renderizzati in un punto fisso, ad esempio dopo i campi di contatto, dopo gli articoli della linea di carrello o prima dei pulsanti di azione.
- Target eseguibiliche restituiscono dati o logica senza renderizzare nulla.
La pagina Thank you utilizza purchase.thank-you bersagli e la pagina dello stato dell'ordine ora vive nei conti dei clienti, utilizzando customer-account.order-status bersagli.
Cosa può fare ogni piano Shopify
| Funzionalità | Piani Non‑Plus | Shopify Plus |
|---|---|---|
| Estensioni dell'interfaccia utente sulle pagine Thank you e Order status | Sì | Sì |
| Estensioni dell'interfaccia utente sui passaggi Informazioni, Spedizione e Pagamento | No | Sì |
| App pubbliche che contengono Shopify Functions | Sì | Sì |
| App personalizzate che contengono Shopify Functions | No | Sì |
| Branding di base nell'editor di checkout | Sì | Sì |
| Branding avanzato tramite l'API GraphQL Admin | No | Sì (anche sui negozi di sviluppo) |
| Pixel dell'app e pixel personalizzati | Sì | Sì |
Il limite Plus sui passaggi Informazioni, Spedizione e Pagamento proviene direttamente da riferimento estensioni UI del checkoute la regola dell'app personalizzata per Functions è in Documentazione Shopify Functions.
Estensioni dell'interfaccia utente di Shopify Checkout nel 2026: React, Preact e componenti web
Se cerchi @shopify/checkout-ui-extensions-reactstai guardando la prima generazione dello strumento. I nomi dei pacchetti sono cambiati due volte e molti vecchi tutorial mostrano ancora le importazioni originali.
| Pacchetto | Era | Stato nel novembre 2026 |
|---|---|---|
| @shopify/checkout-ui-extensions-react e @shopify/checkout-ui-extensions | 2022 al 2023 | Legacy; ultimo aggiornamento ad agosto 2023 (versione 0.27.3) |
| @shopify/ui-extensions-react | Versioni API dal 2023-04 al 2025-07 | sostituito; la linea di rilascio finale è 2025.7.x |
| @shopify/ui-extensions con Preact | Versione API 2025-10 e successive | Corrente; l'ultima è 2026.10.0 per la versione API 2026-10 |
Dalla versione API 2025-10, le nuove estensioni utilizzano Componenti web Polaris per impostazione predefinita. I componenti sono elementi personalizzati come <s-stack>, <s-checkbox>, <s-text>, <s-button> e <s-banner>renderizzato con Preact. I dati e le azioni di checkout sono stati spostati dagli hook React a un globale shopify oggetto, ad esempio shopify.cost, shopify.buyerIdentity e shopify.applyAttributeChange()Shopify CLI genera un shopify.d.ts file con i tipi quando esegui shopify app dev.
Il motivo principale del passaggio è la dimensione. Un bundle di estensione UI compilato non può superare 64 KB (le estensioni dell'account cliente a pagina intera ottengono 128 KB) e Shopify applica questo limite al momento della distribuzione. Il runtime ridotto di Preact lascia molto più spazio per il tuo codice. Due altre modifiche che vale la pena conoscere: dalla versione API 2026-04, metafields la proprietà è deprecata a favore di shopify.appMetafields e modifiche ai metacampi del carrello, e il nuovo @shopify/ui-extensions-tester il pacchetto aggiunge test unitari.
di Shopify guida alla migrazione ai componenti web non elenca una data di rimozione per le estensioni basate su React bloccate su versioni API precedenti. Tuttavia, le nuove funzionalità atterrano solo nelle versioni correnti, quindi pianifica il passaggio durante il tuo prossimo aggiornamento reale.
Come aggiornare a Shopify checkout extensibility passo dopo passo
Sia che tu stia ripulendo dopo un aggiornamento automatico o che tu abbia ancora logica dell'era di Scripts da ricostruire, il processo è lo stesso.
- Verifica cosa avevi. In Impostazioni, Checkoutapri la guida di aggiornamento o il rapporto di personalizzazioni. Elenca le modifiche a checkout.liquid precedenti e ordina gli script aggiuntivi per scopo, come il monitoraggio degli ordini o l'autenticazione. Esporta anche il codice Shopify Scripts precedente se lo hai ancora.
- Mappa ogni personalizzazione al suo sostituto. Le modifiche all'interfaccia utente diventano estensioni dell'interfaccia utente del checkout, la logica di sconto e spedizione diventa Shopify Functions, il tracciamento diventa pixel dell'app o pixel personalizzati e le modifiche visive diventano impostazioni di branding.
- Controlla prima l'App Store. Molte esigenze comuni, come messaggi regalo, date di consegna, sondaggi post‑acquisto e sconti a livelli, esistono già come app di checkout extensibility. Creare soluzioni personalizzate ha senso solo quando nessuna app è adatta o la logica è specifica per il tuo business.
- Crea o installa i rimpiazzamenti su un negozio di sviluppo o un checkout duplicato. Inoltre i negozi possono creare un checkout bozza nell'editor e lasciare intatto quello live.
- Ricrea la tracciatura. Installa le app ufficiali per Google, Meta e TikTok, che spediscono pixel dell'app, e sposta eventuali tag rimanenti in Impostazioni, Eventi del cliente come pixel personalizzati.
- Testa ordini reali. Utilizza la modalità di test per effettuare ordini tramite ogni metodo di pagamento, entrambi i layout di checkout e ogni mercato in cui vendi, quindi conferma che le conversioni arrivino nelle tue analisi.
- Pubblica e monitora. Pubblica il nuovo checkout, quindi confronta il tasso di conversione, il valore medio dell'ordine e il fatturato tracciato con le settimane precedenti alla modifica.
Se il tuo negozio necessita di questo lavoro fatto correttamente, è una parte fondamentale del mio Servizio di sviluppo Shopify.
Come creare un'estensione UI del checkout Shopify
Hai bisogno di un account Shopify Partner, dell'ultimo Shopify CLI e di un negozio di sviluppo. Per indirizzare i passaggi Informazioni, Spedizione o Pagamento, il negozio di sviluppo deve avere le funzionalità Shopify Plus abilitate.
- Esegui
shopify app initper creare un'app o aprire un'app esistente. - Esegui
shopify app generate extension --template checkout_uie dai all'estensione un nome chiaro. - Modifica
shopify.extension.tomlper impostare la versione dell'API, le funzionalità e il bersaglio. - Scrivi l'interfaccia utente in Preact con componenti web Polaris.
- Esegui
shopify app devper visualizzare in anteprima rispetto a un checkout reale nel tuo negozio di sviluppo. - Esegui
shopify app deployper rilasciare una nuova versione dell'app, quindi aggiungi il blocco nell'editor del checkout.
Ecco la configurazione per un'opzione di wrapping regalo. Viene renderizzata in un target di blocco e espone un'impostazione del commerciante per l'etichetta della casella di controllo:
api_version = "2026-10"
[[extensions]]
name = "Gift wrap option"
handle = "gift-wrap-option"
type = "ui_extension"
[extensions.capabilities]
api_access = true
network_access = false
block_progress = false
[[extensions.targeting]]
module = "./src/Checkout.jsx"
target = "purchase.checkout.block.render"
[settings]
[[settings.fields]]
key = "label_text"
type = "single_line_text_field"
name = "Checkbox label"
Ecco l'estensione stessa, salvata come src/Checkout.jsxVerifica che il checkout corrente consenta modifiche di attributo, salva la scelta come attributo del carrello che il commerciante vede sull'ordine e mostra un errore amichevole se il salvataggio fallisce:
import '@shopify/ui-extensions/preact';
import { render } from 'preact';
import { useState } from 'preact/hooks';
export default function extension() {
render(<Extension />, document.body);
}
function Extension() {
const [error, setError] = useState('');
const label = shopify.settings.value.label_text || 'Gift wrap this order';
if (!shopify.instructions.value.attributes.canUpdateAttributes) {
return null;
}
async function onCheckboxChange(event) {
const isChecked = event.target.checked;
const result = await shopify.applyAttributeChange({
type: 'updateAttribute',
key: 'gift_wrap',
value: isChecked ? 'yes' : 'no',
});
if (result.type === 'error') {
setError('We could not save your gift wrap choice. Please try again.');
return;
}
setError('');
}
return (
<s-stack gap="base">
<s-checkbox label={label} onChange={onCheckboxChange} />
{error && <s-banner tone="critical">{error}</s-banner>}
</s-stack>
);
}
Il shopify.instructions controlla le cose. Alcuni checkout, come i checkout degli ordini di bozza, non consentono alcune modifiche al carrello e l'estensione dovrebbe fare un passo indietro in silenzio invece di lanciare un errore all'acquirente.
Lista di controllo per i test
- i bersagli statici vengono renderizzati automaticamente nella loro posizione fissa mentre
shopify app devsi esegue. - I bersagli di blocco possono essere visualizzati in anteprima in un punto specifico con un riferimento di posizionamento nell'URL del checkout, ad esempio
WALLETS1di Shopify guida ai test le elenca tutte. - In Impostazioni, Checkout, Personalizzaaggiungi il blocco dell'app e spostalo tra le posizioni.
- Testa entrambi i layout a una pagina e a tre pagine, perché i commercianti possono passare dall'uno all'altro.
- Effettua ordini di prova completi, incluso Shop Pay, con pagamenti in modalità test.
Shopify Functions, web pixels e branding
Le estensioni dell'interfaccia utente sono solo una parte dell'estensibilità del checkout di Shopify. La maggior parte di ciò che facevano gli script di Shopify ora appartiene a Shopify Functionsche vengono eseguiti sui server di Shopify quando il checkout li chiama. Sono scritti in qualsiasi linguaggio che si compila in WebAssembly, con modelli Rust e JavaScript forniti; Shopify consiglia Rust per i carrelli grandi.
| Vecchio Shopify Script | Sostituzione della funzione |
|---|---|
| Script di voce di riga (sconti a livelli, bundle e cliente) | Funzioni di sconto |
| Script di spedizione (nascondi, rinomina, riordina tariffe) | Funzioni di personalizzazione della consegna |
| Script di pagamento (nascondi o riordina i metodi) | Funzioni di personalizzazione dei pagamenti |
| Limiti di quantità e regioni bloccate | Funzioni di convalida del carrello e del checkout |
| Bundle create con trucchi per articoli di acquisto | Funzioni di trasformazione del carrello |
Pixel web sostituisci il tracciamento che viveva negli script aggiuntivi. I pixel dell'app vengono eseguiti in un sandbox Web Worker rigoroso, mentre i pixel personalizzati aggiunti dai commercianti vengono eseguiti in un sandbox iframe più lasco che non può ancora raggiungere la pagina superiore. Entrambi rispettano il consenso del cliente. Un pixel di app minimo che segnala check-out completati ha questo aspetto:
import { register } from '@shopify/web-pixels-extension';
register(({ analytics }) => {
analytics.subscribe('checkout_completed', (event) => {
const checkout = event.data && event.data.checkout;
if (!checkout) {
return;
}
fetch('https://analytics.example.com/collect', {
method: 'POST',
keepalive: true,
body: JSON.stringify({
orderId: checkout.order ? checkout.order.id : null,
total: checkout.totalPrice ? checkout.totalPrice.amount : null,
currency: checkout.currencyCode,
}),
});
});
});
Branding copre colori, tipografia, loghi e stile delle sezioni. Ogni piano ottiene i controlli di base nell'editor del checkout. I negozi Plus e i negozi di sviluppo possono andare oltre tramite l'API Admin GraphQL. Nota che nella versione API 2026-10 Shopify segna checkoutBrandingUpsert come deprecato a favore di checkoutAndAccountsConfigurationUpdatecosì il nuovo codice di branding dovrebbe puntare alla mutazione più recente.
Estensibilità del checkout per commercianti
Se gestisci un negozio e non scrivi codice, ecco cosa devi fare ora:
- Apri Impostazioni, Checkout e conferma che il tuo checkout, le pagine di ringraziamento e stato dell'ordine siano sulla nuova versione.
- Leggi la casella degli script aggiuntivi in sola lettura e elenca ogni strumento che dipendeva da essa.
- Reinstalla o aggiorna quelle app in modo che utilizzino pixel dell'app o blocchi dell'app e conferma nella dashboard di ogni strumento che gli ordini vengono ancora registrati.
- Se hai fatto affidamento su Shopify Scripts per sconti o regole di spedizione, verifica che ogni regola esista ora come app o funzione personalizzata. Un carrello che dovrebbe attivare la regola e uno che non dovrebbe sono il test più veloce.
- Utilizza l'editor di checkout per aggiungere badge di fiducia, note d'ordine, upsell o sondaggi da app installate, quindi anteprima su dispositivi mobili, dove avvengono la maggior parte degli ordini.
La maggior parte dei negozi può completare questo con le app esistenti. Il lavoro personalizzato è vantaggioso solo per logiche uniche, come regole all’ingrosso, campi B2B o integrazioni di loyalty.
Estensibilità del checkout per sviluppatori
Se sviluppi per Shopify, il modello mentale è diverso dal lavoro sui temi:
- Le estensioni vengono eseguite in un Web Worker senza
windowo DOM. Le librerie che toccano entrambi falliranno. - Ogni chiamata al tuo backend non è attendibile. Autenticarla con un token di sessione da
shopify.sessionTokene ricontrolla prezzi ed eleggibilità sul server. - Aggiungi un
api_versione aggiorna secondo un programma. Shopify rilascia una nuova versione ogni trimestre e la documentazione più recente presuppone Preact e componenti web. - Le app pubbliche che includono chiamate di rete necessitano
network_accessnel TOML e l'approvazione per l'accesso alla rete nel Partner Dashboard. Il tuo server deve anche rispondere alle richieste CORS. - Le app pubbliche che accedono a dati protetti ora devono affrontare regole di piattaforma più severe. Il mio post su Requisito di lista di indirizzi IP consentiti di Shopify per app pubbliche copre una modifica recente.
Quando un progetto necessita di un backend personalizzato, dashboard di amministrazione o integrazione attorno all'estensione, ciò rientra nel mio sviluppo web personalizzato lavoro.
Errori comuni nell'estensibilità del checkout
- Supponendo che l'estensione appaia automaticamente. La distribuzione rende disponibile solo il blocco. Un commerciante deve ancora aggiungerlo nell'editor del checkout, il che causa molti biglietti "funziona nel mio negozio".
- Sforare il budget di 64 KB. Le librerie di date, i pacchetti di icone e gli SDK di analisi si sommano velocemente. Importa solo ciò che ti serve e controlla la dimensione del build.
- Copia di vecchie guide. Codice che importa
@shopify/checkout-ui-extensions-reacto utilizza hook di React comeuseApplyAttributeChangeappartiene a versioni API precedenti. Inizia nuovo lavoro su@shopify/ui-extensionscon Preact. - Utilizzando
block_progresssenza cura. Questa capacità consente a un'estensione di fermare l'acquirente dal continuare. Usala solo per la validazione reale e spiega sempre il motivo. - Dimenticare il monitoraggio dopo un aggiornamento automatico. Il fatturato può sembrare diminuito quando solo il tag ha smesso di attivarsi. Confronta gli ordini in Shopify con le tue piattaforme pubblicitarie.
- Ricostruzione di uno script come estensione UI. Gli sconti e le regole di spedizione appartengono alle funzioni sul server, non nel codice lato client che un acquirente può manomettere.
- Testare solo un layout o un mercato. Checkout a una pagina e a tre pagine, valute diverse e metodi di pagamento differenti si comportano tutti in modo diverso.
La velocità del checkout è importante quanto le funzionalità, motivo per cui fa parte del mio Lista di controllo per l'ottimizzazione della velocità di ShopifySe avevi il monitoraggio sulle vecchie pagine, la mia guida a migrazione dei pixel dopo la deprecazione del tag script va più in profondità e, se vendi tramite assistenti AI, vedi Commercio agenziale su Shopify.
Domande frequenti
Cos'è l'estensibilità del checkout di Shopify?
Shopify checkout extensibility è il sistema basato su app di Shopify per personalizzare il checkout. Utilizza estensioni dell'interfaccia utente del checkout per modifiche dell'interfaccia, Shopify Functions per la logica aziendale, web pixels per il monitoraggio e le impostazioni di branding per il design. Ha sostituito checkout.liquid, script aggiuntivi, tag di script e Shopify Scripts, tutti ritirati.
Quale era la scadenza per l'estensibilità del checkout?
Ce ne sono stati diversi. I negozi Plus hanno perso checkout.liquid sui passaggi Informazioni, Spedizione e Pagamento il 13 agosto 2024 e sulle pagine di ringraziamento e stato ordine il 28 agosto 2025. Gli Shopify Scripts hanno smesso di funzionare il 30 giugno 2026. I negozi non Plus hanno dovuto aggiornare le pagine di ringraziamento e stato ordine entro il 26 agosto 2026.
checkout.liquid è deprecato?
Sì. La documentazione di Shopify dice che checkout.liquid non è supportato sui passaggi Informazioni, Spedizione e Pagamento ed è stato eliminato sulle pagine di ringraziamento e stato ordine il 28 agosto 2025. Non c'è modo di riattivarlo nel 2026, quindi qualsiasi personalizzazione rimanente deve essere ricostruita con l'estensibilità del checkout.
Cosa sono le estensioni UI del checkout di Shopify?
Le estensioni dell'interfaccia utente del checkout sono piccole app sandbox che aggiungono elementi di interfaccia, come campi, banner o offerte, a bersagli definiti nel checkout, nella pagina di ringraziamento e nella pagina dello stato dell'ordine. Dall'API versione 2025-10 sono create con componenti web Preact e Polaris usando @shopify/ui-extensions pacchetto, con un limite di bundle di 64 KB.
@shopify/checkout-ui-extensions-react è ancora utilizzato?
No. Era il pacchetto originale 2022‑2023 ed è stato pubblicato per l’ultima volta ad agosto 2023. È stato seguito da @shopify/ui-extensions-reactla cui ultima linea di rilascio punta alla versione API 2025-07, e poi da @shopify/ui-extensions con Preact, che è ciò che usano i documenti attuali di Shopify.
Le negoziazioni non Plus possono utilizzare le estensioni del checkout?
Sì, sulle pagine di ringraziamento e stato ordine. I negozi non Plus possono anche utilizzare app pubbliche che contengono Shopify Functions, pixel dell'app e branding di checkout di base. Le estensioni UI sui passaggi Informazioni, Spedizione e Pagamento, app personalizzate con Functions e branding basato su API richiedono Shopify Plus.
Cosa sono le app di estensibilità del checkout?
Sono app dello Shopify App Store costruite sull'estensibilità del checkout, come app per sondaggi post-acquisto, date di consegna, opzioni regalo, upsell, fidelizzazione e sconti a più livelli. Cerca app che menzionino estensioni UI del checkout, Shopify Functions o pixel dell'app ed evita quelle che chiedono ancora di incollare codice in script aggiuntivi.
Cosa succede se il mio negozio non ha eseguito l'aggiornamento?
Le personalizzazioni precedenti smettono di funzionare. Le modifiche a checkout.liquid, gli script aggiuntivi, i tag di script della pagina Grazie e Shopify Scripts non vengono più eseguiti e le pagine tornano alle versioni standard di Shopify. Controlla Impostazioni, Checkout per confermare la versione di ogni pagina, quindi ricostruisci ciò che hai perso con app, estensioni, funzioni o pixel.
Prossimi passi
Verifica il tuo checkout, conferma che il monitoraggio sia ancora attivo e sposta qualsiasi logica persa in Funzioni o app. Per un esempio del lavoro Shopify Plus che faccio, vedi il Case study su Real Mad Honeyo esplora di più Case study su Shopify e WordPressHai bisogno di un'estensione di checkout creata o migrata in Preact? Invia i dettagli tramite il mio modulo di contatto.
Fonti
- Sviluppo Shopify: checkout.liquid (date di deprecazione e sunset)
- Shopify Changelog: il file del tema checkout.liquid viene deprecato (13 febbraio 2023)
- Shopify Changelog: Report delle personalizzazioni per negozi Plus (scadenza 13 agosto 2024)
- Centro assistenza Shopify: aggiornamento delle pagine di ringraziamento e stato dell'ordine (non Plus)
- Shopify Dev Changelog: Shopify Scripts deprecato il 30 giugno 2026
- Centro assistenza Shopify: transizione da Shopify Scripts a Shopify Functions
- Shopify Dev: crea app di checkout
- Riferimento API per le estensioni dell'interfaccia utente di Shopify Checkout
- Shopify Dev: Configurazione dell'estensione UI del checkout
- Sviluppo Shopify: migrazione ai componenti web Polaris
- Sviluppo Shopify: Shopify Functions
- Sviluppo Shopify: Web pixels
- Shopify Dev: mutazione checkoutBrandingUpsert
- npm: @shopify/checkout-ui-extensions-react e npm: @shopify/ui-extensions