Dress To list

ROLE
You are a senior Shopify theme developer. Build a complete, production-ready, Online Store 2.0 Shopify theme from scratch using Liquid, JSON templates, and vanilla JS. No React, no Vite, no build step. The output MUST be a valid theme that I can zip and upload via Shopify Admin → Online Store → Themes → Add theme → Upload zip, and it must pass Shopify Theme Check with zero errors.

REFERENCE DESIGN
Clone the visual design, layout, spacing, and UX of deodap.in (Indian wholesale/trending products marketplace). Mobile-first. Dense product grids. Red primary CTAs. White header, dark navy mega-nav strip, marquee announcement bar.

TECH CONSTRAINTS (HARD RULES)
- Shopify Online Store 2.0 only. Use JSON templates + sections everywhere.
- Liquid + HTML + CSS + vanilla JS only. NO frameworks, NO npm, NO Tailwind, NO SCSS compilation. Plain CSS with CSS variables.
- All sections must have a `{% schema %}` with settings + presets so they're drag-and-drop in the theme editor.
- Use Shopify's native AJAX Cart API (`/cart/add.js`, `/cart/change.js`, `/cart.js`) — never the Storefront API.
- Checkout = Shopify native checkout (`/checkout`). Never build a custom checkout.
- Pass `shopify theme check` with 0 errors, 0 warnings.
- Lighthouse mobile: Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 95, SEO ≥ 95.
- Lazy-load all non-hero images with `loading="lazy"` and use `image_url: width:` + `srcset`.
- Inline critical CSS for above-the-fold; defer the rest.

REQUIRED FOLDER STRUCTURE (exact)
/assets
  base.css
  theme.js
  cart.js
  (any svg/png icons)
/config
  settings_schema.json
  settings_data.json
/layout
  theme.liquid
  password.liquid
/locales
  en.default.json
/sections
  header.liquid
  announcement-bar.liquid
  mega-menu.liquid
  hero-carousel.liquid
  featured-collection.liquid
  category-grid.liquid
  product-card.liquid (snippet, see below — actually put in /snippets)
  trust-badges.liquid
  newsletter.liquid
  footer.liquid
  main-product.liquid
  main-collection.liquid
  main-cart.liquid
  main-search.liquid
  main-404.liquid
  main-page.liquid
  main-blog.liquid
  main-article.liquid
  cart-drawer.liquid
  mobile-bottom-nav.liquid
/snippets
  product-card.liquid
  price.liquid
  icon-*.liquid (cart, search, user, heart, menu, star, chevron)
  meta-tags.liquid
  responsive-image.liquid
/templates
  index.json
  product.json
  collection.json
  cart.json
  search.json
  page.json
  blog.json
  article.json
  404.json
  password.json
/templates/customers
  account.liquid
  login.liquid
  register.liquid
  reset_password.liquid
  activate_account.liquid
  order.liquid
  addresses.liquid

DESIGN TOKENS (put in :root in base.css)
--color-bg: #ffffff;
--color-fg: #1a1a1a;
--color-muted: #6b7280;
--color-border: #e5e7eb;
--color-primary: #ed1c24;       /* DeoDap red */
--color-primary-hover: #c81017;
--color-accent: #ed1c24;
--color-sale: #ed1c24;
--color-success: #16a34a;
--color-header-bg: #ffffff;
--color-mega-bg: #16243d;       /* dark navy */
--color-mega-fg: #ffffff;
--radius: 6px;
--shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
--container: 1400px;
Font: Inter (system fallback). Headings 700, body 400/500.

