A Complete Guide On How to Edit Theme Code on Shopify

Running a Shopify store is hard! I mean I'm not a Shopify merchant but I have worked with a bunch of them and they all have one problem in common.

Eventually, there is always a need to customize the code in their theme. Now if you're just starting out, you can avoid having to do customizations to your Shopify theme yourself by using a paid theme and reaching out to theme support.

But eventually, there might be a need for you to dive into the code yourself and make some changes. And my tutorial on how to edit theme code on Shopify will help you do that.

Now before we start I want you to know that this tutorial is meant for Shopify merchants that want to make small customizations to their theme.

For example, if you want to do something like:

• Change some static text in your theme, like the "Powered By Shopify" link in the footer
• Add a Script tag for useful tools such as Google Analytics, GTM, or other useful marketing tools you might want to use
• Change the color of something on your site
• Hide pieces of the specific sections of your site from showing when people are visiting on their phone vs. their laptop

All the examples used above are what I would consider minor customizations.

Anyone who wants to make complex customizations or build new features into their theme is better off hiring a Shopify Developer or learning how to code in Shopify liquid (the main language used for Shopify themes).

Ok now that we got the introduction out of the way, let's dig in deeper

How to Avoid Destroying Your Theme

Before we can start talking about how to edit your theme, we need to talk about how you can avoid messing it up.

I know you're probably already worried about this but if you make a mistake when editing the code in your theme, there's a pretty good chance that you'll break your theme!

And nothing could be more annoying to your customers than a "broken" theme that behaves unexpectedly when they are using your site.

So we're going to talk about some precautions you can take to ensure that you don't break anything when you are editing the code in your theme.

As a quick overview, here are all the precautions you can take to make sure everything goes well:

1. Make a backup of your live theme before making any changes
2. Don't ever edit code on your live theme
3. Be mindful of theme settings (general theme settings and section settings)

Naturally, I'm going to go into a bit more detail on each one so that you can make sure you don't make any mistakes.

Make a Backup of Your Live Theme

This is actually super important! Before making any changes to your theme, you need to go in and make a backup of your theme.

That way if you make any mistakes you can easily restore your theme to the point before you made any changes to it.

If you're wondering how you can make a backup, I mention how to do it in a video embedded further down in the post.

Don't Ever Edit the Code on Your Live Theme

You never want to make changes to the code of your live theme....ever

This is a good general rule to follow in order to ensure that you don't make any mistakes you can't recover from.

In the section above, I showed you how to make a duplicate of your live theme. This was done so that you can have a safe backup of your site in case something goes wrong.

But I actually want you to make another duplicate of your theme. This will be the version of the theme that you will be editing. You can follow the same steps as shown in the video above and make another duplicate of your live theme.

If you followed all the steps so far, you should have three themes:

• Your Live Theme
• A backup of your live theme
• The Theme you will be making edits to

I know it might seem excessive to have 3 of the same theme but using this method you will be covered no matter what happens while you edit the code in your Shopify Theme.

You might also want to change the name of the backup and the theme you will be making edits to so that you don't make any mistakes when working on them.

Be Sure to Test Your Edits to the Theme Code

This one might seem a little obvious but if I don't say it, you might skip this part. It is very important that you thoroughly test test whatever edits you make to theme code before copying it over to your live Shopify theme.

If you don't do this, it is possible that you might accidentally break something in your theme and that could have an impact on your sales!

My advice is for you is to do the following:

• Make sure that you are making edits to the duplicate of your theme made for editing
• Test the theme by previewing it in the Shopify admin on desktp screens, tablet screens and phone screens
• Load up the preview of your duplicate theme and try navigaitng through the site, adding something to your cart and going through checkout like an actual customer
• Reach out to Shopify support as needed if you run into any issues or accidentally break something in the duplicate of your theme.

Once you've confirmed that your edits to the theme are working properly with no issues, then you can try copying over the changes to the live theme or making the duplicate you are currently working on your new live theme.

And if you ever need to roll back to a previous version of your site, you've got that backup to hold you down.

Be mindful of theme settings

Since we are working directly with the theme code this is a pretty important thing that I wanted to mention.

There are two things you want to keep in mind when it comes to theme settings.

1. All customizations you make to your theme in the Shopify Theme customizer are saved as theme settings in a folder called config. This folder has a file called settings_data.json and settings_schema.json. Do not ever make any changes to these two files unless you know what you are doing
2. Anything saved in the Shopify theme customizer is specific to the theme you are working on. So if you were to change a setting in one version of your theme, that setting will not carry over to any duplicates of your theme

Well now that we have all warnings out of the way, let's get down to making edits to your theme.

How To Actually Edit Your Theme's Code

Alright, this is what we've all been waiting for. I'm finally going to go over how to make edits to your theme.

Now I could type out all the steps and show some helpful images but I feel like it is much better to illustrate this through a video.

Here's another snippet from a video that I made about how to edit your theme code. I skipped ahead in the video to the part that talks about how to edit your theme's

Keep in mind that I am using the Dawn theme as an example since it is a free theme that every Shopify merchant has access to.

But if you're just making minor customizations then this should work regardless of what kind of theme you have.

What if you want to make complex edits or build new features into your theme

As I said above this post was made for Shopify merchants that want to make minor edits to their theme code.

But here are two options for those of you looking to make more complex edits or build new features into your theme

1. Your first option would be to hire a Shopify Developer to help you. If you're just starting out you might be wondering where is a good place to find Shopify Developers. Assuming you are not looking for help from a full-blown agency, you can try looking for a Shopify Developer on Fiverr.
   
   Since I'm a developer myself, I've never hired a developer on there but I have worked with freelancers on there before and I think it's a great platform to hire freelancers from.
2. If you wouldn't mind learning how to code to make improvements to your Shopify store yourself, you can check out a youtube channel called WeeklyHow to learn more about Shopify Theme development.

The Wrap Up

If you've gotten this far in the post, I want to thank you for reading and I hope you learned what you needed to start making edits to the theme code for your Shopify theme.

I made this post because I think there is a lack of good resources for Shopify merchants and Developers looking to make better use of Shopify as a platform.

Moving forward, I will be making posts about the following two general topics:

1. Shopify Theme Tips to help Shopify Merchants optimize their Shopify store, improve the experience their customers have on the store and get more sales
2. Shopify Development tips and tutorials for Developers that use Shopify as a platform

If that sounds interesting to you, subscribe to my newsletter and my youtube channel to get notified about new content that I put out.