iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Shopify Checkout Blocks is an app for configuring supported checkout customizations, while a checkout UI extension is developer-built code that runs inside Shopify’s extension framework. Shopify says Checkout Blocks’ blocks are built with UI extensions, but installing the app and writing a custom extension are different jobs. The app lets a merchant configure and position available blocks; an extension gives an app developer a controlled way to add interface or checkout logic at an eligible target.
What are Shopify checkout blocks?
Checkout Blocks is a Shopify app that lets merchants configure reusable checkout customization blocks and place eligible blocks in the checkout and accounts editor. Depending on the feature and the store plan, documented capabilities include custom fields, order-value limits, payment- and delivery-method reordering or hiding, and custom discounts with conditional rules.
A block can add information, collect a buyer’s input, or apply a configured behavior without the merchant editing Shopify’s checkout source code. Examples include a gift-wrap preference field, delivery instructions, a complementary-product recommendation, a security or satisfaction badge, loyalty points, rewards information, or merchant-controlled branding.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware match“Block” describes the merchant-facing unit that can be configured and placed. It does not mean that every possible checkout change is available on every page, or that every block can be used on every Shopify plan. Compatibility depends on the block type, supported page, display rules and the store’s plan.
#1 Best Overall
How Checkout Blocks relates to checkout UI extensions
A checkout UI extension is an app extension built by a developer. It combines three parts:
- A target: the extension point and execution context where the code runs.
- Target APIs: the data and actions Shopify makes available at that target.
- Shopify UI components: the supported interface elements the extension can render.
Shopify’s product documentation describes targets this way: “Targets define where your checkout UI extensions appear within Shopify checkout and what capabilities they receive.” The target determines both placement and what the extension is allowed to do. The APIs determine which checkout data or actions are available. The component set determines what the buyer can see and interact with.
The relationship is therefore layered: a merchant configures Checkout Blocks; Shopify’s UI-extension platform supplies the rendering and execution model underneath custom checkout UI; and a developer creates a custom extension when the required experience is not provided by a configured block. Shopify says its Checkout Blocks blocks are built with UI extensions, but that does not make the app’s configuration workflow equivalent to developing an extension from scratch.
Free tools Windows power users keep installed
One-click scans. No signup required.
The three Shopify extension target types
Block targets
A block target is a general-purpose placement point. In the checkout and accounts editor, a merchant can usually reposition a block target within the locations Shopify exposes for that target. Product upsells, trust badges, loyalty information, brand messaging and custom fields are examples of experiences that can use a block-style placement.
Because a block target is intended for merchant-controlled placement, it is the appropriate model when the business wants an extension to appear as part of the page layout and allow the merchant to decide where it sits.
Static targets
A static target displays at a fixed location chosen by Shopify. The merchant cannot move it freely in the editor. Static placement is useful when the location is part of the intended checkout flow and consistency matters more than drag-and-drop positioning.
Runnable targets
A runnable target provides functionality without rendering a visible UI component. It is used when an extension needs to perform an allowed operation or participate in checkout behavior but does not need to add a panel, field or message to the page.
An extension declares its targets in its extension configuration and associates each target with the code module that runs there. A single extension can use different target types when the product requires both visible UI and non-visual behavior.
How a merchant places and controls a block
The exact controls depend on the block and plan, but the configuration flow follows this pattern:
- Install or open Checkout Blocks. Confirm that the desired feature is available for the store’s Shopify plan.
- Create or configure the block. Supply the content, field settings, conditions, discount rules or other options exposed by that block type.
- Open the checkout and accounts editor. Choose the supported checkout or account page and add the block to an available location.
- Position the block when the target is movable. Block targets can be repositioned; static targets remain at Shopify-defined locations.
- Set display conditions. Rules can determine whether the block appears for a particular cart, customer, page context or other supported condition. Priority and block ID can also affect which instance is selected.
- Save and test the buyer path. Test the relevant page and cart state, not just the editor preview, because eligibility rules and page compatibility determine whether a buyer actually sees the block.
A custom UI extension follows a different process: a developer creates an app extension, declares a target, implements the code with Shopify’s APIs and components, deploys it, and then makes it available for placement where that target is supported. The merchant may still position an extension that uses a block target, but the extension’s behavior and interface are defined by code rather than by Checkout Blocks’ configuration fields.
Do you need Shopify Plus?
There is no single Plus requirement for every checkout customization. Shopify’s plan rules differ by feature and placement.
| Capability | Documented availability | Placement qualification |
|---|---|---|
| Dynamic content blocks in Checkout Blocks | Basic or higher | Only on Thank you and Order status pages |
| Static content blocks in Checkout Blocks | Basic or higher | Only on Thank you and Order status pages |
| Other Checkout Blocks features | Shopify Plus only | Depends on the individual feature and supported page |
| Checkout UI extensions on the information, shipping or payment steps | Shopify Plus only, according to Shopify.dev | Applies to those checkout steps; other targets can have different eligibility |
These rules should not be collapsed into “all UI extensions require Plus.” Eligibility is target-specific for custom extensions and feature-specific for Checkout Blocks. Before publishing an implementation, verify the current requirement for the exact store plan, page and target because Shopify’s platform documentation and version requirements can change.
What determines whether a block appears?
Adding a block in the editor does not guarantee that it will render for every buyer. The display decision can involve several conditions:
- Page compatibility: the block must support the page where it is placed.
- Block type: dynamic, static, field, discount and other types have different placement and plan rules.
- Configured display rules: conditions can hide or show the block for particular checkout states.
- Priority: when multiple eligible blocks compete, priority can affect which one is selected or displayed.
- Block ID: some block types use IDs to distinguish configured instances and placeholders.
- Quantity limits: Shopify states that up to 30 active blocks of a given type can display, while applicable block types with IDs support up to 10 placeholders on each checkout page.
There is also a functional limitation for data collection: a custom field that must capture information before order completion cannot be placed on the Thank you or Order status pages. Those pages occur after the order has been submitted, so a required pre-order field belongs earlier in the checkout flow where that target is supported.
What UI extensions can and cannot render
Checkout UI extensions run in a constrained rendering environment. Shopify supplies the approved interface components, and the extension uses those components instead of taking over the page’s markup.
Recommended Free Tools
- An extension cannot manipulate the real checkout DOM.
- It cannot render arbitrary HTML in place of Shopify’s component system.
- It cannot use unrestricted CSS overrides to restyle the checkout.
- The available components and APIs depend on the target.
This model protects checkout consistency and security, but it changes how an implementation must be designed. A design that assumes direct selectors, injected scripts or a custom HTML form will not translate directly to a UI extension. The developer must express the experience using the components and capabilities exposed for that target.
Practical examples of block-based checkout experiences
Collecting delivery preferences
A custom field can ask for delivery instructions or a gift-wrap preference. The field’s placement must be before order completion if the information is required to complete the order. The extension or block configuration should also define how the value is stored and consumed by the merchant’s fulfillment process.
Showing trust or brand information
A trust badge, satisfaction message or merchant-controlled brand panel is primarily informational. A block target lets the merchant position that message in an eligible location, while a static target is appropriate when Shopify fixes the location for the experience.
Recommending complementary products
A product upsell can present related items in a supported block location. The recommendation logic and available actions depend on the APIs provided to the target; a block’s presence alone does not grant unrestricted access to cart or product data.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Displaying loyalty information
Loyalty points and rewards can be shown through a block when the required data and target are supported. The extension should handle states in which the buyer is not signed in or no reward balance is available rather than assuming that every checkout has a loyalty record.
Planning a custom checkout UI extension
Start with the buyer outcome, then map it to a target and its capabilities. This avoids designing an interface that Shopify cannot host.
- Define the exact page and moment. Decide whether the experience belongs before payment, after purchase, on the order-status view or in an account context.
- Check plan eligibility. Match the page and target to the store’s plan before writing code.
- Select the target type. Use a block target for repositionable UI, a static target for a fixed location, or a runnable target for non-visual behavior.
- List required data and actions. Confirm that the target APIs expose every value and operation the experience needs.
- Design with supported components. Replace arbitrary HTML, DOM queries and CSS overrides with Shopify’s available components and styling options.
- Define fallback states. Account for empty carts, missing customer data, unavailable products, ineligible discounts and buyers who do not meet display rules.
- Test each condition. Verify the extension at the target page, with the relevant customer status, cart contents and order state.
Shopify.dev’s latest-version documentation can change. Version-specific API names, upgrade dates and migration deadlines are not established here, so code-level work should use the live upgrade guidance for the API version selected for the app.
Troubleshooting a block that does not appear
The block is missing from the editor
- Check whether the store plan includes that feature.
- Confirm that the selected page supports the block type.
- For a custom extension, verify that its declared target is eligible for the store and page.
- Check that the extension or block is installed, enabled and published to the store context being tested.
The block is in the editor but invisible to buyers
- Review display rules, priority and block IDs.
- Test a cart and customer state that satisfies the configured conditions.
- Check whether the page is Thank you or Order status, where pre-order data collection cannot occur.
- Check the active-block and placeholder limits if many instances of the same type are configured.
The extension renders but cannot perform an action
- Confirm that the selected target API actually grants that action.
- Move the experience to a target that exposes the required capability, if the business flow allows it.
- Remove assumptions about direct DOM access or custom markup; those are outside the UI-extension model.
Choosing between Checkout Blocks and a custom extension
| Choose Checkout Blocks when… | Choose a custom UI extension when… |
|---|---|
| The requirement matches a supported configured block. | The experience needs custom logic or an interface not exposed by the app’s configuration. |
| Merchants need to edit content, conditions or placement without code changes. | An app developer must integrate data and actions through target APIs. |
| The supported page and plan meet the requirement. | The required target is eligible and its component set can express the design. |
| Speed of configuration is more important than bespoke behavior. | The business needs an app-owned experience with code-controlled behavior. |
They can also be used together. A custom extension may provide a block target that merchants position in the editor, while Checkout Blocks supplies other configured content or rules elsewhere in the checkout. The deciding question is not whether one approach is universally better; it is whether the required behavior, target, plan and placement all line up.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
FAQ
Can I move every checkout UI extension?
No. Only extensions using repositionable block targets can be moved by the merchant. Static targets remain at fixed Shopify-defined locations, and runnable targets do not render a movable interface.
Best Value
- 5 beloved beginner books by Dr. Seuss will be cherished by young & old alike.
- Ideal for reading aloud or reading alone.
- Includes: The Cat in the Hat, One Fish Two Fish Red Fish Blue Fish, Green Eggs and Ham, Hop on Pop and Fox in Socks.
- Perfect gift for new parents, birthday celebrations & happy occasions of all kinds.
Can I add arbitrary HTML or JavaScript to checkout?
Not through the checkout UI-extension model. Extensions use Shopify-provided components and target APIs; direct checkout-DOM manipulation, arbitrary HTML rendering and unrestricted CSS overrides are not available.
How many blocks can display on one checkout page?
Shopify states a limit of up to 30 active blocks of a given type. For applicable block types that use IDs, up to 10 placeholders can be supported on each checkout page.
Are Thank you and Order status pages equivalent to checkout steps?
No. They are post-purchase pages. That distinction matters because Basic-or-higher dynamic and static content blocks are documented for those pages, while a field required before order completion cannot be placed there.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteFrequently Asked Questions
Can a merchant reposition a block created by a developer?
Yes, when the extension declares a block target and that target is supported in the checkout and accounts editor. A static target is fixed, and a runnable target has no visible block to reposition.
What should be checked before promising a checkout customization to a client?
Check the exact Shopify plan, page, target type, available target APIs and component limitations, then test the display rules and cart or customer conditions that control visibility.
The Bottom Line
Checkout Blocks is the merchant configuration layer; checkout UI extensions are the developer platform beneath custom checkout experiences. Select the feature and target first, verify plan and page eligibility, and design only within Shopify’s supplied APIs and components.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →
