Editing theme code

You can edit your theme code to make detailed changes to your online store. 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.

Before you customize your theme

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

Edit your theme code

To edit your theme 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.

Theme code customization tutorials

You can follow theme code customization tutorials to guide you in making changes to your online store. The tutorials are organized based on the type of page or feature that they modify.

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.

Ready to start selling with Shopify?

Try it free