AI-assisted tooling has become a powerful support system for developers, especially in ecosystems like React, where open-source examples are plentiful and well-represented in the training data of large language models (LLMs).

But Shopify theme development is a different story.

Shopify uses its own templating language, Liquid, which is open-source but far less common in public code repositories. That means AI tools often struggle to interpret or generate Liquid code accurately - especially when it comes to schema structures, accessibility patterns, or Shopify-specific best practices.

At Flagship, we’ve been exploring how to bridge that gap, building on Shopify’s broader efforts to support theme development with tools like the Shopify Dev Machine Context Protocol (MCP) and their published Cursor rules and prompts in the Horizon theme. The global Shopify ecosystem has also been generous in sharing how teams use AI in practice, which has inspired many of our own experiments and internal tooling.

Our approach is grounded in a simple reality: AI can help us move faster, but it's not a replacement for human expertise, especially when dealing with accessibility, legacy code, or production-critical changes. We've found that clear structure and consistent review make all the difference.

One key insight we’ve adopted is to treat AI like a junior developer: capable, fast, and helpful, but only if you give it the right structure, instructions, and review process.

This framing has shaped how we work with agents and how we are building shared tooling for our projects.

AI tools for Shopify Theme Development

The pace of AI tools development is rapid, and we've been experimenting with several of them while also listening to what other developers in the Shopify ecosystem are recommending. Some of the tools we’ve explored as a team include Cursor, Claude Code, GitHub Copilot, ChatGPT, Gemini CLI, and CodeRabbit (specific for reviewing pull requests).

Shopify itself is actively shaping this space by integrating AI into both developer and admin workflows. Their Shopify Dev MCP, Cursor rules, and the Sidekick assistant all demonstrate a strong push toward standardizing how AI interprets Shopify-specific logic, structure, and conventions.

From what we at Flagship have seen, at this point, most tools offer similar potential. The most important variable is no longer which AI you choose, but how well you define the project-specific context it works from. By giving tools shared constraints (via rules, context and MCPs) you can get more consistent and reliable output, regardless of which tool you prefer.

Each tool has its quirks, but we've found the same core principle works everywhere: the better your setup, the better your results.

Rules and context: giving AI the right instructions

Let’s understand what rules and context are.

Think of rules as constraints the model must follow, and context as optional background that can help the model produce better results - but isn’t strictly enforced unless tied to rules. At the moment, each tool handles rules and context separately and in their own unique way, both with regards to placement of the files in the project directory, as well in regards to the syntax.

Below you can see a visual representation of the differences between some of the tools.

 

Internally, we’ve taken inspiration from Shopify’s work on the Horizon theme, where they share a structured approach using Cursor-specific syntax to define rules for Liquid, JavaScript, CSS and accessibility standards.

These rules live in the /.cursorrules folder and are paired with example code, making it easier for AI tools to produce consistent output. 

To further explain this approach, Shopify has also released a helpful video on Shopify Academy, showing how they generated a “spending bar” section in their theme using the assistance of Cursor AI.

Taking further the Shopify approach, we have also added to each individual project a context.md file, which explains the project structure and how to consult the Shopify MCP tools. This was inspired by a Storetasker newsletter article and has proven helpful in clarifying expectations.

One key thing we’ve learned: it helps to instruct the agent to ask clarifying questions before editing code, especially in more complex projects.

Shared standard: AGENTS.md

As shown previously, the approach to rules and context is very different depending on which tool you are using. However, very recently (2025/08/21), a new shared standard has been proposed and embraced by some of the major players (OpenAI, Amp, Cursor, Gemini CLI, Jules). It’s called  AGENTS.md , a README for agents, and it aims to unify how context and constraints are passed to AI tools.

Tools are beginning to accept unified structures that define what the model should do (rules) and what it should know (context), helping reduce surprises and improving collaboration across devs using different editors or assistants.

The distinction between rules and context still exists but it’s in the wording:

Rules	Context
Must be followed	May be referenced
Prescriptive (must, do)	Descriptive (example, note)
File-specific or global	General reference or prompt-based

   

But you can now structure your project so AI behaves the same across tools - and treat these files as shared team assets.

Some practical information: the file needs to be created at the root of the repository and it usually includes sections like project overview, file structure, code style guidelines.

One recommendation from our internal development learnings is to add more than one file, for example one for the project structure and build commands in the root directory (if you are using bundling tools like webpack) and one within the /shopify  folder to add guidelines on how to build sections or handle localization.

Shopify Dev MCP

Another important piece of the puzzle to using AI with Shopify theme development is to leverage MCPs. The AI assistant can be connected to Shopify’s development resources through the Shopify Dev Model Context Protocol (MCP). This server enables the AI assistant to search Shopify docs, explore API schemas, build functions and get up-to-date answers about the Shopify APIs.

So when you ask your AI assistant to generate Liquid or make an API call, it will pull from the real Shopify ecosystem instead of guessing. You might want to guide the AI to use specific MCP endpoints like learn_shopify_api or validate_theme when generating and validating sections.

