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'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> </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>