Sample Shopify Bug Diagnostic:
Cart Drawer + Mobile Product Page Repair

Type: Demo / sample Shopify-style bug repair  ·  Stack: Plain HTML, CSS, JavaScript  ·  Status: Built to demonstrate process, not a production deliverable

1. Context

This is a demo Shopify-style theme repair, not a real client engagement. It recreates a small product page and cart drawer using plain HTML/CSS/JS so common Shopify theme failures can be shown and fixed in a self-contained way. The product ("Performance Hoodie", Northwind Apparel) is invented. No client names, revenue numbers, testimonials, or store results are real or implied.

It demonstrates that I can reproduce a reported bug, diagnose the root cause, apply a clean fix, and document the before/after clearly. Two versions ship in this pack: before/ (broken) and after/ (fixed).

2. Issues Found

Present in the before/ version — mirroring issues that show up in real themes after app installs or custom JS/Liquid edits:

• Cart drawer did not open after add-to-cart. The handler pushed to a cart array but never opened the drawer — the button looked dead.
• Cart count did not update visibly. Header stayed at Cart (0); the count element was never written to.
• Mobile product page pushed the CTA too low. An unconstrained image forced "Add to cart" far below the fold under 430px.
• Variant selector spacing was messy. Buttons jammed together with inconsistent gaps and no wrap handling.
• Product image area consumed too much mobile height. No aspect-ratio or max-height, so the image dominated the viewport.
• Cart feedback was unclear. No drawer, toast, or count change confirmed the add.

Secondary: missing viewport meta tag; layout shift from the unsized image block.

3. Business Impact

• Broken add-to-cart feedback can reduce trust. If the button seems to do nothing, shoppers assume the store is broken.
• Poor mobile CTA placement can reduce conversions. Most traffic is mobile; a buried buy button is reached by fewer people.
• Bad cart UX can cause abandonment. No clear cart state means lost confidence in what's being bought and for how much.

No exact conversion or revenue figures are claimed. These are well-understood UX risks, not measured results from this demo.

4. Fixes Applied

All fixes live in the after/ version.

• Reworked add-to-cart event handling: update state → render items → update count → open drawer → show toast.
• Visible cart count update with a short "bump" animation.
• Cart drawer open/close state via a CSS transform + .open class, dimmed backdrop, close button, backdrop-click and Escape to close.
• Improved mobile layout: viewport meta, image constrained with aspect-ratio + mobile max-height, and a clean reading order ending in a full-width add-to-cart button.
• Cleaned variant spacing with flex, gap, wrap, and a clear selected state.
• Improved CTA clarity: stronger styling, hover state, and on mobile the price sits on its own line directly above a full-width button.
• Clear cart feedback: line items (image, title, variant, quantity stepper, price), live subtotal, remove button, and toast.

5. Evidence

• Screenshots: proof-assets/screenshot-before-mobile.png, screenshot-after-mobile.png, screenshot-before-desktop.png, screenshot-after-desktop.png
• Changed files: proof-assets/changed-files.md
• Code diff: proof-assets/diff.patch
• Artifacts in this folder: changed-files.md · diff.patch

6. Remaining Recommendations

• Test with real Shopify theme data — port the fixes into actual Liquid (product.liquid, cart drawer section, cart.js).
• Verify app conflicts — cart bugs are often a third-party app overriding theme JS.
• Check analytics / pixel events — confirm add_to_cart still fires correctly.
• Test the full checkout flow on a real Shopify development store (drawer → checkout, discounts, shipping/tax).

Sample Shopify-style diagnostic · prepared as a portfolio proof pack.