--- title: Create a theme description: Follow this tutorial to learn how to set up your development environment and build a new theme using our reference theme. source_url: html: https://shopify.dev/docs/storefronts/themes/getting-started/create md: https://shopify.dev/docs/storefronts/themes/getting-started/create.md --- ExpandOn this page * [What you'll learn](https://shopify.dev/docs/storefronts/themes/getting-started/create#what-youll-learn) * [Requirements](https://shopify.dev/docs/storefronts/themes/getting-started/create#requirements) * [Step 1: Initialize a new theme](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-1-initialize-a-new-theme) * [Step 2: Start a local development server](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-2-start-a-local-development-server) * [Step 3: Upload your theme to a store](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-3-upload-your-theme-to-a-store) * [Step 4: Publish your theme](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-4-publish-your-theme) * [Next steps](https://shopify.dev/docs/storefronts/themes/getting-started/create#next-steps) # Create a theme You're ready to create a new theme. You might be asking yourself: How can I quickly set up my development environment and start coding? In this tutorial, you'll use Shopify CLI and the Skeleton reference theme to create a new theme and upload it to Shopify. *** ## What you'll learn After you've finished this tutorial, you'll have accomplished the following: * Set up your local development environment * Cloned the [Skeleton theme](https://github.com/shopify/skeleton-theme) * Previewed changes made to your local code * Pushed theme code to your Shopify store and published your theme *** ## Requirements * You've installed [Shopify CLI](https://shopify.dev/docs/api/shopify-cli) * If you want to use a [development store](https://shopify.dev/docs/storefronts/themes/tools/development-stores) to build a theme, then create or log in to a [Shopify Partner account](https://partners.shopify.com/signup), and then [create a development store](https://shopify.dev/docs/storefronts/themes/tools/development-stores#create-a-development-store-to-build-and-test-your-theme). We recommend using a development store for this tutorial. * The URL of the store that you want to work on, such as `example.myshopify.com`. * You have a [collaborator account](https://shopify.dev/docs/storefronts/themes/tools/collaborator-accounts) or [staff account](https://help.shopify.com/manual/your-account/staff-accounts) with the **Manage themes** permission or **Themes** permission for the store that you want to work on, or you're the store owner. Caution To use a development store or Plus sandbox store with Shopify CLI, you need to be the store owner, or have a [staff account](https://help.shopify.com/manual/your-account/staff-accounts) on the store. If you create a development store you will be assigned as the store owner. Other staff members must be added to the store. *** ## Step 1: Initialize a new theme Use [`shopify theme init`](https://shopify.dev/docs/api/shopify-cli/theme/theme-init) to clone the Skeleton theme Git repository to your local machine. The [Skeleton theme](https://github.com/shopify/skeleton-theme) is a minimal, carefully structured Shopify theme designed to help you quickly get started. Designed with modularity, maintainability, and Shopify's best practices in mind. 1. In a terminal, navigate to the working directory where you want to build your theme. 2. Enter the following command: ```terminal shopify theme init ``` 3. You're prompted to enter a name for your theme, such as `my-new-theme`. The theme is cloned into a folder with the same name. 4. After the theme is cloned, navigate to the folder: ```terminal cd "my-new-theme" ``` Tip You can also use the `init` command to clone a theme from [another Git repository](https://shopify.dev/docs/api/shopify-cli/theme/theme-init). *** ## Step 2: Start a local development server After you initialize your theme, you can run [`shopify theme dev`](https://shopify.dev/docs/api/shopify-cli/theme/theme-dev) to interact with the theme in a browser. Shopify CLI uploads the theme as a [development theme](https://shopify.dev/docs/storefronts/themes/tools/cli#development-themes) on the store. The command returns a URL that hot reloads local changes to CSS and sections, allowing you to preview changes in real time using the store's data. This preview is only available in Google Chrome. The first time you run the `dev` command, you're prompted to log in to Shopify. 1. To serve your theme, run the following command, where `--store` represents the name of the store that you want to use to preview your theme: ```terminal shopify theme dev --store my-store ``` You need to pass the `--store` flag the first time you preview your theme. The store that you specify is used for future commands until you pass the `--store` flag with a new value. To check which store you're connected to, run `shopify theme info`. 2. In Google Chrome, navigate to `http://127.0.0.1:9292` to open the theme preview. Tip You can also use the `dev` to generate a [preview link](https://help.shopify.com/manual/online-store/themes/adding-themes#share-a-theme-preview-with-others) and a link to the [theme editor](https://shopify.dev/docs/storefronts/themes/tools/online-editor) for the development theme. The following image shows a development server being started using `dev`: ![An image showing how to start a local development server.](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/themes/getting-started/theme-dev-CIj782XX.png) *** ## Step 3: Upload your theme to a store If you want to share a permanent link to your theme, update the code of an existing theme, or prepare for your theme to be published, then you need to push your theme code to Shopify using the [`theme push`](https://shopify.dev/docs/api/shopify-cli/theme/theme-push) command. The first time you push your theme code, you might want to upload the theme to your theme library as a new, unpublished theme. You can do this by running the command with the `--unpublished` flag. When you run the command using this flag, you're prompted to provide a name for the theme that appears in the theme library. ```terminal shopify theme push --unpublished ``` After the theme is created, you can update your theme code by running the `push` command without any flags: ```terminal shopify theme push ``` *** ## Step 4: Publish your theme If you want to make your theme live on your store, then you can publish it using the [`theme publish`](https://shopify.dev/docs/api/shopify-cli/theme/theme-publish) command. Before you run this command, make sure that you've pushed all of your local changes to Shopify using the [`theme push`](https://shopify.dev/docs/api/shopify-cli/theme/theme-push) command. 1. Enter the following command: ```terminal shopify theme publish ``` 2. Select the theme that you want to publish from the list. 3. Select `Yes` to confirm that you want to publish the specified theme. The theme is published and is now the active theme for the store. *** ## Next steps Creating your first theme with our tools is only the first step in building your theme. Consider the following next steps: [![](https://shopify.dev/images/icons/48/blocks.png)![](https://shopify.dev/images/icons/48/blocks-dark.png)](https://shopify.dev/docs/storefronts/themes/architecture) [Learn about theme architecture](https://shopify.dev/docs/storefronts/themes/architecture) [Learn more about the structure of a theme, and the role of each file and folder.](https://shopify.dev/docs/storefronts/themes/architecture) [![](https://shopify.dev/images/icons/48/star.png)![](https://shopify.dev/images/icons/48/star-dark.png)](https://shopify.dev/docs/storefronts/themes/best-practices) [Review best practices](https://shopify.dev/docs/storefronts/themes/best-practices) [Build your theme with a set of principles to use themes to their full potential, and to create great ecommerce experiences.](https://shopify.dev/docs/storefronts/themes/best-practices) [![](https://shopify.dev/images/icons/48/pickaxe-1.png)![](https://shopify.dev/images/icons/48/pickaxe-1-dark.png)](https://shopify.dev/docs/storefronts/themes/tools) [Build as a team](https://shopify.dev/docs/storefronts/themes/tools) [Take advantage of our developer tools to build effectively as a team.](https://shopify.dev/docs/storefronts/themes/tools) [![](https://shopify.dev/images/icons/48/themes.png)![](https://shopify.dev/images/icons/48/themes-dark.png)](https://shopify.dev/docs/storefronts/themes/theme-features) [Implement Shopify features](https://shopify.dev/docs/storefronts/themes/theme-features) [Enable Shopify features or add functionality to your theme.](https://shopify.dev/docs/storefronts/themes/theme-features) *** * [What you'll learn](https://shopify.dev/docs/storefronts/themes/getting-started/create#what-youll-learn) * [Requirements](https://shopify.dev/docs/storefronts/themes/getting-started/create#requirements) * [Step 1: Initialize a new theme](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-1-initialize-a-new-theme) * [Step 2: Start a local development server](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-2-start-a-local-development-server) * [Step 3: Upload your theme to a store](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-3-upload-your-theme-to-a-store) * [Step 4: Publish your theme](https://shopify.dev/docs/storefronts/themes/getting-started/create#step-4-publish-your-theme) * [Next steps](https://shopify.dev/docs/storefronts/themes/getting-started/create#next-steps)