Shopify Checkout in Singapore: Customisation, One-Page Checkout and PayNow

Short answer: On standard Shopify plans you can brand the checkout, use one-page checkout, add payment methods such as PayNow and add some app extensions, but deeper checkout customisation needs Shopify Plus. For most Singapore SMEs, the wins are offering PayNow, showing delivery costs early and keeping fields to a minimum. Soodo sets up checkout in every new Shopify store, from SGD 8,500.

If your goal is branding, logos, colours, fonts, banners, head to Settings > Checkout and use the checkout and accounts editor: no code required on Basic and up. If you need new UI or custom logic, that calls for Checkout UI extensions, Functions, or the Branding API, and several of those routes need Shopify Plus. Either way, open your Configurations tab and check the upgrade guide before you build anything.

TL;DR:

• The visual editor changes logos, colors, fonts, banners, and checkout and account surfaces on Basic and higher; market specific branding requires Advanced or Plus.
• In checkout UI blocks generally require Shopify Plus; Thank you and Order status extensions reach plans above Starter, but post purchase use may need approval.
• Shopify Functions handle conditional discounts, cart validation, shipping, and payment behavior, but payment features may be restricted by plan and market; test real carts.
• As Shopify upgrades legacy checkout.liquid and injected scripts, run its upgrade guide, replace tracking with supported pixels, verify checkout_completed events, and test Shop Pay.

Table of Contents

• Five practical ways to customise checkout and when to use each
• Using the checkout and accounts editor for no-code branding
• Checkout UI extensions: targets, placement and practical limits
• Shopify Functions: where logic belongs instead of scripts
• Checkout Branding API: profile-based styling for developers
• Plan and market limitations: the quick checklist to verify before building
• Implementation workflow: audit, build, test, deploy
• Testing, measurement and migration checklist to avoid lost data
• Concrete mini-examples: branding, an upsell block, a validation rule
• When checkout work needs a specialist, not a DIY afternoon
• How Soodo helps with checkout migrations and custom builds
• FAQ
• Sources

Five practical ways to customise checkout and when to use each

Before you touch anything, it helps to know which lever does what. Shopify gives you several routes, and picking the wrong one wastes time.

• Checkout and accounts editor: no-code branding, logos, colours, fonts, banners, available from Basic upwards.
• Checkout UI extensions: add blocks or custom content to specific steps using defined targets and Polaris components.
• Shopify Functions: backend logic for discounts, validation, shipping and payment behaviour.
• Checkout Branding API: developer-driven, profile-based styling for teams that need design-system consistency.
• Apps, web pixels and payment extensions: the upgrade-safe substitute for anything you used to do with injected scripts.

Favour the no-code editor whenever the change is purely visual. Reach for an extension or Function only when you need behaviour the editor can’t touch, like a conditional discount or a custom upsell block. Every one of these routes is built to survive Shopify’s own platform upgrades, which is precisely why legacy checkout.liquid edits and injected scripts are being phased out. If you’re still running either, plan a move to supported customisation methods.

Using the checkout and accounts editor for no-code branding

The checkout and accounts editor sits inside Shopify admin, under Settings > Checkout. Open the active configuration, or create a draft, and you’ll find controls for your logo, colour palette, typography, banner and background images, button styling, and form field appearance. These controls extend to the checkout itself, the Thank you page, the Order status page, and customer account surfaces, all from one place, and they’re available to every plan from Basic upward.

To get started:

1. Open Settings > Checkout in your Shopify admin.
2. Select your active configuration or create a new draft to experiment safely.
3. Adjust branding elements (logo, colours, fonts, banners) in the editor’s visual panels.
4. Use the built-in preview to check how changes render across checkout, Thank you and Order status pages.
5. Publish the draft once you’re satisfied, or keep testing before committing.

