How Do I Customize My Theme Safely?

Shopify themes from Out of the Sandbox already come packed with tons of great features that are easy to configure using the built-in configuration panel — but a time may come when you'd like to add in a customization that is outside of the theme's default features and settings. 

A Few Notes to Consider before Customizing

These types of customizations require knowledge of HTML, CSS, JavaScript, and Shopify’s templating language, Liquid. Modifying your theme's code also requires knowledge of coding principles in general, so be sure you’re comfortable with those areas before attempting any.

If you are not familiar with code, we recommend hiring a Shopify Expert to help customize the theme.

It’s worth noting that, before you start any advanced customizations, it's best to consider the pros and cons of making these types of changes. How vital is the change you are thinking about making? Also, consider if there’s a way to accomplish the adjustment using one of the theme’s built-in settings in a way that doesn’t require code wrangling.

These questions are all worth weighing since, even with the tips contained in this document, there are always downsides to modifying code.

Note: Always make sure you have a backup of your theme files that you know works so you can revert to that if needed. In order to have a backup, create a duplicate copy of your theme first. You can do this by clicking 'Customize' > 'Duplicate'.

Customizations and Updating your Theme

Most theme publishers, including Out of the Sandbox, provide regular theme updates to add new features, support compatibility of new Web technologies, or fix bugs that are discovered, so keeping your theme up-to-date certainly has its advantages.

When updating your theme with our Theme Updater, the app may be able to carry over basic customizations that you or your developer have made directly to the theme code.

If any error messages are received when updating your theme to the latest version, all customizations to the mentioned files will need to be carried forward manually. 

Carrying customizations over manually

If you receive an error message from the Theme Updater App when updating your theme that states some files need to have their customizations brought over manually, it may be very helpful to take a look at a diffchecker. A Diffchecker is a tool to compare text differences between two text files.

Here, you can enter the code of the default file with the code of your file that has all of the customizations in it. When you click 'Find Difference' you will then be able to see the differences between the two files so it will be easier to tell what code you will need to manually add back in.

If you need assistance with carrying over your previous customizations, we'd recommend reaching out to your developer or hiring a Shopify Expert. 

Log Changes

As upgrades may still require some manual updating, we recommend maintaining a list of every custom CSS and template file modification a theme uses along with the filenames and line location where the include tags need to be added.

Although the line numbers may vary slightly when a theme is updated, at least you’ll have a good idea of where to start looking.