{% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %} {% schema %} { "name": "Hero Banner", "settings": [ { "type": "text", "id": "heading" }, { "type": "richtext", "id": "body" }, { "type": "url", "id": "cta_link" } ], "presets": [{ "name": "Hero" }] } {% endschema %} {% assign heading = section.settings.heading %} {% if heading != blank %} <section class="hero" data-section="{{ section.id }}"> <h1>{{ heading | escape }}</h1> {% if section.settings.body != blank %} {{ section.settings.body }} {% endif %} </section> {% endif %} {% for product in collection.products limit: 12 %} {% render 'product-card', product: product, show_vendor: section.settings.show_vendor %} {% endfor %} {{ 'theme.css' | asset_url | stylesheet_tag }} {{ 'application.js' | asset_url | script_tag }} {% liquid assign featured = collections['featured'] for item in featured.products render 'card', product: item endfor %} <style> :root { --color-primary: #0c0c0c; --color-accent: #28CD56; --font-heading: 'Geist', sans-serif; } .hero { min-height: 100vh; display: grid; } .hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.02em; } </style> {% comment %} Synapse AI — five agents, one workflow. Code · Design · QA · Deploy · Monitor {% endcomment %}

GETTING STARTED

Up and running in 5 minutes.

From sign-up to your first AI-generated theme change in five straightforward steps.

Create an account

Sign up at synapse.dev with your email or GitHub account. Choose the plan that fits your workflow — start with Free to explore, then upgrade to Pro when you're ready to connect a Shopify store.

✦

Tip: The Free plan gives you full access to the IDE and local development features. Pro unlocks unlimited AI agents, Shopify sync, and team collaboration.

Install the MCP server

Install the Synapse MCP server globally so your IDE can communicate with Synapse agents. Then add the configuration to your IDE settings.

# Install the MCP server globallynpm install -g @synapse/mcp-server# Verify the installationsynapse-mcp --version# Add to your IDE MCP config (e.g. .cursor/mcp.json){  "mcpServers": {    "synapse": {      "command": "synapse-mcp",      "args": ["--project", "your-project-id"]    }  }}

Connect your Shopify store

Link your Shopify store to Synapse via secure OAuth. You'll be redirected to Shopify to authorize access, then back to Synapse with your store connected.

# Connect via CLIsynapse store connect \  --store my-store.myshopify.com# This opens a browser for OAuth authorization.# Once approved, your store is linked automatically.# Verify the connectionsynapse store status

Create your first project

Create a new project and import an existing theme, or start from a blank canvas. Synapse will sync your theme files automatically and keep them in sync.

# Create a new projectsynapse project create \  --name "My Store Redesign" \  --store my-store.myshopify.com# Import an existing themesynapse theme import --theme-id 12345# Or start from a templatesynapse project create --template dawn

Run your first agent

Describe what you want in natural language. The PM agent analyzes your request, breaks it into tasks, and delegates to specialist agents — Liquid, CSS, JavaScript, and review.

# In your IDE, use the Synapse MCP toolexecute_agent({  project_id: "proj_abc123",  agent_type: "pm",  prompt: "Build a responsive hero section    with an animated headline and CTA button"})# Expected output:# ✓ PM agent created 3 tasks# ✓ Liquid agent: hero section template# ✓ CSS agent: responsive styles + animation# ✓ Review agent: validated all changes

Ready to build?

Create your account and start shipping Shopify themes with multi-agent AI today.

Get started free