Claude Code vs Cursor vs Codex for Shopify Development

Every "Claude Code vs Cursor vs Codex" article published in 2026 benchmarks the same things: React components, Python scripts, generic refactors. None of them test what matters if you build Shopify themes for a living.

Shopify theme development is a genuinely different AI stress test. Liquid has far less representation in public training data than JavaScript or Python. Section schemas have rigid JSON structures that break silently when an AI hallucinates a property. And Shopify's own MCP server has changed how these tools can interact with the platform — but not everyone has caught up.

I have been using these tools on production Shopify theme work. Here is what actually matters.

Liquid is where AI tools fall apart#

Most AI coding tools were trained on millions of open-source JavaScript and Python files. Liquid exists in a fraction of that volume. The result: Claude Code, Cursor, and Codex all start at a disadvantage when generating Shopify theme code.

The failures are specific and predictable:

Hallucinated filters. All three tools invent Liquid filters that do not exist. I have seen | collection_url instead of the correct | url, | money_format instead of | money, and completely fabricated filters like | sort_by_price. The Cursor community solved this by shipping .cursorrules files that include a catalog of valid Liquid filters — because the models cannot be trusted to know them.

Broken schema JSON. Ask any of these tools to generate a {% schema %} block and you will get properties that Shopify does not support. Common hallucinations include required, description, validation, and placeholder — properties borrowed from JSON Schema or React prop types that have no meaning in a Shopify section schema.

Here is what a correct range setting looks like:

{% schema %}
{
  "name": "Featured collection",
  "settings": [
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "range",
      "id": "products_to_show",
      "min": 2,
      "max": 12,
      "step": 2,
      "default": 4,
      "label": "Products to show"
    }
  ],
  "presets": [
    {
      "name": "Featured collection"
    }
  ]
}
{% endschema %}

Without explicit context about valid schema keys, all three tools will add fields like "description": "How many products to display" or "required": true — and the section will silently fail to render its settings in the theme editor.

Missing theme editor events. AI-generated sections almost never include shopify:section:load event listeners. This means they work on first page load but break when a merchant rearranges sections in the theme editor. You catch it in QA if you are thorough. If you are not, your merchant catches it.

CSS scoping confusion. Ask an AI tool to add section-specific styles that use merchant settings and it will reach for {% stylesheet %}. Reasonable guess — but wrong. The {% stylesheet %} tag concatenates CSS into a single global file and does not support Liquid inside it. For instance-specific styles that reference section settings (like a merchant-chosen color), you need the {% style %} tag — which renders an inline <style data-shopify> element, supports Liquid variables, and live-updates in the theme editor without a page refresh. AI tools almost never reach for {% style %} unprompted.

Design token guessing. Instead of reading values from settings_schema.json or CSS custom properties, AI tools guess hex codes. One developer documented a lessons-learned file where Claude guessed #404040 for a hover state when the actual token was #737373. This class of error is invisible until a designer notices.

The Shopify Dev MCP server changes everything#

This is the single biggest shift in AI-assisted Shopify development, and most comparison articles do not mention it.

Shopify ships an official MCP server (@shopify/dev-mcp) that gives AI tools direct access to Shopify's documentation, API schemas, and Liquid validation. It runs locally, requires no authentication, and works with Claude Code, Cursor, and Codex.

What it provides:

That last row is the one that matters most for theme work. Since October 2025, the MCP server includes Liquid documentation search and built-in theme-check integration — Shopify's official linter that catches syntax errors, deprecated tags, and best-practice violations in generated Liquid.

With the MCP server connected, the AI stops guessing about Liquid filters and schema properties. It pulls from the actual Shopify documentation and validates its output against theme-check before you even see it. This eliminates most of the hallucination problems described above — the same problems that make unassisted AI tools dangerous for Shopify work.

As Vitalii Ponomarov put it in the "i only speak liquid" newsletter: "Most AI-assisted coding fails on Shopify projects because the model doesn't have the right context about Liquid, the API schema, or object patterns. MCP fixes that."

Three tools, three workflow models#

With MCP leveling the playing field on Shopify knowledge, the real difference comes down to how each tool wants you to work.

Claude Code is a terminal-first autonomous agent. You describe a task — "build a featured-collection section with a product limit range setting and lazy-loaded images" — and it reads your existing sections, generates the new one, and can run shopify theme check to validate it. The entire loop happens without you switching contexts.

Cursor is a fast pair programmer. You get tab completion while writing Liquid, inline suggestions as you type schema JSON, and Composer for bigger multi-file edits. The speed of autocomplete matters when you are making dozens of small changes across a theme.

