Shopify Theme Commands | Build Themes With Shopify CLI

Key Takeaways

• Shopify theme commands simplify creating, managing, and improving your store’s themes. They offer various functions, from theme setup to code checking and deployment.
• Using Shopify CLI and ThemeKit, you can work on your theme commands across different operating systems, including Windows, macOS (Mac), and Linux, making it accessible to many users.

Command Overview

Here’s an overview of some important Shopify theme commands:

1. init: This command helps you build a theme by copying the initial setup from a Git repository to your computer.
2. dev: Upload your current theme to your online store so that you can preview how it looks.
3. check: It’s like a helpful tool that scans your theme’s code to find mistakes and ensure it follows the best practices for themes and Liquid (a coding language).
4. list: Simply list all the themes available in your store, showing their names.
5. open: Provides links to see how a specific theme will appear on your store.
6. pull: Fetches theme files from your online Shopify store to match your local copy.
7. push: Sends your theme files from your computer to Shopify, like saving your work online.
8. share: Lets you upload your theme as a new one that’s not yet published, useful for sharing it without making it live.
9. publish: Takes a theme you’ve shared and makes it live on your store for everyone to see.
10. package: Pack your theme files into a ZIP file that’s easy to upload to Shopify.
11. delete: Removes a theme from your store. Be careful, it’s permanent!
12. language-server: Starts a tool for dealing with language-related tasks.
13. console: Opens a tool for working with Liquid code, allowing you to experiment and test your theme’s code.
14. info: Displays information about your theme setup.
15. auth logout: Logs you out of your Shopify account if you want to disconnect.
16. config autocorrect: Turns on or off the feature that automatically corrects your commands.
17. help: If you need help with what to do, this command lists all the available commands and explains what they do.
18. version: Tells you which version of Shopify CLI you’re using.
19. upgrade: Helps you get the latest versions of essential Shopify tools.
20. search: Begins a search on Shopify.dev to find more information.

These commands make creating, managing, and improving themes for your Shopify store easier.

Key Features & Benefits 

Here’s an explanation of each of the Shopify theme commands in simple terms:

init

This command sets up the foundation for creating a new theme. It can clone an existing theme from a Git repository or create a new one based on Shopify’s example theme, Dawn. You can give your theme a custom name during initialization.

init flags:

–clone-url : Specifies the web address of the starting theme you want to use.

–latest: Clones the latest release of the starting theme.

–path : Specifies where your theme files will be stored.

–verbose: Provides more detailed information while executing the command.

dev

Use this command to upload your current theme to a Shopify store for previewing. It provides a link to view your theme in a web browser and allows you to make real-time changes to your theme’s appearance.

dev flags:

–store : Pick the Shopify store to preview your theme.

–theme : Select the theme to preview.

–host : Set the network interface for preview.

–port : Choose a local port for preview.

–live-reload : Control how your theme updates when you make changes.

–theme-editor-sync: Keep your theme in sync between your local copy and Shopify admin.

check

This command runs Theme Check to look for errors and ensure your theme follows best practices. It’s like a spell-checker for your theme’s code.

check flags

–config : Use a custom configuration file.

–category : Run specific checks.

–fail-level : Define the level of severity that causes a check to fail.

–auto-correct: Automatically fix correctable issues.

–output : Choose the format for check results.

list

Lists all the themes in your Shopify store, showing their names, IDs, and statuses (e.g., live or unpublished).

list flags:

–store : Indicate the Shopify store to list themes.

–role : Filter themes by their role (e.g., live, unpublished, development).

–name : Show only themes containing a specific name.

–id : List a theme by its unique ID.

open

Opens a specific theme for previewing in a browser. It provides links to view and edit the theme in the Shopify admin.

open flags:

–store : Specify the store to access themes.

–theme : Choose the theme to open.

–live: Access the live (published) theme.

–development: Access your development theme.

–editor: Open the theme editor in your web browser.

pull

Retrieves theme files from your Shopify store, ensuring your local theme matches the online version.

pull flags

–store : Indicate the store to pull theme files from.

–theme : Select the theme to pull.

–live: Pull files from the live (published) theme.

–development: Download files from your remote development theme.

–nodelete: Keep local files when pulling.

push

Uploads your local theme files to Shopify, updating the theme on your store. It’s like saving your work online.

push flags:

–store : Specify the store to upload your theme.

–theme : Choose the theme to overwrite.

–development: Push to your development theme.

