Blog Shopify fixes

Upgrading your Shopify theme without breaking your store

Old themes miss new features, but a careless upgrade drops customisations and breaks apps. A safe way to move to a modern theme, with the CLI commands and code to use.

Illustration for the post "Upgrading your Shopify theme without breaking your store"

Why upgrades go wrong

Merchants often report the same trouble after switching to a newer theme: custom code that no longer appears, apps that stop working, and layouts that break. It happens because customisations were typed straight into theme files, and apps sometimes inject their code into those files as well, so a fresh theme starts without any of it.

Step 1: make an inventory

List every customisation and every app that touches the storefront: custom sections, edited product templates, added scripts, and any code an app left behind. This list is your checklist for the new theme, and it often shows things you can drop.

To find what has been added by hand, download the theme and compare it with a fresh copy of the same version. Shopify’s command line tool makes this quick.

Download your live theme to compare and back up bash 
npm install -g @shopify/cli@latest
shopify theme list
shopify theme pull --live

Step 2: never edit the live theme

Duplicate your current theme and work on the copy, or install the new theme unpublished and preview it. Your live store stays untouched until everything has been checked, and the old theme stays available as an instant way back.

Push the new theme as an unpublished copy and preview it locally bash 
# Upload as a new, unpublished theme
shopify theme push --unpublished --theme "Upgrade test"

# Preview with hot reload at http://127.0.0.1:9292
shopify theme dev

# Catch Liquid and performance mistakes before they go live
shopify theme check

Step 3: prefer app blocks and sections to pasted code

Modern themes let apps and content be added as blocks in the theme editor, with no edits to code. Where an app offers an app block, use it. Where a customisation was pasted into a template, rebuild it as a section, so it moves cleanly with any future theme.

If you build your own section, allow app blocks in its schema so apps can slot in without touching the code.

sections/product-info.liquid: let apps add blocks liquid 
{% schema %}
{
  "name": "Product info",
  "blocks": [
    { "type": "@app" }
  ]
}
{% endschema %}

Step 4: keep your changes under version control

Shopify can connect a theme to a GitHub repository, so every change is recorded and can be reverted. That is what makes later updates a matter of merging changes instead of starting again.

Step 5: test, then publish

On the preview, check the home page, a collection, a product with variants, the cart and a full test order on both a phone and a laptop. Confirm your apps and tracking work, then publish at a quiet time and keep the old theme for a couple of weeks.

Common questions

Will I lose my content if I change my Shopify theme?

Products, collections, pages and blog posts are stored in Shopify, not in the theme, so they stay. What can be lost are theme settings, custom sections and code added to the old theme, which is why you list and rebuild them first.

Do my apps work with a new theme?

Apps that use app blocks do. Apps that inserted code into the old theme files need to be reinstalled or reconnected on the new theme, and some older apps are not compatible with newer themes.

How do I test a new Shopify theme without going live?

Upload it as an unpublished theme and use the preview link or shopify theme dev. Visitors keep seeing the live theme until you choose to publish the new one.

Sources

Have a project in mind? I reply within a day or two.

Start a project Shopify development

Keep reading