The preview is a simulator, not a live transaction. Some actions, payment included, are deactivated so you can inspect layout without placing a real order. Market-specific adaptations, meanwhile, are reserved for Advanced and Plus plans, so if you’re serving several currencies or regions with different branding, check your plan tier first.

Pro Tip: Check text and button contrast against your new background before publishing: a palette that looks sharp in a mockup can make checkout fields hard to read, and Shopify’s own styling guidance emphasises legibility.

Checkout UI extensions: targets, placement and practical limits

Checkout UI extensions let you add functional blocks inside the checkout flow itself, but they work within a fixed architecture of targets. A target is a defined slot, information step, shipping step, payment step, where Shopify allows an extension to render. Targets define where an extension can render, and merchants place eligible app blocks through the checkout editor after a developer has built and deployed the extension.

• Extensions are built from Polaris web components and target-specific APIs, not free-form HTML or CSS.
• Extension settings and capabilities depend on the extension and its available targets.
• Extensions use Shopify’s defined targets and components, which constrain how they render in checkout.
• In-checkout UI targets, blocks inside the information, shipping or payment steps, are generally restricted to Shopify Plus.
• Thank you and Order status page targets are open to plans other than Starter, and post-purchase extensions are available more broadly, though live use can require access approval.

That plan split matters for planning: a merchant on a standard plan can still build a strong post-purchase or Thank you page extension, but a true in-checkout upsell block needs Plus. Operational caps apply too: up to 30 active blocks per block type and up to 10 block placeholders per checkout page.

Shopify Functions: where logic belongs instead of scripts

Shopify Functions handle backend checkout logic that the editor and UI extensions can’t: custom discounts, cart validation, shipping behaviour and payment-method visibility. They replace Shopify Scripts, which are being deprecated, so any store still running checkout.liquid-era Scripts needs a migration plan this year.

• Discounts: build conditional logic beyond standard discount codes, like percentage-off tiers based on cart contents.
• Validation: block checkout when an order breaches a rule, such as a quantity limit or an incompatible product combination.
• Payment behaviour: hide, reorder or rename payment methods at checkout based on cart or customer attributes.

Functions are generally available beyond Plus through apps, but some payment APIs and operations carry plan and geographical restrictions, payment terms themselves require Plus, and certain restricted operations simply have no effect on non-Plus stores. Verify both the merchant’s plan and target market before writing payment-related logic.

Pro Tip: If you’re migrating Scripts to Functions, test discount rules against a real cart in a development store before launch.

Checkout Branding API: profile-based styling for developers

For teams that need design-system consistency across checkout surfaces, the Checkout Branding API provides a developer-driven alternative to the visual editor. The checkoutBrandingUpsert mutation accepts design-system values, colours, typography, corner radius, header and button styles, and applies them against a specific checkout profile.

1. Query checkoutProfiles to identify the profile you want to style, published or draft.
2. Send design-system customisations through checkoutBrandingUpsert against a draft profile first.
3. Preview and validate the result before publishing to the live profile.

Styling here applies broadly across checkout surfaces rather than page by page, and image or SVG support has its own constraints, so this route suits teams codifying a brand system, not one-off tweaks.

Plan and market limitations: the quick checklist to verify before building

Before committing engineering time, confirm the following against your actual plan:

• In-checkout UI targets are restricted to Shopify Plus, Checkout Branding API access is available to Plus or development stores, and market-specific adaptations are available on Advanced or Plus.
• Thank you and Order status page extensions are open to non-Starter plans, but live post-purchase use often needs access approval.
• Legacy checkout.liquid and additional scripts are being automatically upgraded, and stores relying on them risk losing analytics scripts and page customisations during that process.

If you’re unsure which tier you’re on or whether an upgrade makes sense, review a plan comparison before you brief a developer.

Implementation workflow: audit, build, test, deploy

A safe rollout follows a staged process regardless of which route you’ve chosen.

