Customize a theme
As a theme developer, you can customize themes for Shopify merchants. These customizations might range from small tweaks to complete redesigns. Shopify experts can offer theme customization services through the Shopify experts marketplace.
In this tutorial, you'll use Shopify CLI to customize a merchant's theme and then share your progress with them.
If you're customizing a theme for a client, then you should also review our best practices for working with merchants.
What you'll learnAnchor link to section titled "What you'll learn"
After you've finished this tutorial, you'll have accomplished the following:
- Gained access to the merchant's store
- Set up your local development environment
- Downloaded a copy of the merchant's theme
- Made a change and previewed it
- Shared your changes with the merchant
- Published your changes
RequirementsAnchor link to section titled "Requirements"
- The URL of the store that you want to work on, such as
Installation requirements for Shopify CLIAnchor link to section titled "Installation requirements for Shopify CLI"
The requirements to install and run Shopify CLI depend on your operating system:
Note: When you install Shopify CLI using Homebrew, Homebrew installs Node.js, Ruby, and Git for you.
Step 1: Request access to the merchant's storeAnchor link to section titled "Step 1: Request access to the merchant's store"
To work on a merchant's theme, you should request access to their store. Working on a theme in a merchant's store lets you test it with the merchant's products and other resources.
If you haven't done so already, you should request a collaborator account with the Manage themes permission for the store. Collaborator accounts give you access to only the sections of a store that a merchant wants you to access, and don't count toward a store's staff limit.
Step 2: Install Shopify CLIAnchor link to section titled "Step 2: Install Shopify CLI"
If you haven't done so already, install Shopify CLI. Shopify CLI is a command-line tool that helps you to build Shopify themes. It lets you preview, test, and share changes to themes while developing locally. Follow the instructions below to install Shopify CLI on macOS, Windows, or Linux.
macOS (Homebrew)Anchor link to section titled "macOS (Homebrew)"
Windows and Linux (npm)Anchor link to section titled "Windows and Linux (npm)"
To install Shopify CLI for themes, install the
@shopify/theme Node.js packages globally using the command line.
Step 3: Download the merchant's theme codeAnchor link to section titled "Step 3: Download the merchant's theme code"
If the merchant doesn't have a GitHub repository for their theme, then you need to download a copy of the theme code to work on it locally.
Run the following command to retrieve a list of all of the themes in the store. You can optionally specify the local path where the theme should be stored using the
Select a theme from the list. Its contents are downloaded to the current folder or the specified folder.
Step 5: Make a customizationAnchor link to section titled "Step 5: Make a customization"
After you've downloaded the merchant's theme, you can make any necessary changes to the theme code. For example, you can add support for multiple currencies and languages in the merchant's theme using our localization tutorial, or you can make an adjustment to the theme's CSS to change its appearance.
Refer to Next steps to explore additional feature tutorials.
Step 6: Preview your changesAnchor link to section titled "Step 6: Preview your changes"
After you make a change to the 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 that you're connected to.
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.
- In a terminal, navigate to your working directory.
Serve your theme by using the following command:
In Google Chrome, navigate to
http://127.0.0.1:9292to open the theme preview.
You can also use the
dev command to generate a preview link and a link to the theme editor for the development theme.
The development theme is destroyed when you run
shopify auth logout. If you need to share your progress with the merchant, then proceed to the next step.
Step 7: Share your changesAnchor link to section titled "Step 7: Share your changes"
To share your changes with the merchant, you need to upload your changes to the theme to the merchant's store. You're prompted to select the theme that you want to update. This command returns a link to the editor for the theme in the Shopify admin and a preview link, both of which you can share with the merchant.
Step 8: Publish the updated themeAnchor link to section titled "Step 8: Publish the updated theme"
After the merchant approves the changes, you can publish the theme to make it live in the merchant's store. If you haven't yet pushed your changes to the store, then you need to do so before you publish the theme.
Enter the following command:
Select the theme that you want to publish from the list.
Yesto confirm that you want to publish the specified theme.
The theme is published and is now the active theme for the store.
- Learn more about building your business building Shopify themes.
Learn how to implement features in a theme. You can enable certain Shopify features or add functionality to a theme. Features fall into the following categories:
Consider introducing version control into a merchant's theme. If this customization is the first of many that you'll do for the same client, then consider using the Shopify GitHub integration to introduce version control into the merchant's theme and make ongoing work easier to manage.
Review some of our best practices for building and customizing themes. When you customize a theme, you should make sure that you're not degrading its performance or accessibility. You should also introduce any improvements with our design best practices in mind.
Learn how to lint your theme code. Use Theme Check, a linter for Liquid and JSON, to detect errors and enforce Shopify theme and Liquid best practices.