E-commerce
December 23, 2025
Your customers sometimes need to specify an entry code, a floor, or a time slot, while for other orders this information adds no value. Systematically displaying a free-text field at checkout lengthens the journey and increases the risk of abandonment when the question is not relevant. Conditional delivery instructions consist of showing 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 in 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, also see our Shopify development resources.
Summary
What is a conditional statement?
This is a field (delivery instructions, drop-off instructions, gift message, details 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. From a data perspective, the entered value must be sent to a location usable during fulfillment (often a metafield linked to the cart or the order) to prevent it from remaining in a simple informal comment.
Checkout friction and product objective
Shopify reminds us that checkout is the moment when the customer finalizes contact details, delivery, and payment. Any extension must remain consistent with an experience that is reliable, efficient, and respectful of shopping expectations. An unjustified additional field increases reading load and the likelihood of error; a well-designed conditional field aims for the opposite: showing information at the right time, with an explicit label (for example, specifying door code and floor rather than a vague "Comment").
Checkout UI extensions: useful reminders
Interface extensions allow adding content to defined locations in the payment 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 maintain 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 Checkout UI extensions reference.
"Checkout UI extensions are a safe and secure way to customize the look and behavior of the checkout page without compromising checkout or customer data security."
Shopify, Checkout UI extensions (Security section)
When publishing, Shopify enforces a bundle size limit (64 KB) to preserve acceptable loading times: a point to consider from the design stage if you combine multiple components or validations.
Shopify Plus and checkout scope
According to the documentation, 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 properly scope your project: an SME on a standard plan may need to combine other options (order notes when available, public apps, post-purchase flows) until an upgrade or an app need validated on Plus.
Topic | What Shopify documentation says | Implication for your feature |
|---|---|---|
Information / shipping / payment steps | Associated UI extensions: Plus scope | Validate the store plan before investing in development |
Editable checkout | The merchant places blocks via the checkout editor | Plan tests across multiple placements |
Security | Sandbox, no payment access | Do not promise customization beyond supported components |
Metafields, fields and "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 standardize labels, optional/required settings, 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. Extensions are presented as easy to install and compatible with ongoing 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 progression must be blocked 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 obscure cascade is hard to debug when a customer reports a missing field.
Illustrative condition | Possible behavior | Point of attention |
|---|---|---|
Product with metafield “delivery_time_slot” | Show date or time-slot selection | 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 customized item | Show details field | Limit length and filter characters if needed |
“Pickup point” method selected | Show instructions specific to the pickup point | Check data availability on the API side |
The examples above are design patterns: the exact implementation depends on the APIs available to your extension and the merchant's data policies.
Mapping the levers (UI, Functions, pixels)
The Apps in checkout page reminds us that several extension types complement checkout: UI extensions for the interface, Functions for platform-side business logic, 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 delivery options or validations apply?” without exposing unnecessary complexity on screen.
Lever | Typical role | Link with delivery instructions |
|---|---|---|
Checkout UI extension | Fields, banners, customer validations | Show or hide input, guide the user |
Shopify Functions | Server-side rules (delivery, discounts, validations) | Filter methods or enforce cart constraints |
Web pixel | Measurement and analytics | Track field usage, not for primary collection |
Combining these building blocks helps keep the interface streamlined while applying strict rules when the cart contains items incompatible with a selected delivery method. Document the boundary between “display” and “rule” to prevent two components from contradicting the same message to the customer.
Cart, order, and third-party systems
When you capture information before finalization, it first lives in the cart context. The official tutorial links the field to a cart metafield so the value survives checkout interactions and can be read again from the admin side. After order creation, logistics teams often consume the Admin API, webhooks, or WMS connectors: document the metafield name, its namespace, and migration rules if you change schema. If you duplicate information in multiple places, plan a 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 delivery method or forcing a quantitative validation), Shopify points to Shopify Functions and related tutorials (delivery options, cart validation). Combining a UI extension and a Function helps separate: collection and input assistance on the interface side, eligibility rules in centralized business logic.
Accessibility, performance and guidelines
Follow checkout UX guidelines: clear wording, clean 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 extension scope allowed for the targeted steps.
Validate the design requirements for checkout apps: accessibility, consistency with branding, no misleading content.
Go through the real checkout with multiple address profiles, multiple shipping methods, and, if you ship internationally, varied address formats.
Check Shop Pay and the mobile flow: a large share of e-commerce traffic is mobile.
Plan a rollback strategy: disable the extension or use a server-side feature flag if a bug blocks conversion.
Train internal support: what should they answer if a customer cannot see the field even though they think they meet the criteria?
Options excluding custom development
If you're not on Plus or if you're limiting developer time, explore App Store apps that already package field scenarios. Check compatibility with Checkout Extensibility and your theme roadmap. Some brands combine a lightweight cart field, an automated post-purchase email, or a chatbot to complete missing information: it's not functionally equivalent, but it may be enough in the short term.
Best practices and mistakes to avoid
Best practices
Display a field only when the cart or address justifies it, to reduce cognitive load.
Write contextualized labels: "Instructions for the delivery driver (entry code, floor)" rather than a generic title.
Persist the value in a metafield that can be used by fulfillment and logistics integrations.
Set a reasonable character limit and client-side validation if the business rule requires it.
Test multiple 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 blocker at the end of the project.
Multiplying fields "just in case": each component adds weight and complexity.
Forgetting structured persistence: text is lost outside a synchronized order/cart metafield.
Opaque nested rules: prefer named conditions that are automatically tested.
Ambiguous labels that generate unusable responses for the warehouse.
The benefits
Shorter checkout for simple journeys, while still capturing complex cases.
Better quality of data sent to shipping and fewer back-and-forth emails.
Alignment with Shopify UX recommendations on clarity and efficiency.
Modern technical foundation (extensions) compatible with the evolution of Shopify checkout.
Complete with a chatbot
A streamlined checkout does not replace a good answer to preliminary questions: delivery times, in-store pickup, regulated products. An AI chatbot like Qstomy can clarify these points before payment and reduce cart abandonment caused by doubt. See also AI chatbot integration on Shopify and the e-commerce chatbot guide.
Summary
Conditional delivery instructions are meant 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 key funnel steps and an official tutorial for an instructions field linked to the cart. Combine business logic with UX guidelines, real testing in the checkout editor, and ongoing monitoring of app distribution requirements. Finally, keep track of the extension API versions you target: updates to the shopify.extension.toml schema and the Shopify CLI can impact rendering or your extension’s network capabilities.
FAQ
Is development required?
For a custom extension, yes: the path described in the documentation relies on Shopify CLI, 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 workflow. What matters is consistency with your fulfillment tools.
Can payment be blocked if the field is empty?
Yes, through client-side validation mechanisms documented for extensions, or server-side validations with Shopify Functions depending on the need. Each approach has maintenance implications.
Is there a risk of slowness?
Shopify limits the bundle size of UI extensions. Stick to the intended components, avoid unnecessary network calls, and follow the network best practices described for extensions.
Why not include more third-party studies on abandonment?
Abandonment percentages vary widely by industry and methodology. Here, the focus is on Shopify requirements and careful field design, rather than external figures that are hard to compare.
How do you test in the checkout editor?
The extension testing documentation points to the checkout editor to position blocks and preview 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?
Legacy 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 migration day or during major Shopify updates.
Personal data and compliance
If you collect sensitive information, verify processing rules, the purpose shown to the customer, and any potential reporting requirements with data protection authorities. Apps that access protected customer data must follow the compliance processes described by Shopify for developers.
Go further
December 23, 2025
