Shopify theme customization has never been easier, and it’s still easy to get wrong. Most of what store owners ask me for, such as a new banner, a different product page layout or an extra block of text, can be done in the theme editor without touching code. The rest needs Liquid, Shopify’s template language, and that’s where live stores get broken. Below I explain how sections and blocks work, what the editor can and can’t do, when a change really needs code, and the habits that stop a live store from becoming a test site.
How a modern Shopify theme is put together
Every theme sold in the Shopify Theme Store today is built on Online Store 2.0. Older “vintage” themes aren’t sold there anymore, though plenty of stores still run one. A 2.0 theme has three layers:
- Templates. One for each page type: product, collection, page, blog post and so on. You can create alternate templates and assign them to individual products, collections or pages under Theme template in the admin. On a pre-sale clothing store I built, a separate product template let the pre-order items explain their timeline without changing any other product page.
- Sections. The large pieces of a page, such as an image banner, a featured collection or the main product information. Shopify allows up to 25 per template.
- Blocks. The smaller pieces inside a section: a heading, a price, a variant picker, a button. Newer themes, including Shopify’s free Horizon theme, use theme blocks that can sit inside other blocks, up to eight levels deep.
The header and footer work as section groups, so anything you add there, like an announcement bar, appears on every page. To check your theme, open the default product template in the editor. An Add section button under the section list means it’s a 2.0 theme. No button means a vintage theme, and most of this article applies only after you move to a newer one.
What the theme editor handles without code
Open it from Online Store, then Edit theme. The sidebar has three views that cover most everyday changes:
- Sections. Add, remove, hide and drag sections and blocks. When you’re unsure, hide rather than delete: a hidden section comes back with one click.
- Theme settings. Global colors or color schemes, fonts, page width, buttons, cart style and social links. Set them once instead of styling each section by hand.
- App embeds. Switches for apps that load store-wide, such as reviews, chat or tracking. Modern apps also offer app blocks, which you place inside sections like any other block.
Theme settings and most sections also have a Custom CSS field. At the time of writing, Shopify caps it at 1,500 characters for the theme and 500 per section: plenty for small style fixes, nowhere near enough for a redesign. Some themes add a Custom Liquid section or block, where a developer can paste a snippet without editing theme files.
There’s AI in the editor now too. Sidekick, Shopify’s assistant, applies changes you describe in plain words, and on Theme Store themes Add block followed by Generate writes a new block for you. Shopify warns that generated code may contain errors or miss accessibility and performance best practices, and its support team won’t troubleshoot it. I treat AI output like a junior developer’s first draft: useful, but checked before it goes near a live store.
When a change really needs code
The editor’s limits are the theme’s limits. If the theme developer didn’t build a setting for something, no amount of clicking will create it. These jobs need Liquid, CSS or JavaScript:
- A layout no section supports, such as a comparison table or a size guide built from product data.
- Showing information the theme doesn’t expose, like a metafield in a spot where no block accepts it.
- Logic, such as different content for certain products, tags or customer groups.
- Fixing a theme bug, or removing code an uninstalled app left behind.
- Speed work that changes how images, fonts or scripts load.
When code is the answer, I add it the least invasive way: a new section or block file rather than rewriting the theme’s own files, plus a log of every file I touched. One catch: you can’t edit a paid theme’s code until you’ve bought it, so don’t plan code changes during a trial. Careful custom work like this is a core part of my Shopify development service.
Safe habits for Shopify theme customization
Shopify has no staging site in the WordPress sense, but you can work as if it did. This is the staging-first routine I used on the Shopify stores I built and maintained for a UK agency’s clients from 2024 to 2026, and still use today.
Duplicate first, then edit the copy
In Online Store, open the menu next to your live theme and click Duplicate. Edit the copy, which appears under your draft themes, and publish it only when it’s right. At the time of writing (October 2026), Basic, Grow and Advanced stores can hold 20 themes and Plus stores 100, so clear out old copies now and then. Shopify’s guide to duplicating a theme shows the steps on desktop and mobile.
Preview before you publish
Preview the draft on a real phone, not just a narrow browser window. For sign-off, share a preview link: a visitor preview needs no login and expires after two days, while a merchant preview needs admin access, can reach the checkout and lasts 30 days.
Don’t edit the live theme directly
Editor changes go live the moment you click Save, and once you’ve saved, undo and redo are gone. Code edits are riskier. The code editor’s Timeline view restores an earlier version of one file at a time, but it can’t bring back a deleted file or roll back the whole theme, and its history is limited. A duplicate is your real backup.
Use version control for bigger projects
For ongoing development I connect the theme to GitHub with Shopify’s GitHub integration. It syncs both ways: commits to the connected branch update the theme, and admin edits are committed back, so every change has a history. Developers can also run shopify theme dev in Shopify CLI to preview local changes on a hidden development theme.
Theme updates, and how your changes survive them
When a Theme Store theme gets an update, Shopify adds the new version to your draft themes instead of replacing the live one. Editor work carries over: layouts, settings, new templates, app embeds and wording changes. Code edits carry over only if they don’t conflict with the update. If they do, Shopify tells you they couldn’t be included, and someone has to copy them across by hand.
That’s the best argument for doing as much as possible in the editor. Settings and blocks survive updates, while every code edit needs re-checking. Themes bought outside the Theme Store can’t use this update process at all. And when a theme has piled up so many code edits that updating isn’t practical, a clean rebuild is often cheaper in the long run, which is what my website redesign service covers.
Quick checklist
- Confirm a 2.0 theme: look for Add section on the product template.
- Duplicate the live theme before every change, however small.
- Use sections, blocks, theme settings and app blocks before code.
- Keep Custom CSS for small fixes.
- Review anything Sidekick or AI block generation writes.
- Put code in new section or block files, and log each file you change.
- Preview on a real phone before you publish.
- Apply theme updates as a draft, then re-check your code edits.
Related reading: Shopify Checkout Customization: What You Can Change in 2026 and How I Set Up Shopify Markets to Sell Internationally.
FAQ
Can I customize a Shopify theme without coding?
Yes, for most everyday changes. On a 2.0 theme you can add, move and hide sections and blocks on every page, change colors and fonts, and place app blocks. Code is only needed when the theme has no setting for what you want.
Will my customizations stop the theme from updating?
No. Editor changes carry over to updated versions. Code edits carry over only when they don’t conflict, so keep them few and documented.
Is it safe to use AI-generated blocks?
On a duplicate theme, with a review, yes. Shopify says generated code can contain errors and isn’t covered by its support, so test it on a phone and check speed before publishing.
How do I undo a change to my live theme?
Before saving, use undo in the editor. After saving, publish your backup copy, or restore single files from the code editor’s Timeline view. That’s why I duplicate first.
Planning changes to your theme and want a second opinion first? Get a free store review and I’ll tell you which changes the editor can handle and which ones need a developer.
