What steps should I take before modifying theme files? – Pixel Union

Each Pixel Union theme includes a wealth of features and settings. With these extents also come limitations, so merchants often modify theme files to achieve new enhancements.

The most reliable way to adjust theme files is to hire a vetted expert, but the next best approach would be to make the adjustment yourself. To safeguard your storefront while trying out adjustments, start with the latest version available, protect your work by creating backups, and track your changes.

Start with the latest version available

The most recent release of the theme would include optimal bug fixes and enhancements. Starting with the latest version provides a solid foundation for any custom adjustments.

Updating your theme

Protect your work by creating backups

Creating duplicates of your theme is always advised before making any changes to the theme files. Duplicates of the theme not only serve as references for the theme's default state but also as a complete backup for the adjusted theme. If errors are encountered, publish the previous theme or use it to copy the default code to the adjusted theme to restore function, styling, etc.

Duplicate your theme

In the (Online Store), click Actions
Select Duplicate
Rename the copied file

Track your changes

Record the adjustments you make to the theme files. This can be simple as a document file with dates and notes with a summary of a modification. Shared documents, like those available through Google Docs, are valuable for tracking changes when working in teams.

From our blog:

While keeping a written record of changes made to your theme may sound tedious, boring, or a waste of time, it can be a hugely valuable resource when you're retracing your steps

You can also record changes in the form of comments alongside your code changes. In liquid files leave informative notes for yourself and colleagues alongside the changes you make. Depending on the file type, add comments by framing text with certain characters so they remain visible only in the backend.

Recording the changes you make and the names of the adjusted files can be especially helpful when updating to the latest version without the premium features of the Theme Updater App

For CSS and JS files, such as the theme.css.liquid or theme.js.liquid, you can add two forward slashes (//) to the start of the note:

// Comment goes here

For HTML, such as the theme.liquid, you can place the text in the following format:

{% comment %} Comment goes here {% endcomment %}