Experienced E-commerce Agency for Magento/ Adobe Commerce/ Shopify/ Shopware Development

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

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 1

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. 

Step 2-1

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. 

Step 2-2

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

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.

Access the Edit Code section 1

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

Access the Edit Code section 2

Step 2: Get familiar with the Theme Folder Structure

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

Access the Edit Code section 3
  • 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.
Access the Edit Code section 4
  • 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.

Making Code Edits

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. 


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. 

Image Description
A data-driven marketing leader with over 10 years of experience in the ecommerce industry. Summer leverages her deep understanding of customer behavior and market trends to develop strategic marketing campaigns that drive brand awareness, customer acquisition, and ultimately, sales growth for our company.
Website Support
& Maintenance Services

Make sure your store is not only in good shape but also thriving with a professional team yet at an affordable price.

Get Started
mageplaza services
    • insights

    People also searched for


    Stay in the know

    Get special offers on the latest news from Mageplaza.

    Earn $10 in reward now!

    Earn $10 in reward now!

    go up