Customizing themes

After you choose a theme that defines the basic look and feel of your online store, you can customize the theme to suit your unique brand. You can customize your theme settings from your Shopify admin by using the theme editor. The theme editor includes a theme preview and a toolbar that you can use to add and remove content, and to make changes to your settings. To learn about which settings are available for your theme, see the theme's documentation:

If your theme doesn't include a setting for the changes that you want to make and you are comfortable with HTML, CSS, and Liquid, then you can edit your theme code.

Before you customize your theme

Before you customize your theme, it's a good idea to do the following tasks:

  • Duplicate your theme. Duplicating your theme creates a backup copy, making it easy to discard your changes and start again if you need to.
  • Make sure that you understand what level of support is available. You can learn about where to find support for different themes in Support for themes.
  • Learn about the requirements and best practices for uploading images.

Customize your theme settings

You can use the theme editor to customize your online store's content, layout, typography, and colors. Each theme provides settings that allow you to change the look and feel of your store without editing any code.

The theme editor includes a preview of your store so that you can see the way your changes will look before you publish them.

To customize your theme settings:

  1. Find the theme that you want to edit and click Customize.

Different types of pages have different theme sections. When you first open the theme editor, the settings for the home page are shown. To access the settings for other pages, select the page type from the top bar drop-down menu:

Theme editor top bar drop-down menu

The theme editor toolbar is divided into Sections and Theme settings.

The theme editor toolbar showing Sections and Theme settings

You can use sections to modify the content and layout of the different pages on your store. You can use theme settings to customize your store's fonts and colors, and make changes to your social media links and checkout settings.

To learn more about editing sections and theme settings, see Sections and theme settings.

Edit your theme code

To make changes that can't be made in the theme editor, you can edit your theme code. Most of the files that make up a theme contain Liquid, Shopify's templating language. Theme files also contain HTML, CSS, and JavaScript. Edit the code for a theme only if you know HTML and CSS, and have a basic understanding of Liquid.

To edit your code:

  1. Click Actions > Edit code.

The code editor shows a directory of theme files on the left, and a space to view and edit the files on the right:

The code editor page

You can expand the code editor to fill the screen by clicking the expand icon:

The expand icon

You can return the page to normal by clicking the collapse icon:

The collapse icon

When you click a file in the directory on the left, it opens in the code editor. You can open and edit multiple files at once. Any files that you modify will show a purple dot next to the file name:

The directory of theme files showing a purple dot next to the files that have been modified

This can help you to keep track of where you have made changes.

If you want to revert any changes to a file after you click Save, then open the file and click Older versions. A drop-down menu shows the date and time for each save that you've made. Select the version that you want to revert to, and click Save.

The Older versions drop-down menu

While the code editor is expanded to fullscreen, you can toggle the editor color scheme between Light and Dark by clicking the buttons at the bottom of the page:

The code editor shown with the Dark color scheme

To learn about the benefits of using the dark editor, see The Power of the Dark Side: Dark User Interfaces on the Shopify Partners Blog.

Get help with customizations

If you need help with making changes to your theme, then you can contact your theme's developer for support.

To see what other resources are available to help you with theme customizations, see Additional resources for theme support.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free