E-commerce
December 23, 2025
Your customers sometimes need to specify an access code, a floor, or a time slot, whereas for other orders this information adds nothing. Showing a free-text field at checkout systematically lengthens the journey and increases the risk of abandonment when the question is not relevant. Conditional delivery instructions consist of displaying the input only when the context of the cart, product, or address justifies it. On Shopify, this logic generally relies on Checkout UI extensions and on storing responses in metafields, as shown by the official tutorial Add a field to checkout for delivery instructions. This guide summarizes the mental model, platform constraints (notably Shopify Plus), display logic, and best practices aligned with Shopify documentation. To explore the technical ecosystem beyond checkout, see also our Shopify development resources.
Summary
What is a conditional statement?
It is a field (delivery instructions, drop-off instructions, gift message, note for the carrier) that appears only when business criteria are met: presence of a fragile item, delivery to an address identified as complex, selected shipping method, product metadata triggering a need for a time slot, etc. The goal is to reduce cognitive noise for the majority of orders while capturing critical information when it exists. On the data side, the entered value must be routed to an actionable location in fulfillment (often a metafield linked to the cart or the order) to prevent it from remaining a simple informal comment.
Checkout friction and product objective
Shopify reminds us that checkout is the moment when the customer finalizes contact details, shipping, and payment. Any extension must remain consistent with a reliable, efficient, and respectful shopping experience. An unjustified additional field increases reading load and the likelihood of error; a well-designed conditional field aims for the opposite: showing the information at the right time, with an explicit label (for example, specifying the access code and floor rather than a vague “Comment”).
Checkout UI extensions: helpful reminders
Interface extensions allow adding content to defined locations in the checkout flow. The documentation distinguishes targets tied to checkout steps and more freely positionable blocks. Components rely on the checkout UI library: the interface is rendered natively, inherits the merchant's branding settings, and does not allow arbitrary CSS overrides, which helps keep a consistent experience. Extensions run in an isolated environment; they do not access the checkout DOM or sensitive payment data, which is part of the security model described in the reference for Checkout UI extensions.
"Checkout UI extensions are a safe and secure way to customize the appearance and behavior of the checkout page without compromising the security of the checkout or customer data."
Shopify, Checkout UI extensions (Security section)
At edit time, Shopify imposes a bundle size limit (64 KB) to preserve acceptable load times: something to factor in from the design stage if you combine multiple components or validations.
Shopify Plus and checkout scope
According to the documentation, the Checkout UI extensions for the information, shipping, and payment steps are only available for Shopify Plus stores. The official tutorial for adding a field for delivery instructions also indicates that the relevant Checkout UI extensions are reserved for Plus merchants. It is therefore essential to frame your project correctly: a SME on a standard plan may need to combine other levers (order notes when available, public apps, post-purchase flow) until an upgrade or a validated app need on Plus.
Topic | What Shopify documentation says | Implication for your feature |
|---|---|---|
Information / shipping / payment steps | Associated UI extensions: Plus scope | Confirm the store plan before investing in development |
Editable checkout | The merchant places blocks via the checkout editor | Plan tests across several placements |
Security | Sandbox, no payment access | Do not promise customization beyond supported components |
Metafields, fields and the “add field” tutorial
The guide Add a field to checkout shows how to create a custom field to collect delivery instructions, then save the value in a cart metafield and display it in the admin. You can use it as inspiration for other custom field use cases. Before coding, Shopify recommends reading the UX guidelines for fields to align labels, optional / required status, and validation.
From a technical standpoint, the “Apps in checkout” documentation explains that merchants install the app from the admin and place the extension via the checkout editor. The extensions are presented as easy to install and compatible with changes to Shopify Checkout, Shop Pay, or one-page checkout. For client-side validation, the developer portal also points to client-side validation tutorials when you need to block progress if a business rule is not met.
Examples of display rules
Conditional logic depends on the signals exposed by extension APIs: cart lines (SKU, product metafields), shipping method, country or address fields, attributes you maintain yourself. Keep rules readable and testable: an opaque cascade is hard to debug when a customer reports a missing field.
Illustrative condition | Possible behavior | Point to watch |
|---|---|---|
Product with metafield “delivery_slot” | Show date or time-slot selector | Align with the actual carrier promise |
Address without line 2 but with a dense urban postal code | Show instructions field (entry code) | Avoid duplicates if the address is completed later |
Cart containing a custom item | Show a clarification field | Limit length and filter characters if needed |
Relay pickup point method selected | Show relay-specific instructions | Check data availability on the API side |
The examples above are design patterns: the exact implementation depends on the APIs accessible to your extension and the merchant's data policies.
Mapping the levers (UI, Functions, pixels)
The page Apps in checkout reminds us that several types of extensions complement checkout: UI extensions for the interface, Functions for business logic on the platform side, Web pixel extensions for measurement, and payment extensions as needed. For conditional instructions, the UI extension mainly answers the question « what does the customer see and enter? »; a Function can answer « which shipping options or validations apply? » without exposing unnecessary complexity on screen.
Control point | Typical role | Relation to shipping instructions |
|---|---|---|
Checkout UI extension | Fields, banners, customer validations | Show or hide input, guide the user |
Shopify Functions | Server-side rules (shipping, discounts, validations) | Filter methods or impose cart constraints |
Web pixel | Measurement and analytics | Track field usage, not for primary collection |
Combining these building blocks keeps the interface clean while applying strict rules when the cart contains items incompatible with a chosen shipping method. Document the boundary between « display » and « rule » to avoid two components contradicting the same message to the customer.
Cart, order, and third-party systems
When you capture information before completion, it first lives in the cart context. The official tutorial connects the field to a cart metafield so the value survives checkout interactions and can be read again in the admin. After the order is created, logistics teams often consume the Admin API, webhooks, or WMS connectors: document the metafield name, its namespace, and the migration rules if you change the schema. If you duplicate the information in multiple places, provide a single source of truth to avoid discrepancies between what the picker sees and what the carrier reads.
For more « server-side » rules (for example, preventing a shipping method or enforcing a quantity validation), Shopify directs you to the Shopify Functions and the associated tutorials (delivery options, cart validation). Combining a UI extension and a Function makes it possible to separate: collection and input assistance on the interface side, eligibility rules on the centralized business-logic side.
Accessibility, performance and guidelines
Follow checkout UX guidelines: clear wording, restrained visual hierarchy, immediate validation when the field is required under certain conditions. Plan for localization if you sell in multiple languages: the locale files provided with the extension typically support `fr.json` in addition to the default locale. On the performance side, limit unnecessary synchronous network calls and monitor bundle size.
Checklist before going live
Confirm the Shopify plan and the permitted extension scope for the targeted steps.
Validate the design requirements for checkout apps: accessibility, consistency with branding, absence of misleading content.
Run the real checkout with multiple address profiles, multiple shipping methods, and, if you're shipping internationally, varied address formats.
Check Shop Pay and the mobile journey: a large share of e-commerce traffic is mobile.
Have a rollback plan: disable the extension or use a server-side feature flag if a bug blocks conversion.
Train internal support: what should they say if a customer doesn't see the field even though they think they meet the criteria?
Options outside custom development
If you’re not on Plus or if you’re limiting developer time, explore App Store apps that already encapsulate field scenarios. Check compatibility with Checkout Extensibility and your theme’s roadmap. Some merchants combine a lightweight cart field, an automated post-purchase email, or a chatbot to fill in missing information: it’s not functionally equivalent, but it may be sufficient in the short term.
Best practices and mistakes to avoid
Best practices
Show a field only when the cart or address justifies it, to reduce cognitive load.
Write contextual labels: "Delivery instructions (entry code, floor)" rather than a generic label.
Persist the value in a metafield that can be used by fulfillment and logistics integrations.
Plan for a reasonable character limit and client-side validation if the business rule requires it.
Test several placements in the checkout editor and with Shop Pay when relevant.
Document the business logic for support teams: they must understand when the field appears.
Common mistakes
Ignoring the Plus constraint on the relevant steps and discovering the blockage at the end of the project.
Multiplying fields "just in case": every component adds weight and complexity.
Forgetting structured persistence: text lost outside of synced order/cart metafield.
Opaque nested rules: prefer named conditions that are tested automatically.
Ambiguous labels that generate unusable responses for the warehouse.
The advantages
Shorter checkout for simple journeys, while still handling complex cases.
Better quality of data passed to shipping and less email back-and-forth.
Aligned with Shopify UX recommendations on clarity and efficiency.
Modern technical foundation (extensions) compatible with the evolution of Shopify checkout.
Complete with a chatbot
A refined checkout does not replace good answers to preliminary questions: delivery times, in-store pickup, regulated products. An AI chatbot like Qstomy can clarify these points before payment and reduce drop-offs caused by uncertainty. See also AI chatbot integration on Shopify and the e-commerce chatbot guide.
Summary
Conditional delivery instructions aim to display a useful field only when the context requires it, then store the response in a usable metafield. On Shopify, Checkout UI extensions are the modern tool described in the documentation, with Shopify Plus availability rules on the key steps of the funnel and an official tutorial for an instruction field linked to the cart. Pair business logic with UX guidelines, real tests in the checkout editor, and monitoring of app distribution requirements. Finally, keep track of the extension API versions you are targeting: updates to the `shopify.extension.toml` schema and the Shopify CLI can affect the rendering or network capabilities of your extension.
FAQ
Do you need development?
For a custom extension, yes: the flow described in the documentation relies on Shopify CLI, the extension code, and the `shopify.extension.toml` configuration. Turnkey apps can reduce the need for in-house code.
Is it limited to Shopify Plus?
Interface extensions on the information, shipping, and payment steps of checkout are limited to Plus stores according to the official reference. Check your plan before starting a project.
Where should the value be stored?
The “add field” tutorial illustrates saving to a cart metafield and displaying it in the admin; other architectures may target the order depending on your flow. The important thing is consistency with your fulfillment tools.
Can payment be blocked if the field is empty?
Yes, through documented client-side validation mechanisms for extensions, or server-side validations with Shopify Functions depending on the need. Each approach has maintenance implications.
Risk of slowness?
Shopify limits the bundle size of UI extensions. Stay within the intended components, avoid unnecessary network calls, and follow the network best practices described for extensions.
Why not multiply third-party studies on abandonment?
Abandonment rates vary widely by industry and methodology. Here, the focus is on Shopify requirements and careful field design, rather than on external figures that are difficult to compare.
How do you test in the checkout editor?
The extension testing documentation points to the checkout editor for placing blocks and previewing the rendering. Use the recommended test scenarios (including placement references for block-type extensions) to validate multiple configurations before going live.
What happens to checkout.liquid?
Historical customizations based on checkout.liquid are declining in favor of Shopify Extensions in Checkout. If your store is migrating, plan to replace scripts with extensions that comply with Shopify upgrade guides to avoid interruptions on cutover day or during major Shopify updates.
Personal data and compliance
If you collect sensitive information, check the processing rules, the purpose shown to the customer, and any reporting requirements to data protection authorities. Apps that access protected customer data must follow the compliance processes described by Shopify for developers.
Go further
December 23, 2025
