How to update your Shopify theme

Once you've purchased a Pixel Union Shopify theme, you're entitled to free updated versions of that theme for life. We occasionally release new versions of themes for a few reasons, including bug fixes, new features, platform requirements, or complete theme overhauls. You can view recent changes made to a theme in the release notes for your theme linked from our support page.

If you use a version of a theme that does not support homepage sections (or if you've made changes to the files) you will need to update your theme manually. Below we'll walk you through the process of updating to a new version while still retaining your current customizations and settings.

Steps to take before updating

Before setting up the new theme version, there are a few things you'll want to have close at hand:

• Your featured and logo images in a local folder
• Any relevant app documentation
• A duplicate of your old theme

To duplicate your published theme, click the Actions drop-down next to Current theme (accessed from Online Store>Themes in your Shopify admin). Select the Duplicate option. The duplicate theme will appear unpublished below, titled something like "Copy of Theme v1-0-0".

Find the duplicate below and click the Actions dropdown next to it. Select Edit code. Keep this window open for later reference.

Download the new theme file

If you bought the theme from the Shopify store...

You can download an updated version at no charge from the Shopify theme store.

Once you've found your theme, click  Add latest theme version. Again, you will not actually be charged. Double check to make sure that you're logged into the same Shopify account as when you first purchased the theme.

The theme will be added to the  Themes page of your Shopify admin.

If you bought the theme from pixelunion.net...

Install the free Theme Updater App into your Shopify store to easily update your theme! For more details, check out the Shopify Theme Updater App FAQ. The app will install the latest theme as an unpublished theme on the Themes page of your dashboard. It will try to carry over as much customization that you might have done! 

Update theme settings

Now you'll want to open the theme editor for both unpublished versions of the theme in separate windows (to do this, right click the Customize link next to each theme).

By placing them side-by-side in separate windows, you can go section by section and match the settings. You'll need to upload feature, logo, and other images.

To match color settings, click on the swatch. In the bottom right of the popup modal, you'll see a six-value code. Copy this code and paste it into the corresponding color field in the new version.

As you go through, you can familiarize yourself with and set up any new features and settings.

Migrate custom code

Next, you'll need to migrate any custom code added to your Liquid files. Ideally, custom code will be documented so you can easily find it. However, if this is not case, you can use the file comparison tool  Diffchecker to help you remember where you've added custom code.

Compare Files

Follow the link to Diffchecker. Copy and paste the liquid file that you believe had custom code added to it into the Original Text field. Then copy and paste the corresponding file of the new version into the Changed Text field. Click Find Difference.

In the  Original Text field, any code that does not appear in the Changed Text field will be highlighted in red (this will include changes we've made to the theme, but of course you only need worry about copying over custom code additions you've made). 

Prepare for future updates

For any custom code carried over or future additions made, we recommend adding a comment that is easily searchable. That way, you can search and locate any custom code quickly when making updates. Comments will not affect the code. Simply add <!-- and --> on either side of your comment, like so: <!-- This is a comment. Custom code.-->

You may want to be more specific in your comment: add a description of the functionality, a date, an author, and so on.

If you're adding code to the style.scss.liquid file, we recommend inserting it at the bottom of the page (the order doesn't matter!). That way, it's all in one place.

Pro tip: When on the style.scss.liquid page (or anywhere, really), press command-↓ (on a Mac) and BLAMMO, you'll find yourself at the end of the document.

Reinstall apps

Any apps that add code to your theme's files may need to be reinstalled, depending on the app developer. You'll need to find the app documentation to follow the installation instructions. If you're unsure how, you can go to Apps and click View details to find the support email for that Shopify app. Please note that our theme support team do not support third party apps.

Publish

One you've migrated all your settings and custom code, you're set to go. Hit  Publish on the new version of the theme.