Shopify Development · focused work
Shopify checkout extensions
Shopify checkout is no longer changed by editing a template. It is extended: small pieces of an app that render into defined slots on the checkout, thank you and order status pages, alongside branding settings and rules that run on the platform. That changes what a store can customise, who has to build it, and how much a future platform upgrade costs.
This is the right work if
- A legacy checkout customisation needs replacing with something the platform will keep supporting
- Checkout has to collect information the platform does not ask for, such as a delivery note or a purchase order number
- The thank you and order status pages are bare and could carry tracking, referrals or an account prompt
- Reassurance content, gift options or an age check need to appear at one specific step
- An app is injecting script into checkout in a way that will not survive an upgrade
What it is
How checkout customisation works now
There are three mechanisms and picking the right one is most of the job. Branding settings in the checkout editor cover colour, typography, layout choices and the logo, and they need no code. UI extensions render content into supported targets, which is how a store adds a delivery instruction field, a gift message, an age confirmation, a trust block near payment or a referral prompt after the order. Functions run on Shopify's side and change behaviour rather than appearance, such as which delivery options appear or whether a checkout is allowed to proceed.
Extensions run in a sandbox with a defined API rather than free access to the page, so the question is never how to reach an element but which target exists and what data it can read. Access also depends on the plan: extensions on the thank you and order status pages are broadly available, while extensions inside the checkout steps themselves belong to the higher tier. Because the extension APIs are versioned, anything built here needs an owner who updates it, which is the trade for customisations that survive platform releases instead of breaking at the next one.
How it is done
The work, in order
What changes
- Checkout customisations keep working through platform releases because they use supported targets
- Information collected at checkout arrives on the order where operations can use it
- The pages after payment do useful work instead of showing a bare confirmation
- Behaviour rules run on the platform rather than in the shopper's browser
State the requirement as a behaviour
Describe what the shopper should see, provide or be prevented from doing, and where in the flow it happens. A requirement written as a design mockup usually hides an assumption that no supported target can satisfy, which is better discovered before any code exists.
Check the settings before building
Work through the checkout editor, checkout and account settings, and the delivery and payment configuration. A surprising share of requests are already available as configuration, and a setting is cheaper to own than an extension over the life of the store.
Choose the mechanism deliberately
Use a UI extension when something must be shown or collected, a Function when a rule should change what is offered or allowed, and an app block on the post-purchase pages for content after payment. Mixing them for one requirement is usually a sign the requirement is two.
Build into the target, and store what you collect
Create the extension inside an app, choose the target that matches the step, read cart and customer data through the provided API, validate what the shopper enters, and write the captured value onto the order so warehouse and support teams can actually see it.
Test every path, not the happy one
Check the extension on mobile and desktop, with a discount applied, through express wallets that skip steps, with local pickup, with a subscription in the cart, and in every market, currency and language the store sells in. Wallet flows are where untested extensions usually fail.
Own it after launch
Extension APIs are versioned and Shopify releases changes on a schedule, so the app needs a maintainer, a place where its version is recorded, and a re-test after each platform release rather than a discovery months later that a field stopped saving.
Platform notes
Shopify
Branding controls and extensions on the thank you and order status pages are available without the top tier, which covers most post-purchase requirements such as referrals, account creation prompts and delivery tracking content.
Shopify Plus
Extensions rendered inside the checkout steps themselves, and the deeper branding controls, belong to this tier, so a requirement that must appear beside the shipping or payment step depends on the plan before it depends on the build.
What can be changed at checkout without the higher plan?
Branding, the configuration options in checkout settings, delivery and payment behaviour through rules, and extensions on the thank you and order status pages. What needs the higher tier is placing custom content and fields within the checkout steps themselves.
Do extensions do everything the old template editing did?
They cover the common requirements in a supported way, and they deliberately do not allow arbitrary changes to the page. Some layouts that were possible by editing markup are not expressible as extensions, so a few legacy customisations end up being reconsidered rather than rebuilt.
Can an extension add a field the shopper must complete?
Extensions can collect input and block progress when validation fails, which is how required fields such as a purchase order reference or a delivery instruction are implemented. Design the validation message carefully, because a rejected checkout at the payment step is an expensive place to be unclear.
Do checkout extensions slow the checkout down?
Each one adds work, and several poorly scoped extensions on the same step are noticeable. Keep the data each one requests narrow, avoid extensions that duplicate what a setting already does, and measure checkout completion after adding one the same way any other change is measured.
Related work and answers
Find the leak.
A free Growth Analysis ranks what your store should fix first, by revenue at stake.