Danger Move: Manually Editing Your Theme Code Can Crash Your Shopify Store
Marina S
June 18, 2023 • 7 min read
We understand the joy of perfecting the appearance of your Shopify store. Modern themes can enhance its appeal to customers, build trust, and boost sales. However, our extensive experience has shown that mistakes in theme editing are a common cause of website malfunctions and crashes. Over the years of our work, we have encountered a significant number of clients who have approached us with a common question: “How can I restore the previous version of my store that was working?” We were able to assist many of them, but unfortunately, some were not able to recover their website due to the lack of backups.
Even the smallest error in your code can have unexpected consequences, resulting in thousands of dollars in losses if left unaddressed. A single incorrect character in the code can bring your website to a complete halt. Allow us to share a use-case with you about a Shopify business owner who lost revenue every minute they spent admiring their new, beautiful store theme.
How the Bright Spring Theme Almost Broke the Sales Scheme
May was super excited about the upcoming spring sale on her online furniture and decor store. To make sure everything was perfect, she hired a freelancer to sprinkle her website with a fresh seasonal look.
At first, the store’s theme with the new bright design elements looked flawless, but unfortunately, a day after the launch, May noticed a significant decrease in sales and received a barrage of complaints from frustrated customers.
Upon investigating the complaints, May discovered that an error message would appear when customers tried to add items to their cart. The “Add to Cart” button wasn’t working, and clicking on the cart icon led to no action.
May reached out to the freelancer for help, but the freelancer couldn’t replicate the problem and insisted that everything was working correctly. Left to deal with the issue herself, May tried using different devices and web browsers and discovered that she could buy items on her iPhone, but not on her Macbook. The problem also persisted on a Windows computer. And as if things weren’t bad enough, the freelancer was taking like 4-8 hours to respond to her messages, which was seriously adding to her frustration.
May tried to fix the problem on her own, but she couldn’t get it to work. As time went by, she found herself losing more and more clients, resulting in a decline in income. With the spring sale just around the corner, she grew increasingly concerned about the problem. As much as she loved the new spring accents on her site, the theme wasn’t functioning properly, and she had to say goodbye to them – at least for the time being. Fortunately, she had a backup in place that allowed her to roll back only the assets related to the theme design.
What happened to May and how to avoid it in your own store?
The issue with the theme almost breaking May’s sales can happen to any online store. First, it’s essential to understand that any changes made to the website’s code, including a theme update or a fresh design overhaul, have the potential to cause problems that affect the site’s functionality. The errors and bugs that may arise with your store after editing its code are so numerous and diverse that it is not feasible to address them all within the scope of this article. In our case, the error in the code caused the “Add to Cart” button to stop working, preventing customers from purchasing items.
Another issue that contributed to May’s problem was the freelancer’s unavailability to help address the issue promptly. This highlights the importance of having a reliable and responsive support system in place, especially during crucial periods such as sales events. Fortunately, the Shopify community offers many ways to get help from experienced experts.
Additionally, testing the website’s functionality after any changes are made is crucial to prevent such issues. May could have avoided the problem if she had tested the website thoroughly. It’s also crucial to have a backup in place to protect against any unforeseen issues that may arise. In this case, May’s backup allowed her to roll back only the assets related to the theme design, ensuring that the site’s functionality was restored without losing any data.
Remember the basics when changing the code:
- Be Cautious: Make changes carefully and thoughtfully. Even small mistakes in the code can have a significant impact on your site’s performance.
- Duplicate and Back Up: Always duplicate and back up your theme before making any changes. This will ensure that you have a safety net in case anything goes wrong.
- Test: After making changes, thoroughly test your store to ensure that everything is functioning correctly. Check all aspects of the site, including links, buttons, and forms.
- Get Support: If you encounter any issues or are unsure about making changes to your theme’s code, seek help from the theme’s developers, Shopify experienced experts, or support forums. This can save you time and prevent potentially damaging mistakes.
Some practical advice to protect your store when manually editing theme code
The success of an online retail business hinges on its functionality and user experience. Yet, coding issues pose a significant threat to online retailers, jeopardizing their customer base, revenue, and overall success. Unsafe themes and customizations are common culprits of these issues, but there are practical steps to avoid them.
Choose a safe theme for your store:
- Stick to official Shopify themes: The best way to ensure safety is to use official themes provided by Shopify and its certified partners, which can be found in the Shopify Theme Store. These themes are tested and approved by Shopify’s security team, so you can trust that they are secure and compatible with Shopify stores.
- Utilize Shopify Support: If you’re on the Basic Shopify plan or higher and using a free Shopify theme, then you can get up to 60 minutes of complimentary design support, or design time, which is tracked in 15-minute increments.
- Evaluate the theme developer: If you decide to use a third-party theme, make sure to research the developer. Look for reviews and ratings from other Shopify store owners who have used the theme. Also, check the developer’s website to make sure it looks professional and trustworthy. Ensure that the chosen developer provides customer support.
- Check for updates: Make sure the theme you choose is regularly updated. Updates are important because they often include bug fixes and various improvements.
- Avoid nulled themes: Nulled themes are pirated copies of premium themes that have been modified to remove the license verification. These themes often contain malicious code that can harm your website and compromise your customer’s data.
Customize your store theme safely:
1. Duplicate the theme. Shopify provides a way to save themes manually before making changes to prevent data loss. Follow these steps:
- From your store’s admin panel, go to the Online Store tab in the menu.
- In the Themes section, select the current theme and click on the Actions drop-down menu.
- Choose Duplicate to create a copy of the theme.
- The duplicated theme will be saved in the Theme Library. Scroll down to locate it.
- For better organization, consider renaming the duplicated theme.
2. Thoroughly check Shopify Design Policy: To ensure that your design plan can be implemented, it is important to review Shopify’s Design Policy, as not all customizations are supported by the platform.
3. Become familiar with the Shopify Design forum: It is a valuable resource that provides guidance on editing HTML, CSS, or Liquid for customizing your online store. If you need help editing theme files, consider posting your query in the forum and browsing through the postings to see how other Shopify merchants are customizing their themes.
4. Use Shopify’s built-in theme editor: The built-in theme editor in Shopify allows you to make various visual changes to your theme easily, without the need for custom coding.
5. Backup your theme: Before making any major changes to your theme, make sure to back up your theme files. This will allow you to revert to a previous version if something goes wrong. Using a comprehensive backup solution, like the BackupMaster app allows you to restore theme assets separately.
6. Test on a staging site: If possible, set up a staging site that is an exact replica of your live site. This will allow you to test any changes or customizations without affecting your live site.
7. Test website functionality across different platforms, browsers, and devices. Problems that seem specific to one device or browser may affect others differently.
8. Seek assistance from Shopify Experts: Shopify Experts are industry professionals with extensive knowledge and experience in creating, updating, and optimizing Shopify themes.
Why it is critical to duplicate and back up your theme
Backing up your theme is a critical and essential step in any customization process. Any changes, no matter how small, have the potential to break your website. This includes adding new code, updating your theme, or even just changing the color of a button. Even experienced developers can make mistakes while editing the code, and those mistakes may only be discovered after the changes have been made.
Not having a backup copy of your original theme files can result in the loss of all your previous customizations, which can be a frustrating experience. By taking the time to back up your theme, you’re protecting yourself and ensuring that you have a safety net in case something goes wrong.
To back up your theme files, you can use a backup app such as BackupMaster, which automatically creates backups at regular intervals. One advantage of using a backup app is that you can restore specific theme assets without having to revert to a previous version of the entire theme. This feature can save you time and prevent the loss of any new changes you’ve made since the last backup.
Alternatively, you can manually download a copy of your theme using the built-in Shopify tool and save it to your computer or cloud storage.
- To download a theme on Shopify, go to your admin panel and click on Online Store, and then Themes.
- Locate the theme you want to download.
- Click on the … button to open the actions menu.
- Select Download theme file from the menu.
- The theme will be sent to the email associated with your staff login as a .zip file.
Conclusion
In this article, we’ve aimed to explain that even the slightest error in code can lead to unpredictable malfunctions of your website. Fortunately, there are many ways to detect and prevent such errors from destroying your site. As a backup service provider, we are committed to safeguarding your data. However, before resorting to backup as the last line of defense, there are also many other steps to be aware of. Take editing code seriously and employ all possible measures to ensure your customers’ experience and your income remain unaffected.