E-commerce
August 13, 2026
Checkout custom Shopify means adapting the native checkout to your brand, your order data, and your conversion goals, without rebuilding the checkout page. In 2026, you customize the Shopify checkout using the checkout and accounts editor, checkout apps, checkout extensions, Shopify Functions, and post-purchase surfaces. The question is no longer "can we have a custom checkout?". It's how far you can go depending on the plan, without slowing down the buyer.
This guide describes a real Shopify custom checkout build: custom fields, banners, App Store apps that actually display in the funnel, and what remains reserved for Plus. The 2026 Shopify enterprise guide is clear. Standard branding is available from Basic. Apps on the information, shipping, and payment stages, as well as the Checkout Branding API, remain on Plus. Customizing Shopify checkout: 5 options for 2026.
This matters because the checkout is where conversion rates are won or lost. The Baymard meta-analysis (updated September 2025) puts the average cart abandonment at 70.22% across 50 studies. Around 17% of US shoppers abandoned a checkout that was too long or too complicated. A custom Shopify checkout that adds fields, visual noise, or steps can make this number worse. A setup that clarifies delivery instructions, payment methods, and trust can improve it.
What you will clarify: what a custom Shopify checkout can change in 2026, and what Shopify still protects.
What you will be able to do: choose editor vs apps vs extensions vs Functions, then add fields or banners through the supported path.
To connect: Shopify integration, shopping cart abandonment, and checkout optimization.
Useful rule: customize the checkout to reduce friction, not to make it unique. Speed, Shop Pay, PayPal, and security remain the core of Shopify checkout. Everything you add must serve the purchase.
Summary
What does a custom Shopify checkout setup mean in 2026?
A custom Shopify checkout project is not a theme setting. It is a controlled way to extend or replace parts of the funnel, while Shopify keeps the payment rails, wallets, and compliance layer. In 2026, this work relies on Checkout Extensibility, no longer on the legacy checkout.liquid file.
The four areas to customize
Shopify now treats checkout customization as a single system within the checkout and accounts editor. You work across four related areas:
Checkout: information, shipping and payments, or the one-page layout.
Thank you: the first screen after a successful order.
Order status: the page the customer reopens to track the package.
Customer accounts: branding and certain apps within the same editor.
This is why "customizing Shopify checkout" also includes post-purchase, order status blocks, and account pages. If you only restyle the Pay button, you are only using a small part of the system.
What Checkout Extensibility changed
Shopify presents Checkout Extensibility as the upgrade-compatible path: apps, branding tools, UI extensions, Functions, and pixels, without editing the underlying checkout code. The company reports page interactions and transitions that are approximately twice as fast, with an average conversion lift of over 1% compared to the legacy model. Customizations built this way remain compatible with Shop Pay. Shopify also cites Shop Pay conversion rates that are 50% higher and a purchase intent 77% higher than a typical guest checkout flow. These figures come from the 2026 Shopify checkout guide, not an independent lab. Treat them as merchant data, then measure your own store.
What "custom" should never mean
Custom does not mean injecting CSS into card fields, hiding Shop Pay, or forcing account creation. Baymard always points to overly long forms and forced accounts as drivers of abandonment. The best examples of custom Shopify checkouts keep the native speed and only add the data, banners, or rules that the model needs: shipping instructions, gift message, B2B purchase order number, payment methods based on the market, or a measured post-purchase upsell.
Convert over 2,000 customers on average per month with Qstomy.
The world’s 1st Shopify AI dedicated to customer conversion
Empowering 200+ e-commerce merchants
How does the Shopify checkout differ from the theme?
Many merchants open the theme editor and look for the checkout page. That is the first mistake. The theme controls the storefront. The checkout and accounts editor is a separate admin area, with its own apps, design tokens, and plan locks. The Shopify Help Center states it clearly: you customize the checkout, thank you, order status, and customer accounts in the same place, not in the theme editor.
Why Shopify isolates the checkout
Security: card data, wallets, and PCI compliance scope do not follow the same DIY rules as a homepage.
Performance: too many scripts on a product page hurt SEO. On the checkout, they hurt conversion rates.
Shop Pay and PayPal: express checkouts bypass most of a custom layout. If the design only exists for guest checkout, half of the buyers will never see it.
Updates: Checkout Extensibility is versioned. Legacy liquid customizations broke when Shopify rolled out the one-page checkout.
checkout.liquid is no longer the way
Shopify's developer documentation marks checkout.liquid as deprecated. The core information, shipping, and payment steps are no longer supported on this layout. The thank you and order status sunset dates followed: Plus stores on August 28, 2025, and remaining additional scripts for non-Plus stores targeted for August 26, 2026. If an agency still suggests "we will edit checkout.liquid", that is a 2023 playbook. The 2026 playbook consists of checkout extensions, Functions, pixels, and the editor. See the checkout.liquid deprecation note.
The theme work that still helps the checkout
You can still improve the path to payment from the storefront: cart copy, shipping estimates, trust badges on product pages, and delivery instruction schemas. This does not replace a custom Shopify checkout build. It reduces the questions still unanswered at the time of payment. Cross-reference this with Shopify conversion benchmarks to find out if the checkout is truly the leak.
How do you customize the checkout in the accounts editor?
The official entry point for customizing the Shopify checkout is the checkout and accounts editor. The documented path: Settings, then Checkout, then Configurations, then Customize. No need for a developer for branding. You just need a clear brief: logo, colors, fonts, layout, and which apps in which sidebar.
Step by step: opening and publishing a configuration
Open Settings: go to Checkout in the Shopify admin.
Open Configurations: click Customize on the configuration to edit.
Use the three sidebars: Settings for design, Sections for blocks, Apps for compatible checkout apps.
Preview three interfaces: desktop, mobile, and Shop Pay. If a block disappears on Shop Pay, it's not a true Shopify custom checkout gain.
Publish: save, place a test order. Check thank you and order status, not just the payment step.
Style controls in the editor
From the Basic plan onwards, Shopify allows logo, logo width and alignment, background color or image, field and button colors, fonts, summary image or color, and one-page versus three-page layout. The visibility of the promo code field on mobile is a three-page layout control. Shopify's style docs still recommend a simple checkout. Decoration is not a personalization strategy.
What the editor won't do
The editor does not allow you to freely override the CSS of Checkout UI components. It does not let you rebuild the form grid like a landing page. It does not give Starter stores the same depth as Basic. The 2026 matrix indicates that standard customizations begin at the Basic plan or higher. On Shopify Starter, treat onboarding as a storefront starting point, not as a complete Shopify custom checkout toolkit. Upgrade your plan before buying three checkout apps.
What can be customized on Shopify Basic vs Shopify Plus?
The plan is the real lock for a custom Shopify checkout. The Help Center comparison is the source of truth, not the App Store screenshots. (Shopify Help pages often trigger an anti-bot challenge; the details below reproduce the official matrix already published in the 2026 enterprise guide and the Checkout Extensibility doc.)
Access Matrix
Checkout and Accounts Editor: Basic or higher, and Plus.
Apps on thank you and order status: Basic or higher, and Plus.
Apps on information, shipping, and payments: Plus only. This is where most custom fields, in-checkout banners, and in-checkout upsells live.
Checkout Branding API: Plus only. Programmatic typography, borders, favicon, and section color schemes.
How to read it in practice
Basic, Grow, Advanced: you can brand the checkout, add apps post-purchase, and install many public Functions apps. You cannot place a gift message field on the payment step with a Plus UI extension. Collect extra data on the cart page, drawer, or thank-you page.
Shopify Plus: checkout apps and custom UI extensions on core steps, Branding API, custom Function apps, Checkout Blocks Plus branding controls. This is the tier Shopify presents as a fully customizable checkout.
Shopify Functions and Starter
The 2026 guide indicates that stores on all plans except Shopify Starter can install pre-built Functions apps. The custom Function apps you build remain a Plus-only path. Public apps for payment method reordering, shipping rules, or cart validation can therefore help a non-Plus store, provided the app is indeed on Functions and listed for your plan. Always verify checkout targets before paying the subscription.
Shopify checkout examples by plan
Basic Example: logo + brand colors + Checkout Blocks banner on thank-you page + Aftersell upsell on a compatible post-purchase surface.
Plus Example: same branding + delivery instructions field on shipping step + payment reordering + Branding API borders + market overrides.
How to add custom fields and banners to checkout?
The concrete question: how to add custom fields or banners. Shopify developer tutorials are the canonical answer. A custom field captures extra data (delivery instructions). A banner informs without asking for input ("We do not deliver to PO boxes").
Adding fields through the supported path
The Shopify tutorial "Add a field to checkout" uses Checkout UI extensions (Plus). The pattern: generate an extension with Shopify CLI, display an optional text field with the Checkout UI library, save the value in a cart metafield, then show it on the order in admin. This is how merchants really reuse fields: gift message, delivery instructions, building access code, VAT number, B2B purchase order.
Outside of Plus, do not simulate a checkout step field with an unsupported script. Options still in the platform:
Product or cart properties: line-item properties collected before checkout.
Thank you / order status apps: surveys or optional notes after payment, Basic and up.
Checkout Blocks and similar apps: Shopify's Checkout Blocks app offers basic blocks on Basic, with more features on Plus.
Adding a banner without adding noise
Shopify also documents how to add a custom banner. A good banner answers a question that would otherwise create a ticket: cut-off times, signature on delivery, age, legal copy for a market. A bad banner repeats a homepage slogan. Every extra line competes with the Pay button.
Merchant flow in the editor (no code)
Install a compatible app: from the App Store, then refresh the checkout editor.
Open Apps in the editor: add the block on a supported target: summary, thank you, or a Plus checkout step.
Configure the field: label, mandatory vs. optional, help text, products or markets concerned.
Map the data: order attribute, metafield or note. If logistics never sees it, the field is a waste.
Preview Shop Pay: mandatory fields that Shop Pay buyers never see mess up orders.
UX rule from Shopify field guidelines and Baymard: keep optional fields optional. An ideal checkout can fit in 12 to 14 form elements. The average for large US checkouts still shows around 23. Adding three vanity fields means losing the 17% who already find the funnel too long.
Which App Store apps help customize the checkout?
Apps are the fastest way to customize Shopify checkout without hiring a developer. It is also the fastest way to stack three upsell widgets on a mobile Pay button. Choose by business need, not by screenshot.
Business needs to cover, not a random top 10
Native blocks: Shopify Checkout Blocks (Shopify). Banners, content, custom fields, renaming or hiding delivery and payment options using rules. Free installation. Advanced branding and deeper checkout targets: Plus.
Post-purchase upsell: Aftersell and similar post-purchase extensions. After payment, before or on the thank you page: the cleanest place to increase the average cart value without extra fields at checkout.
In-checkout offers: Plus apps that place upsells on information, shipping, or payment. Useful only if the offer is a single SKU, one tap, and doesn't conflict with Shop Pay.
Loyalty reminder: Smile and equivalents. Shopify cites House of Chikankari: a loyalty reminder at checkout made benefits obvious and coincided with 23% more returning customers. This is a merchant success story from the 2026 guide, not a universal benchmark.
Date picker / shipping logic: Venus et Fleur's custom calendar is the example published by Shopify: the customer chooses a date, with a reported lift of over 12% in purchase probability. Most stores should buy a delivery date app rather than rebuilding this extension.
Evaluating a checkout app in 20 minutes
Checkout targets: does it run on information / shipping / payments (Plus) or only on the thank you / status page?
Shop Pay preview: if the app cannot preview Shop Pay, skip it.
Data destination: order metafield, note, or a disconnected app mailbox.
Functions vs UI: hiding a payment method is Functions. A banner is a UI extension. Mixing both in a bloated app is optional.
Uninstall test: remove the app on a duplicated checkout configuration before going live.
You don't need seven checkout apps. One block app, one upsell app, and one logic app (payments or delivery): a healthy stack. Beyond that, you are customizing for the app publishers, not for the customers.
How do extensions, Functions, and pixels work?
When apps are no longer enough, the Shopify stack splits into UI, logic, and measurement. This is how you extend or replace parts of the checkout without touching the card fields.
Checkout UI extensions
Checkout extensions render React (Preact) components in named targets: banners, fields, consents, summary widgets. Shopify calls them upgrade-compatible, sandboxed, and Shop Pay compatible. You cannot override their CSS to "do Webflow". Plus is required to place your own UI extensions on the core steps. Public apps encapsulating extensions can still appear on the thank you and status pages for Basic and higher.
Shopify Functions
Shopify Functions execute server-side logic: discounts, renaming/hiding/reordering delivery options, payment rules, cart and checkout validation, and some routing. Validations can run even on Shop Pay. That is the point. A quantity limit or a B2B minimum that only exists in a visible banner will be bypassed by express checkout. A Function will not. Public Function apps are widely available. Custom Function apps that you own are a Plus feature.
Pixels for behavior tracking
Web pixels replace the old additional scripts box. Send checkout events to Google Analytics, ads, or your CDP without pasting raw JavaScript into the thank you page. Pixels are available from Basic upwards. They are used to measure after customizing checkout, not to decorate. If a "customization" is actually a tracking tag, it goes into pixels, not a banner app.
Post-purchase extensions
Post-purchase extensions are a one-click offer between payment and the thank you page. Shopify still notes beta access rules for live stores. Aftersell popularized this surface. Treat it as average order value optimization, not checkout design. The customer has already paid. You are asking for a second, smaller yes.
Developer entry points: Checkout app docs and Cart and Checkout Validation Function API.
Can you customize the checkout without Shopify Plus?
Yes, you can customize the Shopify checkout without Shopify Plus. You cannot replicate every App Store demo. This distinction prevents months of frustration.
What non-Plus stores need to do first
Branding in the editor: logo, colors, fonts, summary. Time: less than an hour.
Thank you and order status apps: loyalty, next order discount code, survey, FAQ. This is real customization, seen after payment.
Public Functions apps: hide a payment method, rename a delivery option, validate the cart, if the app supports your plan.
Collect earlier: line item properties, quiz, or cart note rather than a Plus field at the payment step.
Post-purchase upsell: offers like Aftersell that do not require Plus UI on the Pay button.
What you should not promise on Basic
Do not promise a completely free checkout form, a drag-and-drop rebuild of the information / delivery / payment steps, or a pixel-perfect Branding API theme. The Shopify pricing page still lists the fully customizable checkout as a Plus feature. Agencies that ignore this lock will install an app that does nothing on Pay, or paste unsupported scripts that will break with the next update.
When Plus is really worth it
Switch to Plus when the missing field or rule is part of the decision to pay: age before payment, delivery date that changes rates, mandatory B2B voucher, legal checkbox for a market, in-checkout warranty. If the need is "more on-brand," the editor is enough. If the need is "changing what the customer must fill in to buy," you are in Plus and Functions territory.
How long does it take, and what skills are needed?
Time and skills: the two questions after "Is Plus mandatory?". Honest ranges are better than a 15-minute promise.
How long it takes
Branding only: 30 to 90 minutes, including mobile and Shop Pay preview.
One app (banner or thank you block): 2 to 4 hours: install, config, test order, fulfillment check.
Custom field via a Plus app: half a day if the warehouse or 3PL mapping is clean.
UI extension or custom Function: a few days to a few weeks with a Partner. CLI, TOML targets, metafields, plus Shop Pay and one-page QA.
Market overrides: a few hours per extra market once the base is stable.
Required skills
No-code path: admin mastery, written list of fields, discipline to say no to excess apps. No need for Liquid. No need to "know HTML to customize checkout" in 2026. Code path: Shopify CLI, Checkout UI extensions, Functions (JavaScript via Javy or Rust), metafield definitions, checkout UX guidelines. If the developer's portfolio still consists of checkout.liquid snippets, they need a 2026 brief, not a blank check.
Best practices before the specifications
Write the business case: "capture delivery instructions for oversized SKUs", not "make checkout custom".
Choose the surface: pre-payment, post-payment, or backend-only Function.
Name the data owner: warehouse, SMS, finance.
Cap the fields: one optional note beats four mandatory dropdown lists.
QA wallets: Shop Pay, PayPal, Google Pay. If 40% of orders go through a wallet, that is your real checkout.
A complete custom Shopify checkout build for a Plus brand with two markets, one field, one banner, and one payment rule is a one to two-week project with a competent Partner, not a theme weekend.
Which customization mistakes hurt conversion?
Most failed Shopify custom checkout projects didn't miss a feature. They added the wrong one. The checkout is a conversion surface. Treat every block as a tax on attention.
Errors that hurt conversion rates
Mandatory fields that Shop Pay skips: incomplete orders and angry fulfillment, or you block the express checkout and lose the +50% Shop Pay conversion story that Shopify sells.
Upsell at the payment step plus upsell post-payment: two requests in two minutes. Choose one. Post-purchase is generally friendlier.
Countdown timer and fake urgency: this hurts the calm UI of Shop Pay, and Google's guidelines on spammy tactics if you recycle the same trick on landing pages.
Payment method clutter: seven methods without order. Functions must hide what the cart cannot use.
Ignoring the one-page checkout: extensions targeted at old three-page anchors display anywhere. Test the layout you actually ship.
No pixel plan: you are customizing blindly. Use e-commerce analytics and funnel reports before the next app.
Good design practices that Shopify repeats again
Keep the checkout design simple. Align brand colors without turning the form into a campaign landing page. Put legal and shipping truths in short banners, not paragraphs. Prefer native wallets. Measure completion rate, Shop Pay share, custom field error rate, and average order value from post-purchase, separately. If the AOV goes up and completion goes down, customization is a vanity victory.
Markets and B2B
The checkout and accounts editor handles overrides for international markets and certain B2B contexts. This is often a "custom" with a better ROI than a new font. A German VAT note, a US final sale banner, or a B2B purchase order field on a company layout: personalization with a business reason. Markets details are in the Shopify Help Center (admin path: checkout configurations by market); technical doc remains on Checkout Extensibility.
What should be processed before a custom checkout, rather than inside it?
A custom Shopify checkout setup cannot answer all questions two minutes before hitting Pay: "Does it deliver to my island?", "Can I change the size?", "Is PayPal available in my country?". These questions still kill conversion if the only UI is a static banner. This is where a storefront assistant earns its place, before the customer even reaches the checkout.
To be solved before the checkout, not inside it
Delivery eligibility: zone, PO box, bulky SKU, pickup.
Product fit: size, bundle content, subscription vs. one-shot.
Payment expectations: PayPal, Shop Pay, local methods, surcharge policy.
Delivery instructions: capture the need, then a checkout field only if fulfillment needs it on the order.
Example: DTC home brand
A European furniture brand on Advanced (not Plus) wanted a delivery access field at the payment step. Plus was not in this quarter's budget. The team added a cart-level property for floor and elevator, branded the checkout in the editor, added a thank you assembly FAQ block, and used Qstomy on the product page and cart to answer delivery times and access via chat. The checkout remained short. Fulfillment still received the access note. "Checkout confusion" tickets dropped because answers moved earlier, which is the right place for an AI sales assistant and an AI customer support layer on Shopify.
Qstomy does not replace Checkout UI extensions. It reduces the number of fields you are tempted to bolt onto the Pay button. To see this flow on your catalog, book a demo.
Checklist, sources and FAQ
Pre-publish Checklist
Plan Check: Basic vs Plus vs Starter. Do not buy a Plus-only app blindly.
Written Purpose: one sentence: field, banner, payment rule, or post-purchase.
Editor Branding: logo, colors, fonts, Shop Pay preview.
App Limit: maximum of three checkout-related apps.
Field Limit: optional unless legally required.
Data Mapping: warehouse, 3PL, or SMS actually reads the value.
Functions for Rules: never use a banner to enforce a constraint.
Pixels: Google and ad tags in web pixels, not in additional scripts.
Test Orders: guest, Shop Pay, PayPal, mobile.
Funnel Metrics: start vs completion, field errors, upsell AOV.
In brief
Shopify Custom Checkout: editor + apps + extensions + Functions, not a free-form page builder.
Basic and above: branding, thank you page, order status, many public apps and pixels.
Plus: fields and banners on core steps, Branding API, custom apps.
Modern Path: Checkout Extensibility. checkout.liquid is retired.
Conversion Rule: customize to resolve a doubt, not for decoration.
External Sources
Shopify Enterprise: 5 options to customize Shopify checkout (2026).
Shopify Dev: Checkout extensibility; add a custom field; add a banner; checkout.liquid deprecation; cart and checkout validation.
Baymard Institute: Cart abandonment statistics (updated Sept. 2025).
FAQ
How do I customize my Shopify checkout page?
Open Settings, Checkout, Configurations, Customize. Brand in the checkout and accounts editor, then add compatible apps. Use checkout extensions and Functions for fields and rules. Plus is required to place apps on information, shipping, and payment steps.
What are the best apps to add fields or banners?
Start with Shopify Checkout Blocks for native banners and basic blocks. Add a field or shipping app if the block app does not map to fulfillment. Use a post-purchase upsell like Aftersell for post-payment AOV, not as a fake field. Check checkout targets and Shop Pay support for each app.
Can you customize checkout without Shopify Plus?
Yes. Branding, thank you page, order status, pixels, and many public Functions apps work from Basic. Custom fields on payment steps, the Branding API, and your own UI extensions require Plus.
What coding technologies or skills are required?
None for editor branding and most apps. A developer only needs Shopify CLI, Checkout UI extensions, and Shopify Functions for custom apps. Liquid on checkout is no longer the required skill for 2026.
How long does it take to customize Shopify checkout?
Branding: less than two hours. A well-chosen app: half a day with test orders. A custom Plus extension with metafields and Shop Pay QA: days to weeks.
Going further
Reduce abandonment: Cart abandonment guide
Optimize the funnel: Checkout optimization
Read conversion: Shopify conversion rate
Delivery data: Conditional delivery instructions
Publish the smallest custom Shopify checkout change that resolves a real doubt, then measure. If you need to clarify these doubts before Pay, start with a Qstomy demo.
Enzo
August 13, 2026
