Mini Cart Drawer

What This Sidekick Query Does

Build a mini cart drawer section for my Shopify theme that slides in from the [DRAWER_SIDE] side of the viewport when a customer adds a product to the cart or clicks the cart icon. The drawer should display a header with the title [DRAWER_TITLE] and a close X button, followed by a scrollable list of cart items each showing the product thumbnail, title, variant info, a quantity selector with plus and minus buttons, a line item price, and a remove button. Below the items list, display the cart subtotal, an optional note field if [SHOW_CART_NOTE] is enabled, and a Checkout button with background color [CHECKOUT_BG_COLOR] and text [CHECKOUT_TEXT]. Include a free shipping progress bar that fills as the cart approaches the threshold of [FREE_SHIPPING_THRESHOLD] dollars and displays a message [SHIPPING_MESSAGE] when reached. The drawer should fetch and update cart data using the Shopify Cart AJAX API without page reloads. The drawer width should be [DRAWER_WIDTH] pixels on desktop and full width on mobile. Include an overlay behind the drawer with color [OVERLAY_COLOR] and opacity [OVERLAY_OPACITY] that closes the drawer when clicked. Add settings for drawer background color [DRAWER_BG_COLOR], text color [DRAWER_TEXT_COLOR], and transition speed [TRANSITION_SPEED] milliseconds. Include a setting for an upsell product handle [UPSELL_PRODUCT] displayed at the bottom of the drawer. Provide complete Liquid, CSS, and JavaScript.

Expected Output

Tips to Improve Results