The Pickeasy Checkout UI Extension leverages Shopify's Checkout Extensibility framework to display Pickup and Delivery scheduling options directly within the Shopify Checkout. This allows customers to select their preferred fulfillment date and time before completing their purchase, ensuring that scheduling information is captured accurately as part of the checkout process.
Shopify Plus requirement
The Pickeasy Checkout UI Extension is available only for stores on the Shopify Plus plan.
Shopify currently supports checkout customization through Checkout Extensibility exclusively for Shopify Plus merchants. As a result, merchants on non-Plus plans cannot use the Checkout UI Extension within checkout.
How to enable the Checkout UI Extension
Step 1: Add the App Block
1. In your Shopify Admin, navigate to Settings → Checkout.
2. Click Edit to open the Checkout Editor.
3. Click Add App Block.
4. Select the Pickeasy Checkout UI Extension.
5. Add the block to your checkout layout.
6. Click Save.
Step 2: Configure Checkout Blocking
Within the Pickeasy Checkout UI Extension block settings, you can control whether customers must select a valid date and time before proceeding to payment.
Turn on Allow app to block checkout if scheduling information is required.
When Enabled
- Customers must select a valid pickup or delivery date and time before proceeding to payment.
- Checkout will be blocked until all required scheduling information is provided.
When Disabled
- Customers can continue to payment even if scheduling information has not been selected.
- No checkout validation will be enforced by the extension.
Step 3: Shop Pay Compatibility
Within the Checkout Editor, Shopify provides an option called Include block in Shop Pay.
This setting determines whether the Pickeasy Checkout UI Extension is displayed when customers complete their purchase using Shop Pay.
When Enabled
When the Include block in Shop Pay is enabled:
- The Pickeasy Checkout UI Extension is displayed within the Shop Pay checkout experience.
- Customers can select or review their pickup and delivery scheduling information while completing their order through Shop Pay.
- Checkout validation rules continue to function according to the extension settings.
When Disabled
When the Include block in Shop Pay is disabled:
- The Pickeasy Checkout UI Extension will not be displayed during Shop Pay checkout.
- Customers using Shop Pay will not see the scheduling widget.
- Scheduling information cannot be selected or modified within the Shop Pay checkout flow.
Note: If scheduling information is required for order fulfillment, we recommend enabling both the Checkout UI Extension and the Shop Pay block to ensure a consistent checkout experience across all checkout methods.
Reposition the App Block (Optional)
The Pickeasy Checkout UI Extension block can be placed anywhere within the checkout layout based on your store's requirements.
To reposition the block:
1. Open the Checkout Editor from Shopify Admin → Settings → Checkout → Customise.
2. Select the Pickeasy Checkout UI Extension block from the checkout layout in the sections.
3. Click and hold the drag handle (⋮⋮) next to the block name.
4. Drag and drop the block to the desired location within the checkout page.
5. Click Save to apply the changes.
Example: In the screenshot below, the Pickeasy Checkout UI Extension block is positioned above the Contact section. However, merchants can move the block to other supported locations within the checkout flow to best suit their checkout experience.
Note: The placement of the app block does not affect its functionality. You can position it wherever it provides the best experience for your customers.
Recommended Configuration
If you plan to use the Pickeasy Slot Picker exclusively on the checkout page through the Checkout UI Extension, we recommend the following setup:
Disable the App Embed
Make sure the Pickeasy App is turned off in the app embedded in your Shopify theme editor. This ensures that the slot picker is displayed only on the checkout page and is not shown on the cart page or drawer, providing a cleaner and more consistent customer experience.
Cart Validation Is Not Required
When the Pickeasy Checkout UI Extension is configured to collect scheduling information directly at checkout, there is no need to enable the app's Cart Validation feature. Since the customer is required to select the fulfillment date and time during checkout, additional validation at the cart stage is unnecessary.
Checkout UI Extension Customization
Due to Shopify's Checkout Extensibility framework limitations, custom styling of the Pickeasy Checkout UI Extension is not supported.
The extension automatically follows Shopify's checkout design guidelines and styling.
The following customization options are currently supported:
- Custom text labels
- Translation and localization of content
- Configuration of scheduling and fulfillment settings through the Pickeasy app
Note: Visual styling such as colors, icons, fonts, spacing, button appearance, and layout modifications cannot be customized within the Checkout UI Extension.
Shipping Rate Limitations
When using delivery slots that influence shipping rates, it is important to understand Shopify's checkout rate calculation behaviour. Shipping rates are only updated by Shopify when certain checkout details are updated, like:
- Details of the delivery address
- Products, quantities, and other items in the cart.
A new shipping rate request is not automatically triggered by modifications made only to the chosen delivery slot or scheduling details on the checkout page.
- The shipping rate shown may be based on a previously chosen time slot.
- The displayed shipping rate may reflect rates calculated prior to the most recent scheduling change.
- The final rate displayed to the customer may not always match the currently selected delivery slot.
- The correct rates for the modified slots will only be updated if the address changes or is updated.
Recommendation
If your shipping rates vary significantly based on delivery slots or scheduling selections, we recommend carefully reviewing your shipping configuration and testing different checkout scenarios to understand how Shopify's rate refresh and caching behaviour may affect the customer experience.
Note: Shipping rate calculation, refresh triggers, and caching behaviour are controlled by Shopify. The Pickeasy Checkout UI Extension cannot force shipping rate recalculation when only scheduling information changes.
If you need further assistance, please contact our customer support team.