How to Undo Changes on a Shopify Website
When working in the Shopify theme editor, there’s an easy undo button that looks like this:
But once the changes are saved (which I recommend doing often), you can no longer undo past changes.
Updating a Shopify website can take a lot of time, so the feeling when you realize you’ve lost some of your work is just horrible. This usually happens to me in one of these ways:
- You have 2 tabs open of the theme editor, and unknowingly switch between tabs during your edits. After saving on one tab, you might start working on the other tab where you haven’t refreshed the page, so you’ve worked on an older version of the website, therefore overriding any new changes once you save.
- Your colleague has worked on the website at the same time as you. Each time one of you clicks save, it’s overriding the changes of the other person, even if you're not working on the same page!
In both of these scenarios, there’s a chance to recover the lost work!
The content of any Shopify page template is saved in a JSON code format. JSON is an way to store data. What this file looks like is a list of all the sections on the page, and within each section is listed the content within that, as well as the section settings selected. And on Shopify, these JSON files have a stored history, meaning that you can revert back to previous versions of the file at any time.
When you revert back to a previous version of the file, it affects only that one file or page template, rather than affecting the entire website’s history. While file contents are saved individually, sessions in the theme editor are saved as a whole.
All you need to do to revert back to an older version of the page is open the code file, select the date & time version you want to revert back to in the list and click Save. To do that go to Online Store > … > Edit code. In the Templates folder, find the name of the template that you need to revert changes for. Click the “Current” dropdown to see the file history. Select the version you want, and click Save.
If you have a complex scenario where you need to merge different versions of the same saved template, it is possible to copy different parts of the JSON code and combine them. That will take some tricky copy + pasting of the exact content you need to combine the right versions.
If that’s something you’re attempting, note that below the sections listed or blocks listed, there is a list of the order of sections and blocks. The IDs of these must match or else the file will not save. See how in the below image it says “sections”, and nested within that is each section on the page (main and recommended posts in this case), with its settings and content nested within that. Under the list of sections, we see “order” which lists the order of the sections on that page.
You’d need to carefully copy and paste the parts you want to keep in the file.
What Shopify theme editor changes can you undo?
You can recover ALL changes made in the theme editor including page content changes and theme settings changes, because the contents of these are stored in .json files which have a saved history.
If you're editing the theme's code files, you can also revert to past versions of .liquid files. You cannot recover changes to .css or .js code files, because these do not have a saved history. I do wish CSS files had a saved history but there would be thousands of saved versions on any of my stores, so I understand why it doesn’t. This is why we HIGHLY recommend never touching the theme’s CSS file, and instead creating your own custom.css file. That way you never have to worry about interfering with the theme's core CSS files.
Note that if you duplicate a theme, then the duplicate won’t have all the past editing history as the original theme files do.
How to avoid losing changes on Shopify?
There are a few things you can do to avoid losing your work on Shopify:
-
Only have 1 Customizer tab open at a time. Opening multiple opens you up to having different versions of work happening at the same time.
-
Tell your colleagues if you’re working on the theme. If only one person works on it at once, you don't have to worry about someone accidentally overwriting anyone's work.
-
Duplicate the theme before starting any major changes. Having a backup is key.
-
Use a Custom CSS file. This is to avoid making any irreversible changes in the theme's core CSS files.
-
Use store backup apps like Rewind Backups. Rewind keeps daily backups of your store so that you can restore pieces or the entire store if you ever make a mistake.
Hopefully if you've come across this article, it has helped you save yourself from disaster!
Hana Drdla
