Turn your Superdesign UI into a fully functional Shopify theme using AI-powered code conversion.
Prerequisites
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.
- 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 CLIshopify theme dev --store your-store.myshopify.com
- 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.
