Skip to main content
Checkout widget

Add the Zapiet - Pickup + Delivery widget to the checkout page

Jelizaveta avatar
Written by Jelizaveta
Updated over a week ago

If you are a Shopify Plus store, you can add our widget to the checkout page with our checkout extension widgets.

There are two versions—the Checkout widget and the Delivery & Shipping widget.

Please check the Which version should I use? section to see how they work, and their key requirements.


Requirements

  • You need to be on the Shopify Plus plan.

  • You need to be on the Pro plan or higher in Zapiet - Pickup + Delivery.

  • You cannot use our cart widget.

  • To enable the app block, you will need to have permission to manage apps from the store owner.


Which version should I use?

If you use a third party rates app that offers rates that are dependent upon the delivery method, date or time, then you will need to use the checkout widget.

If you offer pickup, you will need to use the checkout widget. If you only offer delivery and/or shipping, then you can choose between them.

Checkout widget

The widget is visible, and if a checkout method is unavailable for certain products or addresses, the widget’s error messages will inform the customer why.

The address is entered then the available checkout options will show. The customer can choose between pickup, delivery and shipping.


Delivery & Shipping widget

The widget is not visible in this version, and can only be used to offer delivery and/or shipping. If a checkout method is unavailable for certain products or addresses, the rate will show an error messages to inform the customer why.

If a customer is eligible for delivery and shipping, both rates will show, and the customer can access the date and time picker after choosing the rate.


Enable the checkout widget

  1. Click Settings, then Themes and checkouts.

  2. In the Checkout section, select the checkout configuration, then click Customize checkout.

  3. In Delivery > Shipping, click Add app block.

  4. Choose either the Checkout widget or the Delivery & Shipping Widget.
    If you offer pickup, you will need to use the Checkout widget.

  5. You will see the selected widget at the checkout page.

  6. If you use Shop Pay, tick Include app block in Shop Pay.

  7. Click Save.

The checkout extension is now enabled on your store.


Disable the cart page widget

When using our widget in the checkout page, you need to disable our widget in the cart page to ensure a smooth checkout experience.

  1. Click Settings, then Themes and checkouts.

  2. In the Cart page section, select the theme you want to edit, then click Preview in theme.

  3. Disable the Cart widget.

  4. Click Save.

Now the widget should be visible only in the checkout page.


Disable the checkout widget

If you want to stop using one of our widgets in the checkout page, you can disable it.

  1. Click Settings, then Themes and checkouts.

  2. In the Checkout section, select the checkout configuration, then click Customize checkout.

  3. Click Checkout widget.

  4. Click Remove app from checkout.

  5. Click Save.

Make sure that you enable our widget in the cart page, if you decide not to use our checkout widget any more.


Notes

  • By default, our widget will preselect the first available date and time, as soon as your customers select the delivery method.

    • If you would like to disable this feature, please contact our support team on chat or at [email protected].

  • Checkout widget is currently only compatible with one express checkout method - Shop Pay.


Limitations

Checkout widget only

  • Filtering by state/province for pickup is not supported.

  • You cannot change widget icons to a radio list.

  • When using date-based rates with an integrated app, a Shopify error message will show until the customer has selected a date [Shopify limitation].

Delivery & Shipping widget only

  • Apps that offer conditional rates depending on the date, time, or checkout method will not work with this widget.

Checkout widget and Delivery & Shipping widget

  • The checkout widget is not compatible with the three-page checkout when using customer accounts, as it bypasses the widget and goes directly to the billing section. Switching to a one-page checkout resolves this issue.

  • Multiple widgets can't be enabled at the same time. You will need to manually disable the widget in the cart page, and choose only one checkout widget.

  • Checkout widget is not compatible with draft orders—it will not appear at the checkout page when customers open the payment link from the invoice.

  • Checkout widget is not currently compatible with delivery validation by city name.

  • The wording in the checkout will not update depending on the customers selection in the widget.

  • Pickup address prepopulation feature will currently not be applied when using the checkout widget. However, Zapiet will update the customer's shipping address to the pickup location's address after the order is placed.

  • If a subscription product and a non-subscription product are in the cart at the same time, the checkout widget will show twice [Shopify limitation].

  • When a delivery method is unavailable, the rate may still show [Shopify limitation]. The checkout button will still be locked, and customers cannot check out until they choose a delivery method that is available to them.


Did this answer your question?