Add the widget to checkout page

What this article covers

This guide explains how to add Azent Delivery Time Slots to the Shopify checkout page.

Checkout widget is the most reliable way to collect delivery date and time before payment.

Why use the checkout widget?

The checkout widget helps you:

  • Capture delivery date/time at the final purchase step

  • Reduce missed scheduling information

  • Keep delivery selection consistent with order data

It works independently from cart widget setup.

Before you start

Make sure:

  • Azent app is installed

  • You have permission to edit checkout

  • Your delivery date/time settings are configured in the app

How to add the widget to checkout

Go to App -> Settings -> Widget Display.

Click Open Checkout Editor.

In Shopify Checkout Editor:

  1. Open app blocks/extensions panel

  2. Find Azent Delivery Time Slots

  3. Add the extension block to checkout

  4. Place it in your preferred location

  5. Click Save

Recommended placement

For best completion rate, place the widget:

  • After shipping method selection, or

  • Before payment section

This gives customers enough context before they finalize payment.

Enable required behavior (optional but recommended)

To make delivery selection mandatory:

Go to App -> Settings -> Widget Behavior and enable:

  • Require delivery date

  • Require delivery time (if time slots are enabled)

You can also enable auto-select options if you want faster checkout.

How to test checkout widget

  1. Add product to cart

  2. Go to checkout

  3. Confirm date picker is visible

  4. Select date and time

  5. Complete a test order

  6. Check App -> Orders to confirm saved values

If cart and checkout both exist

You can run both:

  • Cart widget for early visibility

  • Checkout widget for final confirmation

If customer changes selection at checkout, latest value is saved.

Common issues

  • Extension added but not saved in Checkout Editor

  • Widget placed in hidden area of checkout layout

  • Delivery date/time disabled in app settings

  • No dates available due to lead time, cutoff, holidays, or capacity

  • Delivery method settings disable date/time selection for current method

Quick troubleshooting checklist

If widget is not visible in checkout:

  1. Confirm checkout extension is added and saved

  2. Confirm app date/time settings are enabled

  3. Confirm available dates exist for today/date range

  4. Check delivery method configuration

  5. Test with a product and valid shipping method

  6. Refresh checkout in an incognito window

In short

  • Add the extension in Checkout Editor

  • Save and test with a real checkout flow

  • Use required rules to prevent missing delivery info

If checkout widget still does not appear, contact support with your store URL and a screenshot of your Checkout Editor layout.