How to add a delivery date picker to your Shopify cart

Include a calendar on your cart page that allows customers to easily specify a delivery date for their order. This implementation is intended to help merchants who are looking to book delivery slots. For example, a food ordering service.

Follow these steps to add a delivery date picker to your cart page.

Step 1: Include jQuery UI

  1. From your Shopify admin, to to Online Store > Theme.
  2. Find the theme you want to edit and then click Action > Edit code.
  3. In the Layout section, click theme.liquid to open the file in the online code editor.
  4. Find <head> and paste below code just above it.
  5. Click Save.

Step 2: Add a delivery date picker to your cart template

  1. Find your cart template: In the Sections > cart-template.liquid or Templates > Cart.liquid that depend on each theme.
  2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:
  3. Click Save.

Step 3: Inserting executable Javascript code

  1. In the Assets directory, you must find the main js file of the them. May be it is theme.js or theme.js.liquid, that depend on each theme.
  2. Paste the following code at the bottom of the file:
  3. Click Save.

You are done. Happy coding!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *