Updating Your Shopify Theme

Once you’ve purchased one of our themes for Shopify, you are 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 that theme’s release notes found on our support page.

Why update?

While it can take a bit of time, updates can be well worth it. They can resolve critical bugs that currently affect your store; or there might be a handful of feature additions that will give your store a makeover (for free!).

Currently, there’s no way to automatically update your theme. Automatic updates would create a lot of broken apps and missing customizations. If you’d like a new version of the theme, you will need to upgrade it manually.

Here, 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 to 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. While it’s no silver bullet, it will make it easier to identify any custom code additions.

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.