–allow-live: Allow overwriting the live (published) theme.

–publish: Automatically publish the theme after pushing.

share

Uploads your theme as a new, unpublished theme in your theme library. This is useful for sharing your work with others without making it live on your store.

1. share:

–store : Indicate the store to share your theme.

–environment : Select the environment to use.

publish

Publishes an unpublished theme from your theme library, making it live on your store.

publish flags:

–store : Specify the store to publish the theme.

–theme : Choose the theme to publish.

–force: Publish the theme without confirmation.

package

Packages your theme files into a ZIP file, which can be easily uploaded to Shopify.

package flags:

–path : Define the path to your theme directory.

delete 

Deletes a theme from your Shopify store. Be careful with this one, as it permanently removes a theme.

delete flags:

–store : Choose the store to delete themes from.

–theme …: Select themes to delete.

–force: Delete themes without confirmation.

language-server

Starts a server for handling language-related tasks.

language-server flags:

–verbose: Get more detailed information.

–no-color: Remove the use of different colors in the command’s output.

console

Starts an interactive tool for working with Liquid code, allowing you to test and experiment with your theme’s code.

console flags:

–store : Specify the store to preview your data.

–url : Provide a URL for context.

info

Displays information about your current theme environment, such as your connected store.

info flags:

–verbose: Get more detailed information.

These commands help you manage, develop, and maintain themes for your Shopify store more efficiently.

Shopify CLI for Theme Development

How to use Shopify CLI for theme development

Using Shopify CLI for theme development is straightforward. You can follow the instructions below to start using Shopify theme commands:

• Connecting Shopify CLI to Your Store

To start using it, you must connect it to your online store. This connection allows Shopify CLI to know which store you’re working with. This setup is a one-time process.

• Serving the theme Locally

After the initial connection, you can use Shopify CLI to serve your theme code on your local computer. Your theme is available to work on locally, like a draft. It’s not live on your online store, which is excellent for testing and making changes without affecting your customers’ experience.

• Creating a Development Theme

You can create a development theme. This is like making a safe copy of your theme, specifically for experimentation. It will impact your live store once you decide to publish it. This way, you can freely tinker with your design and functionality.

• Benefits of Faster Development

Shopify CLI offers the advantage of speeding up your theme development. You can quickly see the effects of your changes, making it easier to refine your design and features. It streamlines the development process, saving you time.

• Importance of GitHub Integration

The new GitHub integration is a valuable addition. It simplifies the process of syncing your theme code with the theme library. This feature is crucial for managing different versions of your theme and collaborating with other team members or developers. It ensures that your theme development is efficient and organized.

Shopify CLI workflow

Here’s a step-by-step breakdown of Shopify CLI workflow:

1. Starting with a Duplicate of an Existing Theme:

Begin by creating a duplicate of an existing theme in your Shopify store. This serves as your starting point for customization.

2. Downloading the Theme Code using the CLI:

Use the Shopify CLI to download the theme’s code onto your local development environment. This code will be the basis for your theme modifications.

3. Creating a Git Repository:

Establish a Git repository for version control. This allows you to track changes, collaborate with others, and maintain a history of your theme’s development.

4. Serving the Theme using the CLI:

Use the CLI to serve the theme locally. This action launches a development server, allowing you to preview and test your theme changes in a local environment, which is faster and safer than modifying your live store directly.

5. Committing and Pushing Changes through GitHub:

Commit your theme code changes to the Git repository and push them to a platform like GitHub. This ensures your work is securely stored and easily accessible, enabling collaboration and version management.

6. Syncing the Code with the Theme Library:

Sync your theme code with the Shopify theme library using the CLI. This step ensures that the changes made locally are reflected in your online store. The new GitHub integration simplifies and enhances this syncing process.

7. Benefits of Using Shopify CLI for Theme Development:

Shopify CLI offers several benefits, including streamlining the development process, providing version control through Git, and enabling local theme testing, which speeds up development.

8. Importance of the New GitHub Integration:

The new GitHub integration is vital for syncing code with the Shopify theme library. It enhances the reliability and efficiency of this synchronization process, making it easier to manage and maintain your themes.

9. Advantages of Serving Themes Locally for Faster Development:

Serving themes locally allows for rapid development and testing, reducing the risk of errors on your live store. It enables you to experiment with changes without affecting your customers’ experience.

10. Limitations of Using Shopify CLI for Syncing Code without GitHub Integration:

