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: bug fixes, feature additions, 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 theme that supports sections (and you haven't made any changes to the templates) your theme will update automatically. These updates are triggered by Shopify whenever a new version of your theme is released.

Note: Major theme updates may still require you to update your theme manually. Contact us to get the latest version of your theme or "repurchase" it from the Shopify theme store (you will not be charged again).

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

Steps before updating

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

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

To duplicate your published theme, click the  more button (...) and select Duplicate. The duplicate theme will appear unpublished below, titled something like "Copy of Theme v1-0-0".

moreduplicateedit

Find the duplicate below and click the  more button (..) and select Edit HTML/CSS. 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.

buyupdate

Once you've found your theme, click  Buy theme. Again, you will not be charged. Make sure you're using are using 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...

Send an email to support@pixelunion.net and we'll send you the theme file (.zip) to upload. The file will be named something like  atlantic.v1.0.0.zip.

uploadTheme

Go to your Shopify admin dashboard and navigate to Online Store > Themes. Then click Upload theme in the top-right corner. Select the theme file from your computer and click Upload.

The theme will appear as unpublished on the  Themes page of your dashboard.

Update theme settings

Now we'll want to open the  Customize theme editor for both unpublished versions of the theme in separate windows.

Find the the new version on the  Themes page. Right-click the Customize theme button and select to open in a new window. Then click the Customize theme button for the duplicated old version of the theme.

sidebyside

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.

Screen Shot 2016-07-26 at 1.48.42 PM

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.-->

commentCode

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 then BLAMMO, you'll find yourself at the end of the document.

Reinstall apps

Any apps that add code to your theme's files will need to be reinstalled. 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.

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.