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 Dawn 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 [Dawn](/docs/storefronts/themes/tools/dawn), Shopify's reference 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](/docs/api/shopify-cli)
- If you want to use a [development store](/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](/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](/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. Staff accounts are created automatically the first time you access a development store with your Partner staff account through the Partner Dashboard.
## Step 1: Initialize a new theme using Dawn
Use [`shopify theme init`](/docs/api/shopify-cli/theme/theme-init) to clone the Dawn Git repository to your local machine.
[Dawn](/docs/storefronts/themes/tools/dawn) is Shopify's reference theme, built for performance, flexibility, and ease of use. You can use Dawn as the starting point for building a theme.
> Warning:
> If you're building a theme for the Shopify Theme Store, then you can use Dawn as a starting point. However, the theme that you submit needs to be [substantively different from Dawn](/docs/storefronts/themes/store/requirements#uniqueness) so that it provides added value for users. Learn about the [ways that you can use Dawn](/docs/storefronts/themes/tools/dawn#ways-to-use-dawn).
1. In a terminal, navigate to the working directory where you want to clone Dawn.
2. Enter the following command:
```sh
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:
```sh
cd "my-new-theme"
```
> Tip:
> You can also use the `init` command to clone a theme from [another Git repository](/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`](/docs/api/shopify-cli/theme/theme-dev) to interact with the theme in a browser. Shopify CLI uploads the theme as a [development theme](/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:
```sh
shopify theme dev --store {store-name}
```
<br>
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](/docs/storefronts/themes/tools/online-editor) for the development theme.
The following image shows a development server being started using `dev`:
## 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`](/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.
```sh
shopify theme push --unpublished
```
After the theme is created, you can update your theme code by running the `push` command without any flags:
```sh
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`](/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`](/docs/api/shopify-cli/theme/theme-push) command.
1. Enter the following command:
```sh
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:
<div class="resource-card-grid">
<div>
<a class="resource-card" href="/docs/storefronts/themes/architecture" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/blocks"
data-alt-src="/assets/resource-cards/blocks-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Learn about theme architecture
</h3>
<p class="resource-card__description">Learn more about the structure of a theme, and the role of each file and folder.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/storefronts/themes/best-practices" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/star"
data-alt-src="/assets/resource-cards/star-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Review best practices
</h3>
<p class="resource-card__description">Build your theme with a set of principles to use themes to their full potential, and to create great ecommerce experiences.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/storefronts/themes/tools" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/library"
data-alt-src="/assets/resource-cards/library-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Build as a team
</h3>
<p class="resource-card__description">Take advantage of our developer tools to build effectively as a team.</p>
</a>
</div></p>
<p><div>
<a class="resource-card" href="/docs/storefronts/themes/theme-features" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/theme"
data-alt-src="/assets/resource-cards/theme-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Implement Shopify features
</h3>
<p class="resource-card__description">Enable Shopify features or add functionality to your theme.</p>
</a>
</div>
</div>