Delivery instructions composition and guidelines
A static extension point lets you to define the placement for the extension. Depending on your use case, you might also define multiple static extension points to place your extension. For example, you may want to give the option to place the delivery instructions extension either before or after the shipping methods section.
Place the delivery instructions extension in close proximity to the checkout step that it's related to. In this case, the static extension points
Checkout::ShippingMethods::RenderAfter are the best locations for this extension type because it concerns delivery instructions.
The components to create a custom field to capture delivery instructions depend on the extension's possible states.
The delivery instructions use case can have the following states:
TextFieldthen becomes visible
||Only show this component when the customer has expressed interest in adding delivery instructions.|
You can stack the
TextField components in the
In the following example,
base is the spacing value between the
TextField components, which is typically the default option. It prevents the extension from being too cramped or too spacious.
UX guidelinesAnchor link to section titled "UX guidelines"
Adhere to the following guidelines when you're designing a delivery instructions use case for checkout UI extensions, so that you can help merchants agin customer trust and provide a great checkout experience:
Reveal information progressively and strategicallyAnchor link to section titled "Reveal information progressively and strategically"
Show a simplified state of the extension by default. In the following example, the customer can choose to add delivery instructions to an order. If the customer chooses to add delivery instructions, then the
TextField is displayed. It doesn't display otherwise.
Capture and remember customer inputsAnchor link to section titled "Capture and remember customer inputs"
Preserve inputs through the experience. For example, if the customer writes their delivery instructions in the
TextField component, then unchecks the
Checkbox component and checks it again, the instructions should still display rather than having the customer type them again.
- Explore UX guidelines for the entire checkout experience.