Shopify provides a range of tools to help you build Shopify themes faster.

## Tools for building and editing themes

The following tools help you quickly scaffold, test, share, and develop Shopify themes.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/api/shopify-cli/theme" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI 3.x
    </h3>
    <p class="resource-card__description">A powerful command-line tool for building Shopify themes, and exploring Liquid code in a REPL interface.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/shopify-liquid-vscode" 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">
      Shopify Liquid VS Code extension
    </h3>
    <p class="resource-card__description">Use the Shopify Liquid Visual Studio Code extension to improve your local development experience.</p>
  </a>
</div>
</div>


### Legacy tools

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/cli/cli-2/commands" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify CLI 2.x
    </h3>
    <p class="resource-card__description">The previous major version of Shopify CLI.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/theme-kit" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Theme Kit
    </h3>
    <p class="resource-card__description">A legacy command-line tool for building Shopify themes.</p>
  </a>
</div>
</div>


## Web-based editors for themes

The following tools can be used by merchants and developers to customize themes in the Shopify admin. As a developer, you should account for these tools when you're developing your theme to ensure the best merchant experience.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/online-editor" 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">
      Admin theme editor
    </h3>
    <p class="resource-card__description">An interactive editor that lets merchants customize their online store and theme.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/code-editor" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cli"
     data-alt-src="/assets/resource-cards/cli-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Admin code editor
    </h3>
    <p class="resource-card__description">A code editor built into the Shopify admin.</p>
  </a>
</div>
</div>


## Access tools

The following tools allow you to access Shopify infrastructure for testing, and help you to safely access merchant stores.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/development-stores" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Development stores
    </h3>
    <p class="resource-card__description">A free Shopify account that you can use to build and test themes.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/collaborator-accounts" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/authentication"
     data-alt-src="/assets/resource-cards/authentication-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Collaborator accounts
    </h3>
    <p class="resource-card__description">An account that lets you access and manage a merchant&#39;s store through the Partner Dashboard.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/theme-access" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/authentication"
     data-alt-src="/assets/resource-cards/authentication-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Theme Access app
    </h3>
    <p class="resource-card__description">An app that grants programmatic access to themes in a particular store. Used with Shopify CLI and Theme Kit.</p>
  </a>
</div>
</div>


## Version control tools

The Shopify GitHub integration helps you to track and push changes to and from a theme in a Shopify store by using Git.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/github" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/github"
     data-alt-src="/assets/resource-cards/github-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify GitHub integration
    </h3>
    <p class="resource-card__description">Manage your Shopify theme code by using Git version control.</p>
  </a>
</div>
</div>


## Testing tools

The following tools help you to optimize and detect errors in your theme code.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/theme-check/configuration" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Theme Check
    </h3>
    <p class="resource-card__description">A command-line based linter for themes. Also offered as part of the Shopify Liquid Visual Studio Code extension.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/liquid-prettier-plugin" 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">
      Liquid Prettier Plugin
    </h3>
    <p class="resource-card__description">Use the Liquid Prettier Plugin to format your Liquid and HTML in a consistent style.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/theme-inspector" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/build"
     data-alt-src="/assets/resource-cards/build-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Shopify Theme Inspector for Chrome
    </h3>
    <p class="resource-card__description">Profile and debug your Liquid template performance with this extension for Chrome Developer Tools.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/lighthouse-ci" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/rest"
     data-alt-src="/assets/resource-cards/rest-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      Lighthouse CI
    </h3>
    <p class="resource-card__description">Ensure that your theme is performant by using the Lighthouse CI GitHub Action.</p>
  </a>
</div></p>

<p><div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/liquid-doc" data-theme-mode="">
    <div class="resource-card__indicator-container"><img
     src="/assets/resource-cards/cheatsheet"
     data-alt-src="/assets/resource-cards/cheatsheet-dark"
     aria-hidden="true"
     class="resource-card__icon themed-image"></div>
    <h3 class="resource-card__title">
      LiquidDoc
    </h3>
    <p class="resource-card__description">Enable enhanced tooling features for Liquid snippets.</p>
  </a>
</div>
</div>


## Tools for learning Liquid

The following tools help you to learn and write Liquid.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="https://cdn.shopify.com/" 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">
      Imagery<span class="resource-card__badge resource-card__badge--new">New</span>
    </h3>
    <p class="resource-card__description">Learn how to write image tags, and understand how images are dynamically transformed with Imagery.</p>
  </a>
</div>
</div>


## Example theme

The Dawn theme is Shopify's example theme. You can refer to it to understand how a theme can be put together, or fork it as a starting point to build your own theme.

<div class="resource-card-grid">
  <div>
  <a class="resource-card" href="/docs/storefronts/themes/tools/dawn" 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">
      Dawn
    </h3>
    <p class="resource-card__description">Use Dawn as an example of how to build a Shopify theme.</p>
  </a>
</div>
</div>