Checkout bukan hanya langkah terakhir sebelum pembayaran, ia adalah ruang utama untuk membangun kepercayaan, meningkatkan nilai pesanan, dan mengumpulkan insight pelanggan. Dengan digantikannya checkout.liquid dan masuknya Checkout Extensions, cara kita mengkustomisasi checkout dan halaman “Thank You / Order Status” sekarang jauh lebih modern, aman, dan upgrade-safe.
Shopify menyediakan serangkaian tools untuk ini, terutama:
Pada artikel ini kita akan membahas bagaimana membuat checkout dan halaman “Thank You / Order Status” jadi lebih canggih, plus arsitektur dan contoh use case yang bisa langsung kamu jadikan blueprint.
Checkout dan Halaman “Thank You / Order Status” Jadi Lebih Canggih dengan Checkout UI Extensions
Apa itu Checkout UI Extension?
Checkout UI Extension adalah cara resmi dari Shopify untuk:
- Menambahkan elemen UI baru ke halaman checkout (misalnya banner, pesan khusus, upsell, dll).
- Menjalankan logika bisnis saat pembeli mengisi checkout (misalnya validasi tambahan, menampilkan info berdasarkan isi keranjang, dsb).
- Dilakukan tanpa edit Liquid / theme code di halaman checkout, dan tetap aman terhadap update Shopify.
Secara teknis, ini adalah extension yang:
- Dibuat sebagai bagian dari Shopify app Anda.
- Dirender di lokasi tertentu di checkout (disebut extension target).
- Menggunakan UI Framework Shopify (Checkout UI Extensions + Polaris web components) daripada HTML murni.
Gambaran Singkat: Ekosistem Kustomisasi Checkout di Shopify
Shopify sekarang mendorong semua kustomisasi checkout ke model baru berbasis extensions, yang diatur dengan sangat jelas di Apps in checkout dan Technologies for customizing Shopify checkout.
Beberapa teknologi penting:
-
Checkout UI extensions
- Menambah UI atau konten custom di langkah-langkah checkout (information / shipping / payment) dan Order status page.
- Untuk tampilan checkout (step information/shipping/payment) hanya untuk Shopify Plus, tapi Thank You & Order Status page bisa dipakai di semua plan kecuali Starter.
-
Checkout UI extensions: post‑purchase
- Menambah konten di halaman post‑purchase (sebelum Thank You).
- Cocok untuk upsell/offers setelah pembayaran, lihat post-purchase product offers.
-
Shopify Functions
- Untuk logika backend: diskon, delivery options, payments, validation, dan lain-lain.
- Lihat Shopify Functions.
-
Web pixel extensions
- Untuk tracking analytic/behavior, lihat Web pixel extensions.
-
GraphQL Admin API untuk checkout branding
- Untuk styling (warna, radius, dsb) via checkoutBrandingUpsert.
Tulisan ini fokus pada Checkout UI extensions di:
- Checkout utama
- Halaman Thank You
- Halaman Order Status
Di mana extension ini muncul di checkout?
Lokasi ini disebut extension target.
Beberapa contoh target di surface checkout (lebih lengkap di: targets untuk checkout):
-
purchase.checkout.actions.render-before
Tampil tepat sebelum tombol aksi (misalnya tombol “Bayar sekarang / Complete order”). -
purchase.checkout.cart-line-item.render-after
Tampil di setiap baris produk pada ringkasan keranjang (di bawah detail item). -
purchase.checkout.reductions.render-before/render-after
Tampil di bagian ringkasan order, sebelum/sesudah input kode diskon. -
purchase.checkout.delivery-address.render-before/render-after
Tampil sebelum atau sesudah form alamat pengiriman. -
purchase.checkout.block.render
Target block dinamis yang bisa ditempatkan merchant di berbagai posisi lewat checkout editor.
Selain checkout utama, ada juga target untuk:
- Halaman Thank you:
purchase.thank-you.*(lihat thank-you targets). - Address autocomplete:
purchase.address-autocomplete.suggestdanpurchase.address-autocomplete.format-suggestion(ini tidak merender UI, tapi menyediakan data saran alamat).
Apa yang berubah dan bisa kita lakukan?
Akhirnya Checkout Bukan Lagi Hak Eksklusif Shopify Plus
Selama bertahun-tahun, merchant Shopify non-Plus harus menerima satu kenyataan pahit: halaman checkout adalah zona terlarang. Tidak bisa dikustomisasi, tidak bisa diubah tampilannya, apalagi ditambah konten tambahan untuk mendorong konversi.
Tapi itu sudah berubah.
Shopify secara resmi membuka akses Checkout Editor dan kemampuan kustomisasi Thank You page serta Order Status page untuk merchant di plan Basic, Shopify, dan Advanced. Tidak perlu upgrade ke Plus. Tidak perlu menyentuh kode satu baris pun.
Ini bukan update kecil ini perubahan fundamental yang mengubah cara semua merchant Shopify bisa berinteraksi dengan pelanggan di momen paling krusial: tepat setelah mereka klik "Bayar".
Manfaat dan Fitur Utama
Checkout UI Extention memberikan akses kepada merchant non-plus untuk bisa melakukan kustom pada halaman checkout dan thank-you bagi merchant lokal, ini membuka peluang yang sebelumnya tidak terjangkau:
-
Upsell & Cross-sell Pasca-Pembelian
-
Custom Form Fields
-
Conditional Display Logic (Konten Dinamis)
-
Pesan Lokal yang Personal (Informasi Garansi)
- Instruksi Pembayaran yang Lebih Jelas
App yang Bisa Kamu Gunakan Sekarang
Beberapa app di Shopify App Store yang sudah mendukung fitur baru ini:
- Checkout Blocks (by Shopify) — gratis, drag-and-drop, cocok untuk semua plan, Baca di artikel kami berikut : Supercharge Your Shopify Checkout With Checkout Blocks
Di Expatify, kami sudah membantu beberapa klien migrasi dari additional scripts ke solusi berbasis UI extensions dan web pixels hasilnya lebih stabil, lebih aman, dan siap untuk jangka panjang.
Kesimpulan: Ini Momen yang Tepat untuk Bergerak
saat ini Thank You dan Order Status page bisa menjadi real estate berharga yang bisa kamu optimalkan untuk konversi, retensi, dan pengalaman pelanggan yang lebih baik.
Untuk merchant Indonesia yang selama ini merasa dibatasi oleh plan non-Plus, ini adalah kabar baik yang sudah lama ditunggu.
Di Expatify, kami spesialis dalam membantu merchant Shopify Indonesia memaksimalkan fitur-fitur terbaru dari migrasi skrip lama, setup Checkout Editor, hingga integrasi app post-purchase yang tepat untuk bisnis kamu. Hubungi Kami Pada Halaman Contact Us jika butuh bantuan.
