How to add a delivery date picker to the Shopify cart drawer

A delivery date picker in your Shopify cart drawer puts the calendar where mobile customers actually check out: the slide-out drawer, right above the checkout button. Check your analytics and you’ll see why it matters. On mobile-heavy stores, a large share of purchases never touch the cart page. The customer taps “add to cart”, the drawer slides out, they tap “checkout”, done. For those customers, the cart page might as well not exist.

That matters for delivery scheduling. If your delivery date picker only renders on the cart page, the exact customers most likely to need a delivery date, mobile shoppers buying gifts and food on their phones, are the ones who never see it. The date becomes a post-order email instead of a checkout choice.

I’m the developer of MSK: Delivery Date Scheduler, and this article is about the unglamorous engineering decision that fixes this: putting the picker in the cart drawer, as a theme app block, without a single line of Liquid edited by hand. It’s also about why that last part matters more than it sounds.

The two ways an app gets into your storefront

When a Shopify app needs to display something on your storefront, there are two routes.

Route one: Liquid snippets. The app installs code files into your theme and asks you to paste an include into a template, {% render 'some-app-snippet' %}, in the right place. It works, and it’s how most delivery date apps were built. The cost comes later: that snippet references app code, the include stays in your template after uninstall, and you’re left either chasing orphaned code through your theme or shipping dead references that slow every page down. Read the reviews of any established app in this category and you’ll find the same complaint: “left code in my theme after I uninstalled.”

Route two: theme app blocks. Shopify’s newer mechanism. The app ships a block, and you add it to your theme through the theme editor, drag it where you want it, and remove it the same way. No files are copied into your theme. When you uninstall the app, the block reference goes with it. Your theme is exactly what it was before.

My app uses app blocks exclusively. That’s a deliberate scope decision: the scheduler that doesn’t break your theme, doesn’t leave residue behind, and doesn’t require a developer for setup. It also means the picker respects your theme’s styles rather than fighting them, because it renders inside your theme’s own layout rules.

Inside the drawer

Getting a widget to render in the cart drawer is harder than the cart page, because there is no one cart drawer. Dawn’s drawer, Horizon’s drawer, and the many ajax-cart patterns that custom themes use all expose different markup. An app that hardcodes one selector works on one theme family and breaks on the rest.

So the widget detects instead: it looks for the common drawer patterns, cart-drawer, #CartDrawer, .ajaxcart, .cart-popup, finds the checkout button inside, and mounts the picker directly above it. On Dawn and Horizon, the two themes most stores run, this just works. Cart notification popups (the little “added to cart” toasts) are recognized and skipped, so the picker doesn’t try to squeeze into a confirmation bubble.

The placement above the checkout button is the point. The picker sits in the customer’s natural eye path: add to cart, drawer opens, date, checkout. Not at the bottom of a page they never scroll to.

One honest caveat: a store with a fully custom-built drawer, one that matches none of the common patterns, may not be detected. In that case the fallback is the cart page placement, which always works, and you can verify your own drawer in about a minute after install: add a product, open the drawer, look for the picker. If your drawer is exotic, write to me; knowing which patterns to add is genuinely useful.

What the customer sees in the drawer

Drawer space is tight, so the picker has two visual modes, set independently per surface:

• Compact: a date dropdown and, if you use time slots, a slot dropdown. Fits a drawer without pushing the checkout button below the fold.
• Rich: date pills and a slot grid. Better for wide cart pages where there’s room to show the next two weeks at a glance.

A sensible default for drawer-first stores: compact in the drawer, rich on the cart page, same data, same rules. Behind both sit the same settings: lead time, cutoff, delivery days, blackout ranges, described in the setup guide. The storefront copy ships in English, French, and Japanese.

Which surfaces your plan allows

For completeness, the full placement picture:

• Cart page and cart drawer: every Shopify plan, via the theme app block.
• Checkout: Shopify Plus, via a native Checkout UI extension rendered above the shipping options. That placement is its own topic, covered in the checkout picker article.

You can run any combination: drawer only, cart page only, both, and on Plus, add checkout. A store whose customers check out from the drawer can run the drawer picker alone, and a Plus store can push the decision all the way to the last screen before payment.

After the choice

When the customer picks a date and time slot, the selection is written to cart attributes that flow onto the order, and the order is tagged delivery:2026-10-07 and slot:09:00 - 12:00 (prefixes configurable). Tags are searchable in the admin and readable by Shopify Flow, so the morning run can start from an order search, or trigger an automation, instead of opening orders one by one.

Nothing here requires the customer to have seen the cart page. Drawer selection and cart page selection produce identical order data, so your fulfillment process is one process, not two.

Getting started

Install from the App Store, open the admin, and the setup guide detects whether the cart block is active in your theme, with a deep link into the theme editor. From there: drag the block in, check the drawer on your own store, done. Most stores are live in under fifteen minutes, and uninstalling removes everything the install added, which is the whole point.

The app is $5 a month with a 7-day free trial, and support is answered by the person who built it within 24 hours. You can check the app details here.