What is the meaning of Shopify themes

Editing theme code

This page was printed on Jan 29, 2020. For the current version, visit https://help.shopify.com/en/manual/using-themes/change-the-layout/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

You can edit the code for your theme.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.
  1. From the Shopify app, tap Store.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  1. From the Shopify app, tap Store.
  2. In the Sales channels section, tap Online Store.
  3. Tap Manage themes.
  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:

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

You can return the page to normal by clicking 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:

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.

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:

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.