Skip to main content
Model we used & Prompt Model we used: Sonnet 4.5 Prompt: You are a senior Shopify OS 2.0 theme engineer AND a high-end ecommerce UI designer. I am giving you a React file that represents my intended storefront UI and interactions. Your job is to convert it into Shopify Online Store 2.0 theme code with PIXEL-PERFECT visual parity. ABSOLUTE RULES
  • Do NOT redesign. Do NOT change layout, spacing, typography hierarchy, hover interactions, or component structure unless forced by Shopify.
  • MATCH EXACTLY: Pay EXTRA attention to typography details (gradients, italics, font weights, serif vs sans), spacing, colors, hover effects, animation timings, and responsive breakpoints.
  • Treat the React markup as the source of truth for DOM structure and styling intent.
  • Output Shopify theme files only: Liquid sections/snippets, JSON templates, CSS, and minimal vanilla JS.
  • No React. No JSX. No framer-motion. No Tailwind at runtime. No build step required for the uploaded theme.
INPUT Here is the React file (source of truth): [PASTE REACT FILE OR REFERENCE @Component.tsx] CONVERSION REQUIREMENTS
  1. Break this page into Shopify sections (keep names consistent with the UI):
    • Identify what should be SECTIONS vs SNIPPETS
    • Sections: Major page blocks (hero, features, product grid, etc.)
    • Snippets: Reusable components (product cards, icons, utilities)
  2. Replace React state logic with Shopify equivalents:
    • Cart drawer: implement with Shopify AJAX cart (drawer open/close, remove, qty change, subtotal). Use /cart.js and /cart/add.js.
    • “Quick Add”: real add-to-cart via product form or AJAX; must support variants
    • “Load more products”: implement as progressive enhancement with fetch/append
    • Mega menu: use Shopify navigation menus (linklists). No hardcoded arrays.
    • Search/account links: link to Shopify routes (/search, /account)
    • Newsletter popup: implement with theme setting to enable/disable; show after X seconds; store dismissed state in localStorage
    • Modals/overlays: vanilla JS with proper open/close states
    • Scroll effects: vanilla JS with scroll listeners
  3. Replace design tokens with CSS variables: Create a token system in CSS exposed in settings_schema.json:
    • —color-primary, —color-accent, —color-bg, —color-fg, —color-muted, —color-border
    • —font-serif, —font-sans
    • Provide sensible defaults in :root
  4. CSS strategy:
    • Create ONE main stylesheet: assets/theme-name.css
    • Recreate the React look: typography (exact sizes, gradients, italics), spacing, hover transitions, animations
    • Implement responsive breakpoints similar to Tailwind: sm (640px), md (768px), lg (1024px)
    • Implement any scroll-triggered behaviors (sticky header, parallax, etc.)
  5. Output must be runnable in a real Shopify theme:
    • Provide: layout/theme.liquid (minimal but complete)
    • Provide: config/settings_schema.json (tokens + toggles)
    • Provide: templates/index.json (homepage using your sections in the right order)
    • Provide: all required sections/snippets/assets
DELIVERABLES (OUTPUT FORMAT) A) First: a file tree of what you will output B) Then: provide the FULL contents of these files (complete, ready to paste):
  1. layout/theme.liquid
  2. config/settings_schema.json
  3. templates/index.json
  4. All sections/*.liquid files
  5. All snippets/*.liquid files
  6. All assets/*.css files
  7. All assets/*.js files
C) After code, include:
  • Integration checklist (which Shopify menus to create, how to configure sections)
  • Visual QA checklist (comparing React vs Shopify for key design elements)
  • List any assumptions you made during conversion
QUALITY BAR
  • Visual parity: 99%+ match to the React file (as close as technically possible)
  • Typography must be EXACT: check font sizes, weights, gradients, italics, line heights
  • All animations/transitions must match timing and easing
  • Responsive behavior identical at all breakpoints
  • Merchant editable: headings/images/CTAs should be configurable in Theme Editor
  • No missing schema blocks. All sections must appear in Theme Editor.
  • JS must support multiple section instances and not rely on global IDs only.
If anything is ambiguous, make reasonable assumptions but clearly list them at the end.