There are four ways to change a Shopify theme, and I use all of them, often on the same project:

  1. The theme editor: click and drag, no code. This part.
  2. The code editor in the Shopify admin: edit Liquid, CSS and JavaScript in the browser. Part 2.
  3. Shopify CLI: work on your own computer with a live preview. Part 3.
  4. GitHub: every change versioned, reviewed and synced both ways. Part 4.

They are not alternatives so much as layers. Even on stores where every line of code goes through Git, the merchant still changes banners and texts in the theme editor every week.

Step 1: duplicate the theme first

Before any change you are not sure about, make a copy. It costs ten seconds and it is the only real undo button for a whole theme:

  1. In the Shopify admin, go to Online Store.
  2. On the theme you want to copy, open the actions menu (the ··· button) and click Duplicate.
  3. The copy appears in your theme library as Copy of plus the original name.

Work on the copy, preview it, and publish it only when you are happy. The live store never shows a half-finished change.

Step 2: open the theme editor

Go to Online Store and click Customize on the theme. The editor shows your store in a preview window, with three things worth knowing:

  • The page selector at the top switches between templates: home page, product pages, collections, the cart and so on. Changes apply to the template, so editing one product page changes every product that uses it.
  • The sidebar lists the sections on that page. Sections can be added, reordered, hidden and removed, and most contain blocks you can add and reorder inside them.
  • Theme settings hold what is global: colours, typography, buttons, the cart style, social links.

Nothing is visible to customers until you click Save, and on a duplicated theme not even then.

What the editor actually changes

This is the part most people never see. The theme editor does not store your changes somewhere separate. It writes them into the theme's own files:

  • templates/*.json files describe which sections a page has, in which order and with which settings.
  • config/settings_data.json holds the values of the theme settings.

That matters the moment a developer starts working on the code. If they upload an old copy of those files, your edits from last week are gone. Parts 3 and 4 show how to avoid exactly that.

When the editor is not enough

The editor can only arrange what the theme already offers. Texts, images, colours, the order of sections and which blocks appear are all editor work. A new kind of section, a different product page layout or a feature the theme does not have needs code.

A well-built theme pushes that line as far as possible. On the Sprüngli product page, information tabs hide themselves when a product has no data for them, and on Curaprox blocks remove themselves when their content is empty. The merchant never has to remember to switch anything off. That is the standard I aim for: the editor should be enough for everything a store does every week.

Quick checklist

  • Duplicate before experimenting; publish the copy when it is ready.
  • Check the change on mobile with the device toggle in the editor.
  • Remember that a template change applies to every page using that template.
  • Tell your developer when you have changed things in the editor, so nobody overwrites them.

Next: part 2, the code editor, for the first step into Liquid without installing anything.

Further reading