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.

Anchor to What you'll learnWhat 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
• Previewed changes made to your local code
• Pushed theme code to your Shopify store and published your theme

Anchor to RequirementsRequirements

• You've installed Shopify CLI
• If you want to use a development store to build a theme, then create or log in to a Shopify Partner account, and then create a development store. 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 or staff account with the Manage themes permission or Themes permission for the store that you want to work on, or you're the store owner.

Anchor to Step 1: Initialize a new themeStep 1: Initialize a new theme

Use shopify theme init to clone the Skeleton theme Git repository to your local machine.

The 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:

   Copy

   $

   $

   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:

   Copy

   $

   $

   cd "my-new-theme"

Anchor to Step 2: Start a local development serverStep 2: Start a local development server

After you initialize your theme, you can run shopify theme dev to interact with the theme in a browser. Shopify CLI uploads the theme as a development theme 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:

   Copy

   $

   $

   shopify theme dev --store {store-name}

   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.

The following image shows a development server being started using dev:

Anchor to Step 3: Upload your theme to a storeStep 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 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.

After the theme is created, you can update your theme code by running the push command without any flags:

Anchor to Step 4: Publish your themeStep 4: Publish your theme

If you want to make your theme live on your store, then you can publish it using the 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 command.

1. Enter the following command:

   Copy

   $

   $

   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.

Anchor to Next stepsNext steps

Creating your first theme with our tools is only the first step in building your theme. Consider the following next steps:

Learn about theme architecture

Learn more about the structure of a theme, and the role of each file and folder.

Review best practices

Build your theme with a set of principles to use themes to their full potential, and to create great ecommerce experiences.

Build as a team

Take advantage of our developer tools to build effectively as a team.

Implement Shopify features

Enable Shopify features or add functionality to your theme.