> ## Documentation Index
> Fetch the complete documentation index at: https://superdesign.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Create Shopify Theme

> How to use Superdesign to create Shopify theme

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

## Prerequisites

* [Cursor IDE](https://cursor.sh) or VS Code with AI assistant
* [Shopify Dev MCP](https://github.com/user/shopify-dev-mcp) installed in your IDE
* A Superdesign project with your theme designs

<Steps>
  <Step title="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`):

    ```json theme={null}
    {
      "mcpServers": {
        "shopify-dev-mcp": {
          "command": "npx",
          "args": ["-y", "shopify-dev-mcp@latest"]
        }
      }
    }
    ```

    <Tip>
      Restart your IDE after adding the MCP configuration.
    </Tip>
  </Step>

  <Step title="Export HTML from Superdesign">
    1. Open your Superdesign project
    2. Select all the frames you want to include in your theme (homepage, product page, collection page, cart, etc.)
    3. Click **Export Code** and download the HTML files

    <Tip>
      Name your frames descriptively (e.g., `index`, `product`, `collection`, `cart`) - these will map to Shopify templates.
    </Tip>
  </Step>

  <Step title="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
  </Step>

  <Step title="Deploy to Shopify">
    Once conversion is complete, you have two options:

    **Option A: Connect via Shopify CLI**

    ```bash theme={null}
    shopify theme dev --store your-store.myshopify.com
    ```

    **Option B: Upload as ZIP**

    1. Zip your theme folder
    2. Go to your Shopify Admin → Online Store → Themes
    3. Click **Add theme** → **Upload zip file**
  </Step>
</Steps>

## 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`    |

<Tip>
  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.
</Tip>