How do I customize my theme safely without risking updates breaking those changes?

Shopify Discussion
1

Hi,

I am Kamal Hinduja based Geneva, Switzerland(Swiss). Can anyone explain How do I customize my theme safely without risking updates breaking those changes?

Thanks

2

Hello @kamal123 ,

I hope you are doing well!

Can you please confirm what would you like to change? It depends on the requirements you have but to customize the theme, Go to Online store >> Themes >> Customize

image
image1919×782 64.4 KB

But I recommend you to take a backup and customize on that theme, to take a backup, go to Online store >> Themes >> Menu >> Click on Duplicate

image
image1915×833 168 KB

And customize on new theme

image
image1862×855 113 KB

3

Just never go to ... → Edit code :slight_smile:

Seriously, whatever you do in Customize will stay through your theme updates.

There are 4 main tools:

  1. “Custom CSS” in “Theme settings”. This CSS code will be output as is and will apply on every page of your store.
  2. “Custom CSS” in section settings. This CSS code will be modified to scope it to apply only to elements inside this section (this will also raise it’s priority).

“Custom CSS” may be picky about code you paste there. It does not tolerate, say page-width or content which limits your options a bit.

Also, CSS mostly responsible for the way how your site looks (and paritally, interacts), you can’t really add more information this way.

  1. “Custom liquid” blocks/sections – this is your legal tool for fetching data and adding content. Basically, you can add there whatever you may be adding into the theme code. Can process Liquid code, add Javascript snippets and add more CSS (this time, unconstrained). You can use Javascript to manipulate everything on the page, extend theme JS code, listen to JS events and react to them, load fonts and so on.

NB! You can put your “Custom liquid” inside Header/Footer groups and inside “Template” part of your page. Header/Footer are the same for all pages, so code you add there will run on all pages. Template area – code added there will only run for this specific template, say, only on product pages, only on homepage, etc.

  1. Finally – AI generated blocks. Funny enough, those will also survive theme updates. If you can force the system to generate something nice and robust, then you can use theme. NB from above applies to AI-generated blocks too.

Keep in mind that after you save newly generated block, its code is available under blocks/ path in your theme code, so you should be able to read it and correct your prompt or add some “Custom CSS”/“Custom liquid” to enhance it.

Also – apps. While some apps modify theme code and break its ability to update, most modern apps behave. Unfortunately, you can’t tell which apps are which.
Generally, Apps tend to negatively effect page speed, but some things can’t be done in theme code. Say, “Wishlist” (proper, which will work on multiple devices), “Back in stock” and “Instagram feed” are some of the things which require apps.

Some apps which edit theme code provide their own tools to assist with theme updates.

4

The replies cover the main approaches well. One thing worth adding: Shopify’s update mechanism only overwrites files the theme developer ships. Any changes you make in the Customize editor - sections, blocks, settings - are stored in your theme’s JSON templates and survive updates cleanly.

Where it gets tricky is Liquid and JavaScript files. If you edit something like product.liquid or theme.js directly, an update will overwrite your changes. The clean alternative is to add a custom snippet or app block and include it through the editor, rather than hardcoding it into the base files.

If you need code edits that go beyond what the editor allows, keep a separate duplicate theme as a reference so you can diff what changed after an update and reapply your modifications.

5

Hello @kamal123

The safest way is always to duplicate your theme and work on the copy. Make your changes primarily in the theme editor and sections rather than changing core theme files directly, as those are the ones most likely to be overwritten by updates.
Retain your custom code separated in snippets or sections so if you ever need to reapply them it will be much easier. When updating a theme, try out the update on a duplicated version and see the differences. If you are so inclined, Shopify CLI version control also lets you track edits and roll back quickly should you break anything.