How to add a delivery date picker to your Shopify cart

Hura Product Showcase Builder

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!

Hura Theme Blocks

You may also like...

4 Responses

  1. Gianna Lau says:

    Hi,
    Thank you for the post.
    What if I do want it to show weekends?
    Can you tell me the code to put in?

  2. Balder M says:

    Hi, very useful but i need to tweak this a bit further.
    Can I use European time notation when selected: DD/MM/Y?

Leave a Reply

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