1. Audit: run your personalised upgrade guide inside Shopify admin and list every script, app or Liquid customisation still in use.
2. Choose and scaffold: pick the right route (editor, extension, Function, Branding API) and scaffold with Shopify CLI using shopify app init, then shopify app generate extension.
3. Develop and test: run shopify app dev, preview against a draft checkout profile in a development store, and iterate until behaviour matches intent.
4. Deploy and place: deploy the extension, add the resulting block through the checkout editor, publish to a staged profile first, and watch analytics closely after launch.

This mirrors the documented developer workflow Shopify itself recommends, which keeps your build upgrade-safe rather than reliant on fragile, hand-edited checkout code.

Pro Tip: Keep a draft profile live permanently as your testing ground: it lets you preview new branding or extension placements without ever touching the configuration your customers see.

Testing, measurement and migration checklist to avoid lost data

Checkout changes carry real risk to analytics and conversion tracking, so verify these before and after any publish:

• Run the Shopify upgrade guide to flag apps or scripts that won’t survive the transition.
• Replace any remaining injected scripts with web pixel extensions or app pixels, the supported tracking route.
• Confirm checkout_completed events still fire correctly and that no unintended personal data is newly exposed.
• Test accelerated checkouts, including Shop Pay, in an appropriate test environment, and re-verify discount logic after any Scripts-to-Functions migration.

Automatic upgrades for legacy Thank you and Order status pages began rolling out from January 2026, which makes this checklist a before-and-after step rather than a one-time task.

Concrete mini-examples: branding, an upsell block, a validation rule

• Branding: switch your primary colour and button corner radius inside a draft branding profile, preview against a real product, then publish.
• Upsell: place an order-summary add-on as a post-purchase extension or, on Plus, a Checkout UI extension block in the information step.
• Validation: write a Function that blocks checkout once a single line item’s quantity exceeds a set threshold, useful for limited-stock drops.

Each example maps to a different tool, which is exactly the point: match the business outcome to the right route before you write a line of code.

When checkout work needs a specialist, not a DIY afternoon

We built our approach around a founder-led, conversion-first process: every checkout rollout we run treats upgrade safety as non-negotiable, which means extensions and Functions over fragile script edits. A typical engagement starts with an audit of existing scripts and apps, moves through extension or Function development, and finishes with analytics migration and a staged rollout. If your checkout touches multiple markets, relies on custom Functions, or still runs on checkout.liquid, that’s usually the point where specialist help pays for itself.

— Soodo

How Soodo helps with checkout migrations and custom builds

Soodo handles checkout upgrade planning, custom extension and Function development, and staged rollouts with analytics validation built in from day one. Whether you need an existing store optimised or a migration planned properly, Soodo’s team manages it end to end. For a store that still runs on fragile legacy code, our checkout extensibility migration guide is a useful starting point, and merchants managing POS or back-office workflows alongside checkout changes may find FlowLab’s guide to POS customisation a helpful companion resource.

Get in touch through our new Shopify website development page to scope your upgrade or custom build.

One-page checkout on Shopify

What Shopify’s one-page checkout actually shows

The one-page layout stacks four elements down a single page: an order summary at the top or side, a contact field, shipping address and delivery method, and payment. Discount codes sit in their own field, usually just above the order total, so shoppers don’t have to hunt for it buried in a separate step. Shopify’s own documentation confirms this consolidation is the defining feature: everything that used to span three pages now lives on one.

What most merchants don’t realise until they’ve watched a session recording is how much the page changes shape depending on who’s buying. If a customer is logged into their Shop account or has checked out before on that browser, Shopify prefills contact and shipping details and collapses them into a compact rollup, a single summarised line instead of an open form. That rollup is expandable, but the default view hides the fields entirely. This is deliberate: returning customers see fewer inputs, first-time buyers see more.

Payment method ordering is worth watching closely, because Shopify doesn’t always show your methods in the order you configured them in the admin. Shop Pay, when active, tends to surface prominently near the top of the payment block because it accelerates checkout for anyone with a saved Shop wallet. That’s good for conversion among returning Shop users, but if you’re running a promotion tied to a specific payment method, check the live checkout rather than assuming your admin order is what shoppers see.

Availability depends on your plan and setup. One-page checkout is the default for most current Shopify stores, including those on Basic, Shopify, and Advanced plans, and Shopify Plus merchants using checkout extensibility get the same base layout with more customisation room through Checkout UI extensions. If you’re on an older store built before the redesign, or you migrated from a legacy checkout.liquid setup, you may need to explicitly switch over. Before you do, check any custom checkout scripts or third-party apps tied to the old checkout.liquid file. Shopify’s own migration guidance flags this as the most common upgrade snag, and it’s worth confirming nothing breaks before you flip the switch on a live store.

One-page vs three-page checkout: which one fits your store?

One-page checkout wins on conversion for the majority of stores, mainly because it removes the psychological friction of “how many more steps is this going to take.” Fewer page loads also means fewer chances for a slow connection or a confused tap to knock someone out of the funnel. But it’s not automatically better; a single page crammed with fifteen fields can feel more overwhelming than three clean steps with five fields each. Conversion experts at Baymard have made this point directly: step count alone is a weak proxy for checkout quality. Perceived complexity matters more than the number of pages, and a short one-page form loaded with unnecessary inputs can underperform a longer flow that only asks what it needs.

Three-page checkout still earns its place in specific situations:

• Complex shipping logic. Multi-address orders, split shipments, or freight quotes that need a dedicated calculation step.
• Heavy validation requirements. B2B stores collecting tax IDs, purchase order numbers, or approval workflows that need their own confirmation screen.
• Regulated or age-gated products. Where a distinct verification step protects you legally and needs to be unmissable rather than folded into a scroll.
• Very long product configuration. Custom orders where shipping options depend on choices made earlier in the flow.

For a general apparel, beauty, or home-goods store selling to consumers with straightforward shipping, one-page checkout is the right starting point. For a wholesale operation collecting business registration numbers and requiring manager approval before an order is confirmed, three-page (or a heavily customised one-page with conditional logic) makes more sense. The decision rule is simple: if your checkout genuinely needs distinct stages of validation, keep the stages. If it doesn’t, collapse them.

How to enable and preview one-page checkout in Shopify

Switching layouts is a five-minute admin task, but getting it right takes a bit more care than clicking a toggle. Here’s the sequence that avoids surprises:

1. Go to Settings → Checkout in your Shopify admin. This is where layout, branding, and field configuration all live.
2. Open the checkout editor and locate the layout switcher. Depending on your plan, you’ll see an option to create a draft checkout or customise the existing one directly. Working from a draft lets you make changes without affecting live orders until you’re ready to publish.
3. Select one-page (or confirm it’s already active). Most stores created after the checkout redesign default to one-page, so you may simply be reviewing rather than switching.
4. Use the built-in preview to check the visual layout. This shows you field order, branding, and rollup behaviour, but treat it as a first pass, not a final QA step.
5. Preview on an actual phone and a real browser, not just the in-editor preview window. The editor preview runs inside an iframe on your desktop screen, and it does not reliably replicate how mobile Safari or Chrome renders payment buttons, keyboard behaviour, or autofill prompts. Open the live preview link on your own phone before you publish anything.
6. Check payment method availability. Confirm every payment method you’ve configured actually appears, in a sensible order, and that region-specific methods show correctly if you sell internationally.
7. Confirm discount field placement and function. Test an active discount code end to end. A field that looks right but silently fails to apply is a very common post-migration bug.
8. Review the order summary for accuracy. Line items, shipping costs, and tax should all match what a shopper would see at cart level, with no mismatched totals.
9. Check branding consistency. Logo, colours, and fonts on the checkout page should match your storefront. A jarring mismatch here is one of the fastest ways to make a checkout feel untrustworthy.
10. Publish only after all of the above pass on at least two device types.

