How to Edit Shopify Theme: A Step-by-step Guide

Shopify is famous for a wide range of themes that are suitable for any industry and business size, allowing merchants to start their online store from scratch with ease. However, to best differentiate the visual and highlight the features of your business, you might want to customize your Shopify theme. In this article, we will provide you with instructions on how to edit a Shopify theme in 2 ways.

Before You Begin

Duplicate your theme

Make sure you back up your original theme before editing to preserve the old settings, layout, and design. If you make unintended changes or encounter issues while editing, you can easily revert to the original version.

Understand support levels

You might encounter several problems while customizing your theme and need to find support from Shopify. Note that depending on your subscription plan, Shopify will provide different levels of support. Research this beforehand to be better prepared when seeking assistance and troubleshooting issues.

Learn about image requirements

Understanding image requirements ensures your photos are displayed correctly and optimizes your store’s performance. If your photos don’t align with the right dimensions, several problems including customer experience, page loading speed, or visual presentation might occur. 

Read more: Shopify Theme Development: 10 Steps to Build a Shopify Theme from Scratch

How to edit Shopify theme with Shopify theme editor

Step 1: Go to the Themes section 

On the Shopify dashboard, click on Online Store on the left of the page and choose the Themes section. 

Step 2: Customize the theme

If it’s the theme you are currently using, find it in the Current theme section, or find it in the Theme library section if you want to customize other themes in the inventory. 

At the top of the page, you can choose the page template you want in the dropdown menu, such as the Home page, Products, Collection lists, or even your own metaobject section. 

In each section, you have the option to modify the content, rearrange elements, or change layouts to suit your needs. However, the options are different based on each section so remember to look into Shopify’s tutorial to have an overview of how your page is set up. 

Step 3: Save the Shopify theme setting

Hurray! You are coming to the last step. After editing your desired theme, it’s time to save and publish it. Remember to carefully review the edits for any errors before publishing your theme. Pay attention to physique elements such as colors, typography, and layout to ensure they meet your brand requirements and personality. You can take a look at the preview to visualize how your new theme will look like.

How to edit Shopify theme files with code

Step 1: Access the Edit Code section 

On the Shopify dashboard, click on Online Store > Themes. Click the three-dot icon next to the theme you want to edit and choose Edit code.

If you are already in the Customize section, click the three-dot icon on the left upper corner and choose Edit code.

Step 2: Get familiar with the Theme Folder Structure

The code editor displays the theme files in 7 folders based on their functionalities: 

• Layouts: Includes the layout files for your theme. These files determine the overall structure of your store’s page and the elements such as headers, footer, and navigation menus. The most important file is the theme.liquid and password.liquid file, which provides the foundation for all the content pages.

• Templates: Contains the main templates for different pages or content types in your store. Contains the main templates for different pages or content types in your store. These are custom-designed layouts that affect the structure and functions of specific pages such as the Homepage, Collection pages, Blog posts, etc. Editing this section allows you to create more flexibility and customization for your store. 
• Sections:  Includes blocks that you can add, delete, or reorder within a section, enabling the customization of your store and a new layout display for your products. 
• Snippets: Contains reusable code snippets that can be included in various templates. With these snippets, you don’t need to spend time adding identical elements to several pages but can apply them all at once effortlessly and quickly. 
• Assets: Stores various files such as images, fonts, CSS stylesheets, and JavaScript files. These files are used to enhance the visual appearance and functionality of your theme.
• Config: Houses configuration files that define the settings and options for your theme. 
• Locales: Contains translation files for different languages supported by your theme. You can add or edit these files to provide translated versions of texts and labels used in your theme and localize your Shopify store.

Step 3: Making Code Edits

Choose the file you want to edit and make changes right in the code editor. You can modify  HTML, CSS, JavaScript, or Liquid code.

Step 4: Testing and publishing 

Notice the warnings or issues that Theme Check reports to fix the errors in time. Some issues that you might encounter are:

• Missing theme files
• Unsupported code or features
• Unused variables or files

After checking and making sure your code works well, click on the Save button then choose Publish to make your theme live. 

Conclusion 

Editing themes is not difficult with the support of Shopify’s cutting-edge features; however, it can be confusing for beginners. In this article, we have covered the steps on how to edit the Shopify theme with the Theme Editor and with code as well as providing some tips to focus on, hoping that it will help you to make the most of your Shopify store.