Using Shopify CLI for syncing code without the GitHub integration can be less efficient. Manual syncing may lead to errors, and resolving conflicts becomes more challenging.

Using Shopify CLI 3.0 for Theme Development 

To use Shopify CLI 3.0 for theme development and deploy themes to different stores, follow these steps:

1. Upgrade to Shopify CLI 3.0:

• On a Mac, upgrade using Homebrew with the command: brew upgrade shopify-cli in the terminal.
• On other machines like Linux or Windows that were using the Ruby gem, uninstall the old CLI with: gem uninstall shopify-cli. Then, install the new CLI from npm using: npm install -g @shopify/cli or with Yarn using: yarn global add @shopify/cli.
• Upgrading is essential because the old version will become unsupported after May 2023, and the new version offers significant improvements.

2. Overview of New Commands and Features:

• Shopify CLI 3.0 introduces a new plugins system that allows extending CLI functionality by installing plugins.
• Commands like “plugins” and “help” are now provided through plugins.
• The “serve” command for launching the development server is renamed to “dev” to match other development tools.
• The “whoami” command is replaced by the “info” command, making CLI usage simpler.
• Sensitive operations like “publish” and “push” now require authentication for security.

3. Authenticating to the CLI:

• Tokens expire after 90 minutes, requiring frequent re-authentication, which can be cumbersome.
• Alternatively, you can use a dedicated “team access” app to generate a permanent token that doesn’t expire.
• Save tokens in a .env file and pass them to the CLI with the “–password” flag to authenticate without being prompted.

4. Initialize a New Theme:

Create a new theme using the “shopify team init” command, which generates a new theme from the sample Dawn theme, ready for local development.

5. Develop Theme Locally:

Use the “shopify team dev” command to launch the development server, which watches for changes in your theme files, similar to the previous “serve” command.

6. Create GitHub Workflows:

• Set up GitHub workflows to automate deployments. These workflows can check the theme and deploy it to different environments automatically.
• If the checks are successful, you can check first and only deploy to dev, test, and prod environments sequentially.

7. Use Environment Variables for Different Environments:

• Configure environment variables for different environments like dev, test, and prod, including store URLs and tokens.
• This allows you to push the same theme codebase to different stores, making it powerful for managing themes across various environments.

8. Benefits of the New CLI:

• The upgraded CLI provides better commands, authentication options, plugin support, and automation capabilities.
• Shopify has listened to developer feedback to improve the CLI.
• It is highly recommended to upgrade to Shopify CLI 3.0 to unlock these new features and prevent future issues in your theme development workflow.

By following these steps and taking advantage of the new features in Shopify CLI 3.0, you can streamline your theme development process and efficiently deploy themes to different stores.

Using ThemeKit Watch Command for Shopify Theme Development

Here’s how to use the ThemeKit watch command for Shopify theme development:

1. Open the store’s front: Open your live storefront website in a web browser tab. This way, you can view any changes you make to your theme in real time.
2. Run theme watch: In your computer’s terminal, navigate to the folder where your theme files are located. Then, type and run the command “theme watch.” This command keeps an eye on your theme files for any modifications.

3. Make Theme Changes: You can start changing your theme’s code. For instance, you might edit a template file like “theme.liquid” and add some HTML code. When you save these changes, ThemeKit detects them automatically.

4. See Live Updates: As soon as you save your changes, ThemeKit swiftly uploads and updates your theme on the live storefront. You don’t need to manually upload anything; you can instantly see the alterations on your live website.

5. Stop Watching (Ctrl + C): To halt the watching process and prevent any unintended changes from going live, press “Ctrl + C” in your terminal. This stops the synchronization of changes.
6. Local Changes Don’t Update Live: After you stop watching, any further changes you make to your local theme files won’t automatically update on the live website. The watch process needs to be restarted.
7. Restart Watch and Save: Restart the watch command by rerunning it in your terminal to continue seeing live updates. Then, save your changes as before, and they will be promptly reflected on the live storefront.

Using the Shopify team kit makes developing your team easy and efficient. With the command line tool, you can instantly change your local environment and see them on your store.

Read more: Shopify Theme Detector

FAQs

Conclusion

In conclusion, mastering Shopify theme commands opens up a world of possibilities for enhancing and customizing your Shopify store’s themes. These simple yet powerful tools empower you to easily create, manage, and refine your themes. So, explore the potential of Shopify theme commands and take your online store to the next level.