Pro Tip: Keep the draft checkout open in one browser tab and your live store in another. Toggling between them makes it far easier to spot subtle differences, like a payment method that appears in the draft but not in production, before you publish.

The optimisation checklist that actually moves conversion

Switching to one-page checkout gives you the frame. What you put inside that frame decides whether it converts. This is where most of the real gains sit, and where most merchants stop too early.

Cut the field count aggressively. Baymard’s checkout usability research found that overly long or complicated checkout processes cause roughly 17% of cart abandonment, and it recommends keeping total form fields close to eight where possible. Every field beyond what you genuinely need to fulfil the order, bill the customer, and contact them about delivery issues is a small tax on your conversion rate. Company name, phone number, and address line 2 are the usual suspects worth reconsidering. If you don’t ship internationally with customs declarations, you probably don’t need a company field at all.

Offer guest checkout as the default path. Forcing account creation before purchase remains one of the most reliable ways to lose an otherwise ready buyer. Shopify supports guest checkout natively, and pairing it with 365-day customer sessions means returning shoppers still get a faster, prefilled experience next time without being forced to log in first.

Make Shop Pay and other express wallets visible, but verify what they skip. Express payment options genuinely speed up checkout for buyers who have them set up, and Shopify’s own guidance on one-page checkout benefits points to wallet adoption as one of the clearer conversion levers in the redesigned flow. Just confirm, before you lean on this, that your extensions still collect any required custom data when a shopper uses an express method (more on that in the next section).

Surface shipping and tax costs early. Unexpected costs appearing for the first time at the final payment step are one of the most common reasons shoppers abandon a cart they were seconds from completing. If your shipping calculator can show an estimate on the cart page or early in checkout, use it.

Label every field as required or optional, explicitly. Baymard’s research on form field labelling found that failing to mark both required and optional fields clearly increases validation errors and mobile usability problems. Don’t rely on an asterisk convention that only some shoppers notice. Hide genuinely non-essential fields like address line 2 by default, and let shoppers reveal them if needed rather than presenting every possible input up front.

Reinforce trust right where the payment happens. A consistent logo, a visible security badge near the card fields, and a short, clear line linking to your returns or refund policy all reduce last-second hesitation. This is not decoration; it’s addressing the specific anxiety a shopper feels the moment they’re about to hand over card details.

Design for mobile first, not as an afterthought. Elevate the pay button so it’s reachable without excessive scrolling, keep touch targets generously sized, and check that autofill and numeric keyboards trigger correctly on both iOS and Android. Given how much of e-commerce traffic now arrives on mobile, according to Statista’s device breakdowns, a checkout that only feels polished on desktop is optimising for the smaller slice of your traffic.

Track the metrics that tell you whether changes actually helped. Checkout completion rate is the headline number, but watch where in the flow abandonment concentrates, and pair conversion wins with guardrails on average order value and refund rate. A completion-rate bump that comes with a spike in refunds isn’t really a win; it may mean shoppers are completing purchases they didn’t fully understand.

Conversion experts generally agree that layout is only the foundation. The real gains come from removing fields that don’t need to exist, refusing to force account creation, and layering in consistent branding and trust cues, exactly the areas most stores leave untouched after they flip the layout switch.

Checkout extensibility: what changed

1. What the framework is: UI extensions, Functions and Web Pixels explained

Checkout Extensibility replaces freeform checkout.liquid editing with three purpose built tools, and knowing which one handles which job saves weeks of rework. According to Shopify’s own framework overview, the architecture splits cleanly into three pillars: Checkout UI Extensions for interface elements, Shopify Functions for backend business logic, and Web Pixels for tracking.

Checkout UI extensions render inside fixed target areas (order summary, contact information, shipping, payment, thank you) and come in block, static or runnable variants depending on what the target allows. They’re built for visible, reader facing elements: upsell banners, delivery instructions, loyalty point displays, gift message fields.

