{"product_id":"dress-to-list","title":"Dress To list","description":"\u003cul class=\"Polaris-List Polaris-List--spacingLoose\"\u003e\n\u003cli class=\"Polaris-List__Item\"\u003e\n\u003cp\u003eROLE\u003cbr\u003eYou 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.\u003c\/p\u003e\n\u003cp\u003eREFERENCE DESIGN\u003cbr\u003eClone 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.\u003c\/p\u003e\n\u003cp\u003eTECH CONSTRAINTS (HARD RULES)\u003cbr\u003e- Shopify Online Store 2.0 only. Use JSON templates + sections everywhere.\u003cbr\u003e- Liquid + HTML + CSS + vanilla JS only. NO frameworks, NO npm, NO Tailwind, NO SCSS compilation. Plain CSS with CSS variables.\u003cbr\u003e- All sections must have a `{% schema %}` with settings + presets so they're drag-and-drop in the theme editor.\u003cbr\u003e- Use Shopify's native AJAX Cart API (`\/cart\/add.js`, `\/cart\/change.js`, `\/cart.js`) — never the Storefront API.\u003cbr\u003e- Checkout = Shopify native checkout (`\/checkout`). Never build a custom checkout.\u003cbr\u003e- Pass `shopify theme check` with 0 errors, 0 warnings.\u003cbr\u003e- Lighthouse mobile: Performance ≥ 90, Accessibility ≥ 95, Best Practices ≥ 95, SEO ≥ 95.\u003cbr\u003e- Lazy-load all non-hero images with `loading=\"lazy\"` and use `image_url: width:` + `srcset`.\u003cbr\u003e- Inline critical CSS for above-the-fold; defer the rest.\u003c\/p\u003e\n\u003cp\u003eREQUIRED FOLDER STRUCTURE (exact)\u003cbr\u003e\/assets\u003cbr\u003e  base.css\u003cbr\u003e  theme.js\u003cbr\u003e  cart.js\u003cbr\u003e  (any svg\/png icons)\u003cbr\u003e\/config\u003cbr\u003e  settings_schema.json\u003cbr\u003e  settings_data.json\u003cbr\u003e\/layout\u003cbr\u003e  theme.liquid\u003cbr\u003e  password.liquid\u003cbr\u003e\/locales\u003cbr\u003e  en.default.json\u003cbr\u003e\/sections\u003cbr\u003e  header.liquid\u003cbr\u003e  announcement-bar.liquid\u003cbr\u003e  mega-menu.liquid\u003cbr\u003e  hero-carousel.liquid\u003cbr\u003e  featured-collection.liquid\u003cbr\u003e  category-grid.liquid\u003cbr\u003e  product-card.liquid (snippet, see below — actually put in \/snippets)\u003cbr\u003e  trust-badges.liquid\u003cbr\u003e  newsletter.liquid\u003cbr\u003e  footer.liquid\u003cbr\u003e  main-product.liquid\u003cbr\u003e  main-collection.liquid\u003cbr\u003e  main-cart.liquid\u003cbr\u003e  main-search.liquid\u003cbr\u003e  main-404.liquid\u003cbr\u003e  main-page.liquid\u003cbr\u003e  main-blog.liquid\u003cbr\u003e  main-article.liquid\u003cbr\u003e  cart-drawer.liquid\u003cbr\u003e  mobile-bottom-nav.liquid\u003cbr\u003e\/snippets\u003cbr\u003e  product-card.liquid\u003cbr\u003e  price.liquid\u003cbr\u003e  icon-*.liquid (cart, search, user, heart, menu, star, chevron)\u003cbr\u003e  meta-tags.liquid\u003cbr\u003e  responsive-image.liquid\u003cbr\u003e\/templates\u003cbr\u003e  index.json\u003cbr\u003e  product.json\u003cbr\u003e  collection.json\u003cbr\u003e  cart.json\u003cbr\u003e  search.json\u003cbr\u003e  page.json\u003cbr\u003e  blog.json\u003cbr\u003e  article.json\u003cbr\u003e  404.json\u003cbr\u003e  password.json\u003cbr\u003e\/templates\/customers\u003cbr\u003e  account.liquid\u003cbr\u003e  login.liquid\u003cbr\u003e  register.liquid\u003cbr\u003e  reset_password.liquid\u003cbr\u003e  activate_account.liquid\u003cbr\u003e  order.liquid\u003cbr\u003e  addresses.liquid\u003c\/p\u003e\n\u003cp\u003eDESIGN TOKENS (put in :root in base.css)\u003cbr\u003e--color-bg: #ffffff;\u003cbr\u003e--color-fg: #1a1a1a;\u003cbr\u003e--color-muted: #6b7280;\u003cbr\u003e--color-border: #e5e7eb;\u003cbr\u003e--color-primary: #ed1c24;       \/* DeoDap red *\/\u003cbr\u003e--color-primary-hover: #c81017;\u003cbr\u003e--color-accent: #ed1c24;\u003cbr\u003e--color-sale: #ed1c24;\u003cbr\u003e--color-success: #16a34a;\u003cbr\u003e--color-header-bg: #ffffff;\u003cbr\u003e--color-mega-bg: #16243d;       \/* dark navy *\/\u003cbr\u003e--color-mega-fg: #ffffff;\u003cbr\u003e--radius: 6px;\u003cbr\u003e--shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);\u003cbr\u003e--container: 1400px;\u003cbr\u003eFont: Inter (system fallback). Headings 700, body 400\/500.\u003c\/p\u003e\n\u003cp\u003eLAYOUT REQUIREMENTS\u003cbr\u003e1. Announcement bar: white bg, red icon accents, horizontally scrolling marquee with 4–6 messages (free shipping, COD, returns, etc.). Configurable in schema.\u003cbr\u003e2. 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.\u003cbr\u003e3. 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.\u003cbr\u003e4. Mobile menu: slide-in drawer from left with collapsible category tree.\u003cbr\u003e5. Hero carousel: full-width, autoplay, 3 slides, image + heading + subheading + CTA, dot indicators, swipeable on mobile.\u003cbr\u003e6. Category grid: 6–10 circular category tiles, horizontally scrollable on mobile, grid on desktop.\u003cbr\u003e7. Featured collection sections (repeatable): section heading + \"View all\" link + responsive product grid (2 cols mobile, 4 desktop, 5 on xl).\u003cbr\u003e8. 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.\u003cbr\u003e9. Trust badges row (COD, Easy Returns, Secure Payment, Pan India Shipping) with icons.\u003cbr\u003e10. Newsletter section.\u003cbr\u003e11. Footer: 4-column links + payment icons + social + copyright.\u003cbr\u003e12. Mobile bottom nav (fixed): Home, Categories, Cart (badge), Account.\u003cbr\u003e13. Cart drawer: slides from right, line items with qty +\/- (AJAX), subtotal, \"Checkout\" button → \/checkout, \"View cart\" → \/cart.\u003cbr\u003e14. 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.\u003cbr\u003e15. Collection page: sidebar filters using Shopify's native `filter` objects, sort dropdown, product grid, pagination.\u003cbr\u003e16. Search page: predictive search snippet for header search input using `\/search\/suggest.json`.\u003c\/p\u003e\n\u003cp\u003eSCHEMA REQUIREMENTS\u003cbr\u003e- Every section that appears on index.json must have a `presets` block.\u003cbr\u003e- Settings should expose: colors, headings, image pickers, collection pickers, linklist pickers, blocks for slides\/categories\/badges.\u003cbr\u003e- `config\/settings_schema.json` must expose global brand colors (mapped to CSS vars via inline `\u0026lt;style\u0026gt;` in theme.liquid), logo, social links, currency formatting toggles.\u003c\/p\u003e\n\u003cp\u003eJS REQUIREMENTS (assets\/cart.js, assets\/theme.js)\u003cbr\u003e- No jQuery. ES2019+ vanilla.\u003cbr\u003e- Use a small custom-element pattern (`class CartDrawer extends HTMLElement`) for cart drawer, qty inputs, product form, predictive search.\u003cbr\u003e- Dispatch a `cart:updated` CustomEvent after every AJAX cart mutation; header badge + drawer listen and re-render.\u003cbr\u003e- Debounce predictive search (250ms).\u003c\/p\u003e\n\u003cp\u003eACCESSIBILITY\u003cbr\u003e- Semantic landmarks (`\u0026lt;header\u0026gt;`, `\u0026lt;nav\u0026gt;`, `\u0026lt;main\u0026gt;`, `\u0026lt;footer\u0026gt;`).\u003cbr\u003e- All interactive icons have `aria-label`.\u003cbr\u003e- Focus styles visible. Skip-to-content link.\u003cbr\u003e- Cart drawer is a focus trap when open; ESC closes.\u003c\/p\u003e\n\u003cp\u003eSEO\u003cbr\u003e- `\u0026lt;title\u0026gt;` \u0026lt; 60 chars, meta description \u0026lt; 160. Single H1 per page.\u003cbr\u003e- JSON-LD: Organization in theme.liquid, Product on product page, BreadcrumbList on collection\/product, WebSite + SearchAction on home.\u003cbr\u003e- Canonical tag, Open Graph, Twitter Card meta.\u003cbr\u003e- Lazy images, responsive `srcset`, preload hero image + font.\u003c\/p\u003e\n\u003cp\u003eDELIVERABLE\u003cbr\u003e1. Generate every file listed above with full contents — no \"TODO\", no placeholders.\u003cbr\u003e2. After generating, output the exact terminal commands to:\u003cbr\u003e   a) zip the theme correctly (zip from inside the theme root, not the parent folder, so layout\/ is at the zip root),\u003cbr\u003e   b) run `shopify theme check` and `shopify theme dev` locally.\u003cbr\u003e3. Output a short README.md at the theme root with: install steps, customization notes, list of sections, and known limitations.\u003c\/p\u003e\n\u003cp\u003eACCEPTANCE CHECKLIST (the agent must self-verify before finishing)\u003cbr\u003e[ ] All files exist with the exact paths above.\u003cbr\u003e[ ] `shopify theme check` returns 0 errors.\u003cbr\u003e[ ] index.json renders with default sections in correct order.\u003cbr\u003e[ ] AJAX add-to-cart works without page reload and updates header badge.\u003cbr\u003e[ ] Cart drawer qty +\/- updates totals via \/cart\/change.js.\u003cbr\u003e[ ] \"Checkout\" button navigates to Shopify-hosted \/checkout.\u003cbr\u003e[ ] Theme is fully responsive at 360px, 768px, 1024px, 1440px.\u003cbr\u003e[ ] No console errors on home, product, collection, cart pages.\u003cbr\u003e[ ] Zip is upload-ready (layout\/ at the zip root, not nested in a folder).\u003c\/p\u003e\n\u003cp\u003eSTART NOW. Generate the full theme.\u003c\/p\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"My Store 2","offers":[{"title":"Default Title","offer_id":48489550413979,"sku":null,"price":799.0,"currency_code":"INR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0761\/2366\/8635\/files\/Screenshot2023-09-27022658.png?v=1777827165","url":"https:\/\/deodaps.in\/products\/dress-to-list","provider":"My Store 2","version":"1.0","type":"link"}