Demo diagnostic — not client work
Changed Files — Before → After
A summary of what changed between the broken before/ version and the fixed after/ version. The full line-by-line diff is on the Diff page.
Demo diagnostic — not real client work. This is a self-contained sample that shows the type of documentation included with the Shopify bug fix.
index.html (product page markup)
styles.css
- Product image: removed fixed
min-height: 520px (which caused an oversized mobile image + layout shift) and switched to aspect-ratio with a mobile max-height.
- Variant selector: changed
.variant-options from display:block to display:flex; flex-wrap:wrap; gap:10px; and gave pills consistent padding, radius, hover, and selected states.
- CTA: stronger styling and hover state. On mobile, CSS
order sets a clean reading order (color, size, price, CTA) so the price sits on its own line directly above a full-width button — with a divider before the shipping text.
- Cart drawer: replaced
display:none with a transform-based open/close (.open class), added a dimmed .cart-backdrop, styled line items, quantity stepper, remove button, subtotal, and a .toast.
- Breakpoints: added real handling at
860px and 430px (the broken version only had an inadequate 480px rule that just stacked the columns).
script.js
- Add-to-cart handler: the broken version pushed to an array and stopped. The fixed
addToCart() now: merges/creates the line → updateCount() → renderCart() → openDrawer() → showToast().
- New functions:
openDrawer(), closeDrawer(), updateCount(), renderCart(), showToast(), money(), selectedVariant().
- Drawer controls: close button, backdrop-click close, and Escape-to-close.
- Quantity / remove: event-delegated
inc / dec / remove handlers that re-render the cart and count.
Files in this proof pack
index.html Comparison / landing page (links both demos)
before/index.html | styles.css | script.js Broken version (bugs intentional)
after/index.html | styles.css | script.js Fixed version
report/shopify-demo-diagnostic.md Diagnostic writeup (Markdown)
report/shopify-demo-diagnostic.html Diagnostic writeup (styled HTML)
proof-assets/screenshot-before-desktop.png 1440x1000
proof-assets/screenshot-before-mobile.png 390x844
proof-assets/screenshot-after-desktop.png 1440x1000 (cart drawer open)
proof-assets/screenshot-after-mobile.png 390x844
proof-assets/diff.patch Full before->after code diff
proof-assets/changed-files.md This file
proof-assets/_capture.mjs Local Playwright screenshot script
site-copy/shopify-proof-section.html Paste-ready landing-page section
site-copy/shopify-proof-section.md Same content, Markdown
site-copy/outreach-snippet.txt Short cold-outreach message
README.md How to use this pack