{"id":2233,"date":"2023-08-08T07:30:38","date_gmt":"2023-08-08T07:30:38","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-edit-shopify-theme-code\/"},"modified":"2025-01-02T09:57:49","modified_gmt":"2025-01-02T09:57:49","slug":"how-to-edit-shopify-theme-code","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-edit-shopify-theme-code\/","title":{"rendered":"How to Edit Shopify Theme Code \u2013 The Complete Guide"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re looking to customize the Shopify theme as per your need, you will need to edit the Shopify theme code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">But how\u2019d you do that?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s find out through this informative post on&nbsp;<em><strong>how to edit Shopify theme code<\/strong><\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We\u2019ll see a step-by-step method to edit the Shopify theme liquid files and other helpful information.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-edit-shopify-theme-code-directly\">How to Edit Shopify Theme Code Directly?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/meetanshi.com\/blog\/best-shopify-themes-for-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify themes<\/a>&nbsp;use Liquid (Shopify\u2019s template language), HTML, CSS, JS, and JSON languages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You need to have knowledge of these languages to edit Shopify theme codes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In your Shopify admin, expand the&nbsp;<strong>Online Store&nbsp;<\/strong>section in the Sales channels, and click&nbsp;<strong>Themes<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/1-go-to-shopify-online-store-themes.png\" alt=\"Go to Shopify online store themes\" class=\"wp-image-32653\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, in the themes section, you will find your current Shopify theme. Click the three dots beside the Customize button and click&nbsp;<strong>Edit code<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/2-edit-current-shopify-theme-code.png\" alt=\"Edit current shopify theme code\" class=\"wp-image-32654\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, the Shopify theme code editor will appear.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can see all the Shopify theme folders in the left side of the screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Open the relevant Shopify theme.liquid files from the folders and start editing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Shopify theme code editor supports editing multiple theme files at once through tabs.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/3-edit-code-in-shopify-theme.png\" alt=\"Shopify theme code editor\" class=\"wp-image-32656\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">In&nbsp;<a href=\"https:\/\/www.shopify.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify<\/a>, the theme files use liquid template, HTML, CSS, JS, and JSON languages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re not familiar with Shopify liquid coding, you can use ready-made sections for Shopify to customize your store. For example, you can use our&nbsp;<a href=\"https:\/\/meetanshi.com\/shopify-collection-slider-section.html\">Shopify Collection Slider section<\/a>&nbsp;to display the list of collection on your store without writing code manually.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"understand-the-shopify-theme-folder-structure\">Understand the Shopify Theme Folder Structure<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The Shopify theme uses layouts, templates and sections. These files are stored in different folders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s everything about the different folders in Shopify theme:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/4-shopify-theme-folders.png\" alt=\"Shopify theme folder\" class=\"wp-image-32657\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Layout:&nbsp;<\/strong>This folder contains the&nbsp;<strong>theme.liquid<\/strong>&nbsp;and&nbsp;<strong>password.liquid<\/strong>&nbsp;files, which is used by every page on the Shopify store. The theme.liquid file contains repeated elements, such as&nbsp; headers and footers. These elements on the pages are rendered through the code present in the theme.liquid files.<\/li>\n\n\n\n<li><strong>Templates:&nbsp;<\/strong>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.<\/li>\n\n\n\n<li><strong>Sections:&nbsp;<\/strong>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.<\/li>\n\n\n\n<li><strong>Snippets:&nbsp;<\/strong>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.<\/li>\n\n\n\n<li><strong>Assets:&nbsp;<\/strong>It contains all the .js and .css files used in the Shopify. You can tweak these asset files per your requirements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"theme-check-in-code-editor\">Theme Check in Code Editor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Shopify theme code editor has a built-in linter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It checks for any warnings or issues with the code and displays in the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Theme Check helps you identify the following issues:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Parser blocking scripts, which can slow down a storefront<\/li>\n\n\n\n<li>Inconsistencies between translation files, such as missing translation keys or translations that don\u2019t match in a locale file<\/li>\n\n\n\n<li>Missing templates<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s an example of warning in the&nbsp;<a href=\"https:\/\/help.shopify.com\/en\/manual\/online-store\/themes\/theme-structure\/extend\/edit-theme-code\" target=\"_blank\" rel=\"noreferrer noopener\">Shopify theme editor<\/a>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/6-theme-code-check-in-shopify.png\" alt=\"Theme check in Shopify\" class=\"wp-image-32697\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The code with error is underlined in red color. Hover over the line to see the error.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"editing-shopify-theme-files-best-practices\">Editing Shopify Theme Files: Best Practices<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Editing Shopify theme files is straightforward and easy, but one must be cautious while editing the theme code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here are the best practices to keep in mind while editing Shopify theme files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"use-comments-to-track-changes\">Use Comments to Track Changes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Shopify liquid file, you can add comments between the following tags:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">{% comment %} &#8230;this is comment in Shopify&#8230; {% endcomment %}<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/7-use-comments-to-edit-shopify-theme-code.png\" alt=\"Comments to Edit Shopify Theme Code\" class=\"wp-image-32710\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We recommend adding comments to the starting and ending of custom codes you add to Shopify theme files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tweak-css-for-small-changes\">Tweak CSS for Small Changes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">New to Shopify\u2019s liquid templates? You can use CSS to make quick changes to the Shopify theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can edit the CSS codes present in the assets folder directly from the Shopify theme editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/8-edit-css-shopify-theme-file.png\" alt=\"Edit CSS in Shopify Theme File\" class=\"wp-image-32713\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">You\u2019ll still need to have basic coding knowledge in CSS language, but it will be an easier option as compared to editing liquid template files.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"inspect-code-and-experiment-changes\">Inspect Code &amp; Experiment Changes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In your browser, you can use the webmaster tools to try the code and see live changes before implementing.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Chrome users can do this by right clicking on the&nbsp;<strong>Shopify Frontend &gt; Inspect Element<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/9-inspect-to-edit-shopify-theme-code.png\" alt=\"Inspect edit in Shopify theme\" class=\"wp-image-32714\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">The dev tools allow you to edit the code and try changes live on the frontend.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This way you can test the code before implementing it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"change-one-thing-at-once\">Change One Thing at Once<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Editing Shopify theme code files is the task you should perform carefully.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There can be hundreds of changes you want, but doing everything at once can get your into a trouble.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We suggest editing changes one by one.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This way it will also be easier for you to debug changes!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-roll-back-to-an-older-version-of-the-shopify-theme\">How to Roll Back to an Older Version of the Shopify Theme?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The change you made to Shopify theme may not always meet your requirements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It may even happen that you want to revert the changes or roll back to older version of the Shopify theme. You can&nbsp;<a href=\"https:\/\/meetanshi.com\/blog\/how-to-edit-homepage-in-shopify\/\">edit homepage in Shopify<\/a>&nbsp;to make it easy for visitors to understand your product and service and navigate to the section that sparks interest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Thankfully, Shopify allows you to do that!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Follow these steps to roll back to an older version of Shopify theme:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to&nbsp;<strong>Shopify &gt; Themes &gt; Edit Code<\/strong>.<\/li>\n\n\n\n<li>Select the Edited Shopify theme file in which you want to revert changes.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/10-edit-code-in-shopify-theme.png\" alt=\"Edit code in Shopify theme\" class=\"wp-image-32715\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Now, on the top-left corner of the code editor, click&nbsp;<strong>Current<\/strong>&nbsp;to get the dropdown where you\u2019ll see all the versions of the file. Choose the version that you want to restore.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/06\/11-select-original-in-shopify-edit-theme-file.png\" alt=\"Roll back changes in Shopify theme\" class=\"wp-image-32716\"\/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Finally, click&nbsp;<strong>Save<\/strong>&nbsp;to roll back the edits in the Shopify theme file.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it! Now, you\u2019ve rolled back the edits in the Shopify theme file.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-delightful-shopify-experiences-by-editing-shopify-theme\">Create Delightful Shopify Experiences by Editing Shopify Theme<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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\u2019ve always wanted!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Or<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can hire a professional Shopify design and theme development company like Meetanshi to help you! We\u2019ve a team of professional Shopify designers and developers who will help you transform the storefront!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[787],"tags":[],"class_list":["post-2233","post","type-post","status-publish","format-standard","hentry","category-shopify"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2233"}],"version-history":[{"count":1,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2233\/revisions"}],"predecessor-version":[{"id":5083,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2233\/revisions\/5083"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}