Shopify Theme Customization: What Can You Actually Change?
What you can change in a Shopify theme without code, what needs theme code, and what sits outside the theme entirely, plus how to customize without losing updates.
Quick answer
A Shopify theme can be customized at two levels. In the theme editor, without code, you can rearrange sections and blocks, change colours, fonts and spacing, edit content, create alternate templates and add app blocks. With theme code (Liquid, CSS and JavaScript), you can add new sections and blocks, change layouts, display metafields, add interactions and improve performance. Some things sit outside the theme: checkout's main steps (extensions on Plus), backend logic (apps and Functions), admin data and integrations. Customize in a copy, keep code changes isolated and documented, and you can still update the theme.
How Customization Fits the Cluster
This guide covers what you can change in an existing theme. If you're deciding whether to build a new theme, see Shopify theme development; if the requirement is functionality rather than presentation, see Shopify custom development.
Level 1: The Theme Editor
Online Store 2.0 themes use JSON templates made of sections and blocks, which is what makes so much editable without code.
| You can | Notes |
|---|---|
| Add, remove and reorder sections and blocks | Within what the theme's sections offer |
| Change colours, typography, spacing | Through theme settings; limited to the options provided |
| Edit text, images and video | Including header and footer section groups |
| Create alternate templates | Assign to specific products, collections or pages |
| Connect dynamic sources | Show metafield values in supported settings |
| Add app blocks and app embeds | Where the theme and app support them |
Level 2: Theme Code
When the editor's options run out, theme code extends the theme.
| Change | Typical approach |
|---|---|
| A new content module | New section or theme block with its own settings |
| Product details from metafields | Custom block rendering metafields or metaobjects |
| Layout the theme doesn't offer | Edited section or template, or a new one |
| Brand styling beyond settings | Custom CSS within the theme's structure |
| Interactions | JavaScript components, loaded efficiently |
| Performance improvements | Removing unused code, optimizing images and scripts |
Pro tip
Add rather than edit. New sections and snippets are easier to carry through theme updates than changes scattered through the theme's own files.
Level 3: Outside the Theme
Some requirements can't be met in a theme at all.
| Requirement | Where it's handled |
|---|---|
| Checkout branding | Checkout settings |
| Content or fields in checkout steps | Checkout UI extensions (main steps require Plus) |
| Discount, delivery or payment logic | Apps and Shopify Functions |
| New admin data | Metafield and metaobject definitions |
| Connections to other systems | Apps and custom apps |
| A different front end | Headless, e.g. Hydrogen |
Customizing Without Losing Updates
Theme developers release updates with fixes and new features. Editor changes generally carry over; code changes don't automatically. Keep custom code in clearly named sections and snippets, record every change, use version control, and when updating, install the new version as an unpublished theme, reapply customizations, test and publish.
Want your theme to do more without losing updates?
ZSpace Labs customizes Shopify themes with isolated, documented code your team can maintain.
A Safe Workflow
- Duplicate the live theme before editing
- Use Shopify CLI and GitHub for code changes
- Preview on real devices before publishing
- Test key paths: product, cart, search, checkout start
- Check Core Web Vitals after changes
- Document what was changed and why
Common Customization Requests
| Request | Level |
|---|---|
| Reorder homepage sections | Editor |
| Different layout for bundle products | Editor (alternate template), maybe code |
| Size chart on product pages | Code (metaobject + block) |
| Colour swatches on collection pages | Theme setting or code |
| Delivery estimate near add-to-cart | App block or code |
| Custom field in checkout shipping step | Checkout extension (Plus) |
| Tiered discount logic | App or Function |
Before You Customize
- Check whether a theme setting, alternate template or app block already does it
- Check whether the theme's newer version adds the feature
- Write down the change and why it's needed
- Decide whether the change belongs in a new section or snippet
- Estimate the effect on page weight
- Plan how the change will be carried through future theme updates
Performance and Accessibility
Customizations often slow themes down: extra sections, large images, app scripts on every page. Keep an eye on Core Web Vitals and test keyboard access and contrast after changes. See Shopify performance and Shopify store design.
When Customization Stops Being Enough
If most requests involve rewriting core templates rather than adding to them, or customizations have made the theme hard to update, it may be time for a custom theme or rebuild. See Shopify redesign vs rebuild.
Not sure which level your change needs?
Talk to ZSpace Labs about Shopify theme customization and store design.
Conclusion
Most brand and UX changes fit inside a theme: through the editor first, then isolated code. Checkout steps, business logic, data and integrations live outside it. Customize carefully, document everything and you keep both flexibility and updates. For the apps around your theme, see the Shopify apps worth installing.
Common questions.
In the theme editor you can add, remove and reorder sections and blocks, change colours, fonts and spacing through theme settings, edit content and images, create alternate templates for specific products or pages, and add app blocks and embeds.