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 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
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.
You should request a collaborator account with the the Manage themes permission or 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 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 or Windows. For other platforms, refer to Install Shopify CLI.
To install and run Shopify CLI, you need to have the following installed on your computer:
- Ruby or Ruby+Devkit using RubyInstaller for Windows 2.7 or higher
- Git
Review the full requirements for interacting with Shopify CLI in Getting started with Shopify CLI.
macOS (Homebrew)
Windows (RubyGems.org)
Step 3: Authenticate with Shopify CLI
Use shopify login to connect Shopify CLI with the store that you want to work on.
In a terminal, type
shopify login --store <DOMAIN>, where<DOMAIN>is the store that you want to log into:In your browser window, log into the account that's attached to the store that you want to use for development.
Step 4: 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.
Use this command to access a list of themes in the merchant's store. You can optionally specify the local path where the theme should be stored.
After you select a theme from the list, its contents are downloaded to the current folder or the specified folder.
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 changes
After you make a change to the theme, you can run shopify theme serve 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 this 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 logout. If you need to share your progress with the merchant, then proceed to the next step.
Step 7: Share your changes
To share your changes with the merchant, you need to upload the theme that you're developing as an unpublished theme to the merchant's store. This command returns a link to the online store editor for the theme and a preview link, both of which you can share with the merchant.
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.
Select
Yesto confirm that you want to publish the specified theme.
The theme is published and is now the active theme for the store.
Next steps
- 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.