Shopify questionAnswer3 min read
How Do I Edit Shopify Theme Code Safely?
Editing theme code is safe when you never touch the live theme first. This is the routine I use on client stores.
Key takeaways
- Open the code editor from
Online Store, the theme's menu button, thenEdit code. - Always duplicate the theme and edit the copy. Your admin holds up to 20 themes.
- Each file has a Timeline to restore earlier versions, but it can't recover deleted files and assets have no history.
- Code edits are lost in the updated copy when you install a theme update, so keep a log of every change.
- Who it is for
- Store owners making small code changes
- Time needed
- 5 minutes to read
- What you need
- Access to Online Store in your admin
Duplicate your live theme, make your code changes on the copy, preview them on desktop and mobile, then publish the copy once everything works. You open the code editor from Online Store, the menu button next to the theme, then Edit code. Never experiment on the published theme, because that's the version your shoppers are using.
The safe way to edit, step by step
- Duplicate the theme. In
Online Store, click the menu button next to your live theme and chooseDuplicate. The copy appears as "Copy of" plus the theme's name. - Download a backup. Keep a downloaded copy of the theme as well. A download contains the theme only, not your products or pages.
- Open the copy's code editor. Use the menu button on the copy, not the live theme, and choose
Edit code. - Change one thing at a time. Save, then preview the copy before moving to the next change.
- Test on a real phone. Check product pages, the cart and the menu, not just the page you edited.
- Publish the copy when it works, and keep the old theme for a while as your fallback.
Undoing a mistake with file history
Every theme file has a Timeline view where you can restore a previous version. Shopify is clear about its limits:
- It restores one file at a time, not the whole theme.
- It can't bring back a file you deleted.
- History is finite, so older versions may be gone.
- Files in the
assetsfolder, such as CSS and JavaScript, have no Timeline at all.
That last point catches people out. If you edit a stylesheet and break it, Timeline won't help, which is another reason to work on a copy.
Pick the right place for the change
| Change | Best place | Why |
|---|---|---|
| Text, colors, layout | Theme editor | No code to break |
| Small snippet | Its own snippet file | Easy to find and remove |
| Bigger feature | A new section | Reusable in the editor |
| Ongoing team work | GitHub integration | Full change history |
If the change can be made in the theme editor, make it there. My guide to customizing the Dawn theme shows how far the editor goes before you need code, and Shopify Liquid basics covers the template language when you do.
Theme updates and your edits
When you install an update for a theme you've edited, Shopify's help center warns that "all your code changes are removed in the updated copy". Your edited version stays in the library, but you'll need to apply the changes again to the new one. Keep a simple log: the file, what you changed and why. It turns an update from guesswork into a checklist.
When to use GitHub instead
If more than one person edits the theme, Shopify's GitHub integration is safer than the code editor. Pushing to a connected branch updates the theme, and edits saved in the theme editor or code editor are committed back to the branch automatically, a setting you can't turn off. One catch from Shopify's documentation: when the code editor saves a file, its version overwrites the GitHub version, so agree who edits where.
Keep the edit from slowing the store
Pasting scripts into the theme's main layout file is the most common way a quick edit slows a store. Shopify's performance guidance names too much JavaScript, loaded at the wrong time, as one of the main causes of slow interaction and delayed loading, and recommends removing or deferring scripts that block the page. After any edit, check the page with my Shopify speed checker.
What to do next
- Duplicate your live theme today, even if you aren't editing anything yet.
- Start a change log for every code edit.
- Get help for anything beyond small tweaks. Shopify says code editing is meant for people who know HTML, CSS and some Liquid, and suggests a Shopify Partner for custom features. I'm one of those partners, so weigh that, but my Shopify development service starts from $300.
Free tools
Check your own store
Free, no sign-up. Each one runs a part of this guide for you.
Frequently asked questions
Where is the code editor in Shopify?
In your Shopify admin, go to Online Store, click the menu button next to the theme and choose Edit code. You can also open it from the Shopify app under Online Store, then Manage themes.
Do code edits go live straight away?
Edits saved on your published theme are what shoppers see, which is why you should edit a duplicate. Changes to an unpublished copy only go live when you publish it.
Can I undo a change in Shopify theme code?
Yes, for most files. Each file has a Timeline view to restore an earlier version, but it can't recover deleted files and asset files have no history.
Will a theme update delete my code changes?
Shopify warns that code changes are removed in the updated copy of the theme. Your old edited theme stays in the library, so you can copy the changes across.
Can I edit Shopify theme code on my phone?
Yes. In the Shopify app, open Online Store, then Manage themes, and choose Edit code from the menu. It works for small fixes, but a laptop is far easier.
Should I use GitHub for my Shopify theme?
If more than one person works on the theme, yes. Shopify's GitHub integration syncs both ways and keeps a commit history of every change.
Sources
- Editing theme code, Shopify Help Center
- Duplicating themes, Shopify Help Center
- Shopify GitHub integration for themes, Shopify.dev
- Theme performance best practices, Shopify.dev
Related services and work
I'm a Shopify developer and CRO specialist. I have built and improved Shopify stores since 2018, completed more than 1,000 projects, and hold a 4.96 average rating across 719 client reviews.
More guides
-
Why Shopify Stores Lose Sales on Mobile: A Practical CRO Checklist
Mobile visitors decide fast, with one thumb and plenty of distractions. Here is how to find the leaks on a Shopify store and fix them in the right order.
-
Shopify CRO Audit Checklist for DTC Brands
The checklist I use to audit DTC Shopify stores, from checking that the data can be trusted to deciding which fixes to ship first.
-
When to Build a Custom Shopify App Instead of Adding Another Subscription
Another subscription is the quickest fix, until you are paying for five apps that still don't match how your business works. Here is how to decide.
-
How to Find Out What Theme a Shopify Store Uses
Every Shopify store names its theme in the page code. Here is where to look, how to read what you find, and what it means for your own theme choice.
-
How to See What Apps a Shopify Store Uses
Apps leave traces in a store's page code: scripts from their own servers, app embed folders and pixel settings. Here is how to read them, and what to do with the list.
-
How to Name a Shopify Store (and Check the Name Is Free)
A store name has to be easy to say, free as a domain and a handle, and clear of other brands. Here is the process I use with clients, and what Shopify lets you change later.