Shopify Functions run server side and never touch the DOM. They handle logic that must be fast, secure and guaranteed to execute: discount stacking rules, custom shipping rates, payment method availability, and validation that blocks checkout when something is wrong.

Web Pixels replaced script tags for analytics and tracking. They run in a sandboxed context with no access to cookies or the storefront DOM directly, which is precisely why Shopify retired the old script tag model.

A quick way to sort a feature request into the right bucket:

• An upsell banner on the order summary page belongs in a UI extension.
• A rule that combines two discount codes belongs in a Function.
• A conversion tracking pixel for a marketing platform belongs in Web Pixels, never a custom script tag.

Getting this mapping wrong is the most common cause of rebuilt-twice migration projects, so it’s worth settling early.

2. Which Shopify plans support checkout extensions, and the key 2026 deadlines

Plan tier decides how much of checkout you can touch, and that single fact shapes most migration budgets. Per Shopify’s Checkout UI extensions documentation, extension availability splits by target:

• Information, shipping and payment step extensions are available only on Shopify Plus.
• Thank you, order status and post-purchase targets are available on every plan except Starter.

That means a non-Plus merchant can still add a thank you page upsell or an order status tracking widget, but cannot touch the contact, shipping or payment steps at all without upgrading.

Timing matters just as much as plan tier. checkout.liquid support for thank you and order status pages ended on 28 August 2025, and script tags on non-Plus checkouts are scheduled to stop working on 26 August 2026. Any store still running custom Liquid or script tags on those pages needs a plan before that date, not after.

A simple decision rule for whether to commission outside help: if your checkout.liquid file has more than a handful of custom blocks, or any logic that touches discounts, shipping rates or payment validation, treat it as a Functions-level rebuild rather than a weekend task and budget for an agency or experienced contractor.

Checkout for Singapore stores

• PayNow: add it through a gateway such as HitPay. Shopify charges its third-party transaction fee on those orders (2% on Basic, 1% on Grow, 0.6% on Advanced).
• GST: if you are registered, set up 9% GST in Shopify’s tax settings so totals are right.
• Delivery: show delivery fees before checkout so the total holds no surprises.
• Do you need Plus? Usually not. See when it is worth it in the guide to Shopify vs Shopify Plus.

See the full cost of payment fees in the Shopify pricing guide for Singapore. Soodo sets up checkout in every new Shopify store.

FAQ

Can I customise my Shopify checkout page?

Yes. Basic plans and above can change logo, colours, fonts and banners through the checkout and accounts editor. Deeper functional changes, like in-checkout UI blocks, typically require Shopify Plus.

Does Shopify allow customisation of checkout functionality?

Yes, through Checkout UI extensions and Shopify Functions rather than direct code edits. Extensions add blocks at defined targets, while Functions handle backend logic such as discounts and payment visibility.

How do I design a checkout page?

Start in Settings > Checkout with the no-code editor for branding, then layer in Checkout UI extensions or the Branding API if you need custom blocks or design-system styling. Always preview changes against a draft configuration before publishing.

How do I edit the checkout page for a specific feature?

Identify which route controls that feature first: visual branding uses the checkout editor, new content blocks use UI extensions, and logic changes use Functions. Each has different plan requirements, so check your plan before building.

What happens to my old checkout customisations during the upgrade?

Legacy checkout.liquid and additional scripts are being automatically upgraded, and customisations built that way can lose associated analytics scripts and page content in the process. Reviewing your personalised upgrade guide before the migration happens is the safest approach.

Sources

• Shopify Help Center | Using the checkout and accounts editor
• Technologies for customizing Shopify checkout

Recommended

• Cut Friction, Not Features: Shopify One Page Checkout, Trim to Eight Fields
• Singapore Developers: 10 Step Shopify Checkout Extensibility Migration
• Shopify Revamp: How to Tell When Your Store Needs an Upgrade for Growth