Codex is a mission control layer. Launched as a macOS desktop app in February 2026, it runs multiple AI agents in parallel — each in its own git worktree. You can assign one agent to build a new section, another to refactor your CSS architecture, and review both outputs in a unified queue. It also supports reusable Skills (similar to Claude Code's skills) and Automations for scheduled tasks like issue triage or CI failure summaries.

For Shopify theme work specifically, the multi-agent model matters less than you might expect. Most theme tasks are sequential — you build a section, test it, then move on. Where Codex's parallelism shines is larger storefront projects: building multiple sections simultaneously or running a theme migration while separately updating metafield definitions.

Configuring each tool for Shopify work#

All three tools perform dramatically better with explicit project context. Without it, you are relying on general training data — and for Shopify, that means frequent hallucinations.

CLAUDE.md for Claude Code#

Shopify is already shipping CLAUDE.md files in new projects. When you run shopify theme init, it prompts you about AI coding assistants. For existing projects, write your own:

# CLAUDE.md
 
## Project
- Shopify theme based on Horizon
- Online Store 2.0 architecture
 
## Section conventions
- All sections must include `shopify:section:load` event handling
- Schema settings use sentence-case labels
- Range settings always include min, max, step, default
- Use `{% style %}` for instance-specific CSS with Liquid variables
- Use `{% stylesheet %}` only for static CSS (concatenated globally, no Liquid)
 
## Valid schema setting types
collection, product, blog, page, link_list, url, video_url,
richtext, html, article, color, color_background,
font_picker, image_picker, text, textarea, number, range,
select, checkbox, radio, header, paragraph, liquid
 
## Commands
- `shopify theme dev` — local development
- `shopify theme check` — lint Liquid and JSON

.cursorrules for Cursor#

The community has built extensive Cursor rules for Shopify. The most useful ones include a full catalog of valid Liquid filters, since the model hallucinates them frequently:

# Shopify Theme Development Rules

## Valid Liquid Filters (partial list)
Cart: item_count_for_variant, line_items_for
HTML: class_list, time_tag, inline_asset_content
Media: image_url, image_tag, media_tag
Money: money, money_with_currency, money_without_trailing_zeros

## Section Schema Rules
- Never add "required", "description", or "placeholder" to settings
- Always include "presets" for sections that appear in the theme editor
- Block types must use valid Shopify type identifiers

Skills for Codex#

Codex uses reusable Skills — bundled instructions that agents can reference. You can create a Shopify Theme Skill that encodes the same conventions as a CLAUDE.md. The advantage is that Skills persist across agents and projects, so if you work on multiple Shopify stores, the Shopify context follows you without per-project setup.

Where each tool wins#

After using all three on real Shopify theme projects, here is the pattern.

Claude Code wins at:

• Building new sections from scratch. Its autonomous planning produces the best first drafts. It reads your existing sections, mirrors the patterns, and validates with theme-check — all in one loop.
• Multi-file debugging. A section not rendering the right metafield? Claude Code reads the template, section, snippet, and schema, traces the data flow, and proposes a fix across files.
• Refactors and migrations. Moving from an older theme architecture to Online Store 2.0 sections, renaming settings across files, updating deprecated Liquid tags. It handles cross-file coordination and runs verification commands.

Cursor wins at:

• Daily Liquid editing. Tab completion while writing template logic, object access, and filter chains. When you know what you want to write, autocomplete gets you there faster than describing it to an agent.
• Quick schema tweaks. Adding a setting, changing a default, adjusting a range. Inline editing with immediate feedback.
• CSS and styling. Visual diffs and fast iteration on design changes.

Codex wins at:

• Parallel workstreams. Building multiple sections at once, running separate agents for different parts of a storefront build. Both Codex and Claude Code support git worktrees for isolation, but Codex's desktop UI makes managing multiple parallel agents more visual.
• Scheduled automation. CI failure summaries, issue triage, routine code reviews — Codex Automations handle recurring tasks that Claude Code and Cursor require manual triggering for.
• Team review workflows. The built-in review queue means multiple developers can assign, review, and approve agent outputs in one place.

The setup that actually works#

The answer for most Shopify developers is not picking one tool. It is a layered stack:

1. Shopify Dev MCP server on all your tools — eliminates hallucinations about Liquid, schemas, and APIs
2. Project context files (CLAUDE.md, .cursorrules, Codex Skills) encoding your theme's conventions, valid setting types, and architectural rules
3. The right tool for the task — Cursor for interactive editing, Claude Code for autonomous work, Codex when you need parallel agents or team coordination

The MCP server handles the knowledge problem. The project context handles the convention problem. The tools handle the execution. Pick the tool that matches the task, not the one that sounds more modern.