How to Edit Shopify Theme Code – The Complete Guide

Shopify is an easy-to-use platform for setting up beautiful online stores. Many Shopify themes are available to help you create an elegant storefront for customers. Yet, you may need to edit the Shopify theme to meet your brand vision.

The built-in Shopify theme editor is a great way to tweak your theme with zero coding. It is an effortless way to modify the Shopify theme through features such as drag-and-drop. But, things you can do with it are limited.

If you’re looking to customize the Shopify theme as per your need, you will need to edit the Shopify theme code.

But how’d you do that?

Let’s find out through this informative post on how to edit Shopify theme code.

We’ll see a step-by-step method to edit the Shopify theme liquid files and other helpful information.

Table of Contents

• How to Edit Shopify Theme Code Directly?
  • Understand the Shopify Theme Folder Structure
  • Theme Check in Code Editor
• Editing Shopify Theme Files: Best Practices
  • Use Comments to Track Changes
  • Tweak CSS for Small Changes
  • Inspect Code & Experiment Changes
  • Change One Thing at Once
• How to Roll Back to an Older Version of the Shopify Theme?
• Create Delightful Shopify Experiences by Editing Shopify Theme

How to Edit Shopify Theme Code Directly?

Shopify themes use Liquid (Shopify’s template language), HTML, CSS, JS, and JSON languages.

You need to have knowledge of these languages to edit Shopify theme codes.

In your Shopify admin, expand the Online Store section in the Sales channels, and click Themes.

Now, in the themes section, you will find your current Shopify theme. Click the three dots beside the Customize button and click Edit code.

Now, the Shopify theme code editor will appear.

You can see all the Shopify theme folders in the left side of the screen.

Open the relevant Shopify theme.liquid files from the folders and start editing.

The Shopify theme code editor supports editing multiple theme files at once through tabs.

In Shopify, the theme files use liquid template, HTML, CSS, JS, and JSON languages.

You need to have a good knowledge of these languages to customize Shopify theme code.

The files are also arranged in different folders, which you can access from the left-hand side of the code editor.

Understand the Shopify Theme Folder Structure

The Shopify theme uses layouts, templates and sections. These files are stored in different folders.

Here’s everything about the different folders in Shopify theme:

• Layout: This folder contains the theme.liquid and password.liquid files, which is used by every page on the Shopify store. The theme.liquid file contains repeated elements, such as  headers and footers. These elements on the pages are rendered through the code present in the theme.liquid files.
• Templates: The templates folder contain templates for different pages in Shopify. The templates control what is being displayed on the pages, through sections. Older themes use only liquid files for templates, while the latest themes also contain templates in .json format.
• Sections: The sections are the individual components of the Shopify templates. These can also be customized directly from the theme editor. You can add any of the sections in this folder to your template to customize the page layout.
• Snippets: This folder contain the code snippets in liquid files, which can be called anywhere in the theme files. Changing the code in the section liquid files will reflect changes everywhere they are used.
• Assets: It contains all the .js and .css files used in the Shopify. You can tweak these asset files per your requirements.

Theme Check in Code Editor

Shopify theme code editor has a built-in linter.

It checks for any warnings or issues with the code and displays in the editor.

Theme Check helps you identify the following issues:

• Parser blocking scripts, which can slow down a storefront
• Inconsistencies between translation files, such as missing translation keys or translations that don’t match in a locale file
• Missing templates

Here’s an example of warning in the Shopify theme editor:

The code with error is underlined in red color. Hover over the line to see the error.

Editing Shopify Theme Files: Best Practices

Editing Shopify theme files is straightforward and easy, but one must be cautious while editing the theme code.

Here are the best practices to keep in mind while editing Shopify theme files.

Use Comments to Track Changes

Commenting is a good coding practice. It makes easier for other developers or even for you to identify and understand the custom code in future.

In Shopify liquid file, you can add comments between the following tags:

{% comment %} ...this is comment in Shopify... {% endcomment %}

We recommend adding comments to the starting and ending of custom codes you add to Shopify theme files.

Tweak CSS for Small Changes

New to Shopify’s liquid templates? You can use CSS to make quick changes to the Shopify theme.

You can edit the CSS codes present in the assets folder directly from the Shopify theme editor.

You’ll still need to have basic coding knowledge in CSS language, but it will be an easier option as compared to editing liquid template files.

Inspect Code & Experiment Changes

In your browser, you can use the webmaster tools to try the code and see live changes before implementing.

Chrome users can do this by right clicking on the Shopify Frontend > Inspect Element.

The dev tools allow you to edit the code and try changes live on the frontend.

This way you can test the code before implementing it.

Change One Thing at Once

Editing Shopify theme code files is the task you should perform carefully.

There can be hundreds of changes you want, but doing everything at once can get your into a trouble.

We suggest editing changes one by one.

This way it will also be easier for you to debug changes!

How to Roll Back to an Older Version of the Shopify Theme?

The change you made to Shopify theme may not always meet your requirements.

It may even happen that you want to revert the changes or roll back to older version of the Shopify theme. You can edit homepage in Shopify to make it easy for visitors to understand your product and service and navigate to the section that sparks interest.

Thankfully, Shopify allows you to do that!

Follow these steps to roll back to an older version of Shopify theme:

• Go to Shopify > Themes > Edit Code.
• Select the Edited Shopify theme file in which you want to revert changes.
  
• Now, on the top-left corner of the code editor, click Current to get the dropdown where you’ll see all the versions of the file. Choose the version that you want to restore.
  
• Finally, click Save to roll back the edits in the Shopify theme file.

That’s it! Now, you’ve rolled back the edits in the Shopify theme file.

Create Delightful Shopify Experiences by Editing Shopify Theme

Editing Shopify theme unlocks the opportunities to customize your Shopify storefront. In the above post, we showed step-wise method on how to edit Shopify theme code. We also covered different types of folders in Shopify theme, along with the best practices to follow. Now, its your turn to make your Shopify storefront shine! Edit Shopify theme and make changes you’ve always wanted!

Or

You can hire a professional Shopify design and theme development company like Meetanshi to help you! We’ve a team of professional Shopify designers and developers who will help you transform the storefront!