The Shopify MCP works best in combination with the Shopify CLI theme check for validation.

Practical use cases

Finally, we wanted to share some practical examples of how we are using AI to help with Shopify theme development.

1. Generating sections with prompts 

The basic layout of sections is always very standardized. There will be some Liquid, a stylesheet or JavaScript, and the section schema. We are fine tuning our own prompt for section creation with agents, which includes:

• Structured prompts and steps to follow when creating the section
  ▶ View Prompt example

  # Create and localize new section
  
  This guide helps you create a new Shopify section with proper localization support for both schema and storefront text.  
  All localization and section rules are defined in the following references:  
  
  - `/rules/localization.mdc` → localization coding standards and best practices  
  - `/rules/locales.mdc` → locale file structure and translation development standards  
  - `/rules/sections.mdc` → section structure rules (file naming, presets, schema conventions)
  - `/rules/example/section-example.liquid` → **canonical section template**  
  
  
  Always follow those files when adding or editing translations.
  > The generated code **must mirror the structure** of `section-example.liquid`. Do not reorder parts.
  
  ## Usage
  
  Use this prompt whenever you want to generate a new Shopify section.
  
  Basic syntax:
  
  ```
  Create localized section: [SECTION_NAME]
  ```
  
  Optional parameters:
  
  ```
  Blocks: [BLOCK_TYPES_AND_FIELDS]
  Settings: [SETTINGS_LIST]
  Purpose: [BRIEF_DESCRIPTION]
  ```
  
  Full syntax example:
  
  ```
  Create localized section: text-banner
  Blocks: heading:text, subheading:text, content:richtext
  Settings: container_width:select(sm|md|lg), padding_top:number, padding_bottom:number
  Purpose: A simple hero banner without scripts
  ```

• Naming conventions already used across the project

• Reference to Shopify MCP

• Reference to an existing section to take as an example

Using saved prompts or templates helps us standardize request to keep the output consistent across features. Also, sharing these prompts and the context file within the team is a good idea, as well as keeping  context.md in version control so the team stays aligned.

2. Schema localization: bilingual themes made easier 

AI can be been particularly helpful for localizing schema settings and storefront text. Schema localization refers to translating the labels, descriptions, and default content shown in the Shopify theme editor into multiple languages. In our Japan-facing projects, we see a use case for this to translate sections and blocks labels, info text, and default content into natural Japanese - and keep it in sync with the English original.

Of course, a native speaker would review the translation because localization often requires an additional set of eyes.

We prompt the assistant to “Translate the following section schema into Japanese, using business-friendly e-commerce tone. Keep naming consistent with the English version. Use the conventions in translations.md”

 

3. Beyond linting: enforcing naming and consistency 

In development, linters help, but they don’t enforce project-wide logic, like class naming conventions, metafield structure, or schema patterns. That’s where AI can fill in the gap.

In theme development, some uses for AI can be: 

• Detect inconsistent naming across schemas

• Refactor section settings to match your internal patterns

• Suggest more accessible defaults (like aria-label additions)

This is where AI feels less like code generation and more like a style guide assist.

4. Reviewing Pull Requests

A tool that is widely used across front end and back end development teams at Flagship is CodeRabbit. Its support for Shopify Liquid is really impressive, and it helps catch potential vulnerability issues and summarize pull request changes. It even generates diagrams of the code changes by putting them in the project’s context.

Whenever we create a Pull request, CodeRabbit will analyse it and generate suggestions and comments on the PR itself. It will also learn from the responses to its comments, so for example if the PR reviewer mentions that the suggested improvement is not accepted and provides a reason for this, CodeRabbit will learn from this and not raise the same issue in the future.

 

5. Looking up products in the admin with Sidekick

We have used Shopify Sidekick a lot when we are looking for products with variants with a specific metafield value in the store. This is helpful when you have a large catalog and some unstructured metafields, which you are not able to use as filter in the product admin.

So if we need to test a new feature in the theme, which is applicable only to products with a specific combination of metafields, Shopify Sidekick becomes extremely helpful.

AI as a Junior Developer 

As Shopify Theme Developers, AI can support us - especially when used with structure, constraints, and a clear sense of purpose.

As Ann Thomas said in her brilliant talk about Scaling Shopify Dev with AI , we should treat AI like a junior dev:

• Give clear prompts

• Define expectations

• Review all output

• Improve the context you give it over time

And just like with junior devs, when you invest in onboarding it well, the results are worth it.

 

Key Takeaways

• Structure matters more than tool choice: define rules and context to get consistent output

• Think of AI as a junior developer: helpful, fast, but needs instructions and review

• Use AGENTS.md and context.md to create shared conventions

• Share examples and best practices within your team to scale quality and learning

As AI tools continue evolving and Shopify keeps improving their developer resources, we're excited to see how these workflows will mature. The fundamentals we've outlined here should remain relevant, but we're always experimenting with new approaches.

We'd love to hear how other Shopify developers are tackling these challenges.

What's working for your team?