LAYOUT REQUIREMENTS
1. Announcement bar: white bg, red icon accents, horizontally scrolling marquee with 4–6 messages (free shipping, COD, returns, etc.). Configurable in schema.
2. Header: sticky. Logo left, full-width search center (desktop), icons right (account, wishlist link, cart with live count badge updated from cart.js). Mobile: hamburger + logo + search icon + cart.
3. Mega menu: dark navy strip below header (desktop only) with categories from a linklist setting; hover shows a full-width panel with subcategories + featured image.
4. Mobile menu: slide-in drawer from left with collapsible category tree.
5. Hero carousel: full-width, autoplay, 3 slides, image + heading + subheading + CTA, dot indicators, swipeable on mobile.
6. Category grid: 6–10 circular category tiles, horizontally scrollable on mobile, grid on desktop.
7. Featured collection sections (repeatable): section heading + "View all" link + responsive product grid (2 cols mobile, 4 desktop, 5 on xl).
8. Product card: square image with hover-swap to second image, discount % badge top-left, wishlist heart top-right, title (2-line clamp), price + compare_at_price (strikethrough) + saved %, "ADD" button that AJAX-adds to cart and opens cart drawer.
9. Trust badges row (COD, Easy Returns, Secure Payment, Pan India Shipping) with icons.
10. Newsletter section.
11. Footer: 4-column links + payment icons + social + copyright.
12. Mobile bottom nav (fixed): Home, Categories, Cart (badge), Account.
13. Cart drawer: slides from right, line items with qty +/- (AJAX), subtotal, "Checkout" button → /checkout, "View cart" → /cart.
14. Product page: image gallery with thumbnails, variant pickers (radio swatches for color, dropdown for size), qty selector, ATC + Buy Now (Buy Now = ATC then redirect /checkout), description accordion, shipping/returns accordion, related products section.
15. Collection page: sidebar filters using Shopify's native `filter` objects, sort dropdown, product grid, pagination.
16. Search page: predictive search snippet for header search input using `/search/suggest.json`.

SCHEMA REQUIREMENTS
- Every section that appears on index.json must have a `presets` block.
- Settings should expose: colors, headings, image pickers, collection pickers, linklist pickers, blocks for slides/categories/badges.
- `config/settings_schema.json` must expose global brand colors (mapped to CSS vars via inline `<style>` in theme.liquid), logo, social links, currency formatting toggles.

JS REQUIREMENTS (assets/cart.js, assets/theme.js)
- No jQuery. ES2019+ vanilla.
- Use a small custom-element pattern (`class CartDrawer extends HTMLElement`) for cart drawer, qty inputs, product form, predictive search.
- Dispatch a `cart:updated` CustomEvent after every AJAX cart mutation; header badge + drawer listen and re-render.
- Debounce predictive search (250ms).

ACCESSIBILITY
- Semantic landmarks (`<header>`, `<nav>`, `<main>`, `<footer>`).
- All interactive icons have `aria-label`.
- Focus styles visible. Skip-to-content link.
- Cart drawer is a focus trap when open; ESC closes.

SEO
- `<title>` < 60 chars, meta description < 160. Single H1 per page.
- JSON-LD: Organization in theme.liquid, Product on product page, BreadcrumbList on collection/product, WebSite + SearchAction on home.
- Canonical tag, Open Graph, Twitter Card meta.
- Lazy images, responsive `srcset`, preload hero image + font.

DELIVERABLE
1. Generate every file listed above with full contents — no "TODO", no placeholders.
2. After generating, output the exact terminal commands to:
   a) zip the theme correctly (zip from inside the theme root, not the parent folder, so layout/ is at the zip root),
   b) run `shopify theme check` and `shopify theme dev` locally.
3. Output a short README.md at the theme root with: install steps, customization notes, list of sections, and known limitations.

ACCEPTANCE CHECKLIST (the agent must self-verify before finishing)
[ ] All files exist with the exact paths above.
[ ] `shopify theme check` returns 0 errors.
[ ] index.json renders with default sections in correct order.
[ ] AJAX add-to-cart works without page reload and updates header badge.
[ ] Cart drawer qty +/- updates totals via /cart/change.js.
[ ] "Checkout" button navigates to Shopify-hosted /checkout.
[ ] Theme is fully responsive at 360px, 768px, 1024px, 1440px.
[ ] No console errors on home, product, collection, cart pages.
[ ] Zip is upload-ready (layout/ at the zip root, not nested in a folder).

START NOW. Generate the full theme.