Create Shopify Theme

Turn your Superdesign UI into a fully functional Shopify theme using AI-powered code conversion.

Prerequisites

Cursor IDE or VS Code with AI assistant
Shopify Dev MCP installed in your IDE
A Superdesign project with your theme designs

Install Shopify Dev MCP

Install the Shopify Dev MCP server in your IDE to enable Liquid validation and Shopify-specific code assistance.For Cursor, add this to your MCP settings (.cursor/mcp.json):

{
  "mcpServers": {
    "shopify-dev-mcp": {
      "command": "npx",
      "args": ["-y", "shopify-dev-mcp@latest"]
    }
  }
}

Restart your IDE after adding the MCP configuration.

Export HTML from Superdesign

Open your Superdesign project
Select all the frames you want to include in your theme (homepage, product page, collection page, cart, etc.)
Click Export Code and download the HTML files

Name your frames descriptively (e.g., index, product, collection, cart) - these will map to Shopify templates.

Convert to Shopify Theme

Open your IDE in the folder containing your exported HTML files, then use this prompt:

I have HTML design files that I need to convert into a Shopify theme.

**Files to convert:**
- [List your HTML files, e.g., index.html, product.html, collection.html, cart.html]

**Theme name:** [Your theme name]

**Requirements:**
1. Create a complete Shopify theme folder structure
2. Convert all HTML to Liquid with proper Shopify objects (product, collection, cart, etc.)
3. Make all text content customizable via section settings
4. Add translation support using locales
5. Include proper schema for each section
6. Optimize images using Shopify's image_url filter

**Design notes:**
- [Any specific design requirements, fonts, colors, etc.]

Please use shopify-dev-mcp to validate the theme after conversion.

The AI will:

Create the standard Shopify theme folder structure (assets/, config/, layout/, locales/, sections/, snippets/, templates/)
Convert your HTML into Liquid templates with proper Shopify objects
Add customizable section settings for the theme editor
Validate the theme using the Shopify Dev MCP

Deploy to Shopify

Once conversion is complete, you have two options:Option A: Connect via Shopify CLI

shopify theme dev --store your-store.myshopify.com

Option B: Upload as ZIP

Zip your theme folder
Go to your Shopify Admin → Online Store → Themes
Click Add theme → Upload zip file

Example Frame-to-Template Mapping

Superdesign Frame	Shopify Template
`index`	`templates/index.json`
`product`	`templates/product.json`
`collection`	`templates/collection.json`
`cart`	`templates/cart.json`
`page`	`templates/page.json`
`blog`	`templates/blog.json`
`article`	`templates/article.json`

For best results, design each page type as a separate frame in Superdesign. This makes the conversion process cleaner and results in better-organized Liquid code.

Getting started

Chrome Extension

Design Agent

Canvas

Skills

Account & Workspace Settings

Resources

Prerequisites

Example Frame-to-Template Mapping

​Prerequisites

​Example Frame-to-Template Mapping

Prerequisites

Example Frame-to-Template Mapping