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.

DataCosa è successoChi è stato interessato
13 febbraio 2023Shopify ha annunciato che il file del tema checkout.liquid stava per essere deprecatoShopify Plus
15 febbraio 2024È stato rilasciato un report di personalizzazioni basate su AI per aiutare i negozi Plus a pianificare il loro aggiornamentoShopify Plus
13 agosto 2024checkout.liquid ha smesso di funzionare sui passaggi Informazioni, Spedizione e PagamentoShopify Plus
28 agosto 2025checkout.liquid, script aggiuntivi e tag di script tramonto sulle pagine di ringraziamento e stato dell'ordine; la casella degli script aggiuntivi è diventata in sola letturaShopify Plus (casella di sola visualizzazione per tutti i negozi)
15 aprile 2026Shopify Scripts non possono più essere modificati o pubblicatiNegozi Plus che usano Scripts
30 giugno 2026Shopify Scripts e l'app Script Editor ritirati; gli script non vengono più eseguiti su nessun negozioNegozi Plus che usano Scripts
26 agosto 2026Scadenza per l'aggiornamento delle pagine di ringraziamento e stato dell'ordine; sunset dei tag scriptNegozi 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.

Areacheckout.liquid (legacy)Estensibilità del checkout (corrente)
Come personalizziModifica un modello Liquid, CSS e JavaScript direttamenteLe app aggiungono estensioni UI, funzioni e pixel in posizioni definite
Chi potrebbe usarloSolo Shopify PlusTutti i piani nelle pagine di ringraziamento e stato dell'ordine; Plus per le fasi di Informazioni, Spedizione e Pagamento
Aggiorna la sicurezzaGli aggiornamenti di Shopify potrebbero interrompere il codice personalizzatoLe estensioni sono versionate e continuano a funzionare attraverso gli aggiornamenti del checkout
Logica di sconto e spedizioneShopify Scripts scritti in RubyShopify Functions compilate in WebAssembly (Rust o JavaScript)
TracciamentoScript aggiuntivi ed etichette di script nella paginaPixel dell'app e pixel personalizzati in un sandbox
StilizzazioneQualsiasi CSSBranding dell'editor del checkout più l'API di branding GraphQL su Plus
Prestazioni e sicurezzaGli script di terze parti sono stati eseguiti sulla pagina di pagamentoLe estensioni vengono eseguite in un sandbox Web Worker senza accesso al DOM
Shop Pay e checkout in una paginaNon compatibile con template personalizzatiCompletamente supportato
Stato nel 2026RimossoL'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.

Disegno di un piano architettonico, come un layout di checkout con bersagli di estensione definiti
Le estensioni vengono renderizzate solo in obiettivi definiti. Foto: rawpixel, CC0
  • Bersagli di bloccocome purchase.checkout.block.render e purchase.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‑PlusShopify Plus
Estensioni dell'interfaccia utente sulle pagine Thank you e Order statusSìSì
Estensioni dell'interfaccia utente sui passaggi Informazioni, Spedizione e PagamentoNoSì
App pubbliche che contengono Shopify FunctionsSìSì
App personalizzate che contengono Shopify FunctionsNoSì
Branding di base nell'editor di checkoutSìSì
Branding avanzato tramite l'API GraphQL AdminNoSì (anche sui negozi di sviluppo)
Pixel dell'app e pixel personalizzatiSì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.

PacchettoEraStato nel novembre 2026
@shopify/checkout-ui-extensions-react e @shopify/checkout-ui-extensions2022 al 2023Legacy; ultimo aggiornamento ad agosto 2023 (versione 0.27.3)
@shopify/ui-extensions-reactVersioni API dal 2023-04 al 2025-07sostituito; la linea di rilascio finale è 2025.7.x
@shopify/ui-extensions con PreactVersione API 2025-10 e successiveCorrente; 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.

Smartphone su una scrivania di legno accanto a un laptop per testare un'estensione di checkout su dispositivi mobili
Un'estensione Preact testata rispetto a un checkout reale. Foto: rawpixel, CC0
  1. Esegui shopify app init per creare un'app o aprire un'app esistente.
  2. Esegui shopify app generate extension --template checkout_ui e dai all'estensione un nome chiaro.
  3. Modifica shopify.extension.toml per impostare la versione dell'API, le funzionalità e il bersaglio.
  4. Scrivi l'interfaccia utente in Preact con componenti web Polaris.
  5. Esegui shopify app dev per visualizzare in anteprima rispetto a un checkout reale nel tuo negozio di sviluppo.
  6. Esegui shopify app deploy per 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 dev si 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 ScriptSostituzione 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 bloccateFunzioni di convalida del carrello e del checkout
Bundle create con trucchi per articoli di acquistoFunzioni 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 window o DOM. Le librerie che toccano entrambi falliranno.
  • Ogni chiamata al tuo backend non è attendibile. Autenticarla con un token di sessione da shopify.sessionToken e ricontrolla prezzi ed eleggibilità sul server.
  • Aggiungi un api_version e 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_access nel 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

Pesi di ottone inseriti in una custodia di legno, come un bundle di estensioni con un limite di dimensione
Sandbox, dimensioni limitate e sicuro per progetto. Foto: Collezioni del Museo di Auckland, CC BY 2.0
  • 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-react o utilizza hook di React come useApplyAttributeChange appartiene a versioni API precedenti. Inizia nuovo lavoro su @shopify/ui-extensions con Preact.
  • Utilizzando block_progress senza 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

Leggere altro