Lightweight Shopify Debug Dashboard for storefront debugging
A lightweight, production-safe debugging dashboard for Shopify themes — built to inspect real storefront state without switching to admin.
Debugging Shopify themes is rarely about fixing code.
It’s about understanding:
- why data is missing
- why a section behaves differently across templates
- why logic silently fails
Instead of jumping between admin, theme files, and console — this dashboard brings everything into one place.
The Debug Engine runs inside the storefront and exposes:
- Page type
- Template detection
- Variant state
- Availability
- Cart totals
- Product, Collection, Customer, Shop
- Type-aware rendering
- Structured content debugging
- Active blocks
- Empty section detection
COMING SOON
- Add snippets:
/snippets/dev-dashboard.liquid
- Include in
theme.liquidbefore closing body:
{% render 'dev-dashboard' %}
- Enable debug mode:
Open any page and add:
?debug=1
The dashboard will appear in the bottom-right corner showing live store data and issues.
For a deeper breakdown of the approach and patterns:
👉 https://www.linkedin.com/pulse/shopify-theme-debugging-2
👉 https://www.linkedin.com/pulse/shopify-theme-debugging
Instead of just showing data, it detects issues:
Examples:
- ⚠ Missing metafield used in UI
- ⚠ Variant unavailable but button active
- ⚠ Empty section after merchant edit
- ⚠ Template and object mismatch
This turns debugging from guessing into visibility.
- Hidden by default
- Works on live stores
- No frontend impact
- No dependency on apps
- Debugging metafields not rendering
- Understanding section behavior across templates
- Verifying cart and product state
- Identifying silent logic failures
- Severity-based issue detection
- Namespace auto-detection
- Variant-level debugging
- UI enhancements
Feel free to fork, extend, or adapt for your own workflow.
MIT