Task IntentTheme
Mini Cart Drawer
Free Shopify Sidekick prompts & skills for merchants
What This Sidekick Query Does
Free Shopify Sidekick prompts & skills for merchants
Prompts
Copy, adapt, and run this directly in Shopify Sidekick.
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
Free Shopify Sidekick prompts & skills for merchants
Tips to Improve Results
Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions