Shopify Storefront MCP + Windsurf Editor: Complete MCP Integration

Shopify Storefront MCP is a MCP server that Official Shopify MCP server that connects AI agents to a specific Shopify store's catalog, shopping cart, and policies for seamless shopping experiences..

When integrated with Windsurf Editor, you can:

• Access Shopify Storefront MCP functionality through Windsurf Editor

This guide provides step-by-step instructions to set up Shopify Storefront MCP in Windsurf Editor, including configuration, examples, and troubleshooting.

What You'll Achieve

After completing this setup:

• Shopify Storefront MCP will be fully integrated and operational
• You can use Shopify Storefront MCP tools directly in Windsurf Editor
• All Shopify Storefront MCP capabilities will be available for your workflows

Prerequisites

Before starting, ensure you have:

• Windsurf Editor installed and configured
• Compatible operating system (Desktop App)

Installation

Step 1: Install Shopify Storefront MCP

Configuration

Step 2: Configure Windsurf Editor

1. Locate your configuration file:

   • Windows: %USERPROFILE%\.codeium\windsurf\mcp_config.json
   • macOS: ~/.codeium/windsurf/mcp_config.json
   • Linux: ~/.codeium/windsurf/mcp_config.json

2. Add server configuration:

{
  "mcpServers": {
    "shopify-storefront-mcp": {
      "command": "shopify storefront mcp",
      "args": []
    }
  }
}

Note: If Shopify Storefront MCP requires environment variables, add them to the server configuration:
"env": {
  
}

3. Restart Windsurf Editor

Completely quit and restart Windsurf Editor to load the new configuration.

Examples

Once configured, you can use Shopify Storefront MCP in Windsurf Editor:

Testing Your Setup

1. Launch Windsurf Editor
2. Verify Shopify Storefront MCP is available in the tools list
3. Test basic Shopify Storefront MCP functionality

Troubleshooting

Common Issues

Tools Not Appearing

Symptoms: Cascade does not see new tools, Hammer icon missing

Cause: Configuration syntax error or server failed to start.

Solution:

• Check the JSON configuration for syntax errors.
• Verify the command (e.g., npx, python) is in your system PATH.
• Check Windsurf logs for MCP connection errors.

Environment Variables

Symptoms: Authentication failed, Permission denied

Cause: Missing API keys in configuration.

Solution:

• Ensure env block is correctly defined inside the server config.
• Restart Windsurf after changing environment variables.

Shopify Storefront MCP not appearing in Windsurf Editor

Symptoms: Server not listed, Tools not available

Cause: Configuration or installation issue

Solution:

• Verify configuration syntax
• Check Shopify Storefront MCP installation
• Restart Windsurf Editor
• Check logs for error messages

Next Steps

Now that Shopify Storefront MCP is integrated with Windsurf Editor:

• Explore all Shopify Storefront MCP capabilities through Windsurf Editor
• Check out other MCP servers that work with Windsurf Editor
• Join the MCP community for tips and support
• Consider contributing to Shopify Storefront MCP development

Need Help?

• Search for Shopify Storefront MCP documentation
• Check the Windsurf Editor MCP guide
• Join the MCP community discussions