Shopify Theme Customisation: Sections, Metafields, Liquid and Making Changes Without Breaking the Live Store

On this page

1. How Online Store 2.0 themes are built
2. Theme editor or code: who changes what
3. Metafields: same layout, different details
4. A small Liquid example
5. The duplicate-theme workflow
6. Theme updates and custom code
7. When to hire a developer
8. Quick check: before you change the theme
9. When to get help
10. FAQs

Most Shopify stores start on a theme that looks close to what the brand wants, then need it changed: a different product page layout, a size chart, care notes on every product, a banner that only appears on one collection. Some of those take two minutes in the theme editor. Others need code, and code changed carelessly on a live theme is how a store ends up with a broken cart on a sale weekend.

This guide explains how modern Shopify themes are put together, which changes you can safely make yourself and which need Liquid, and how to make code changes without touching what shoppers see. It is the same process I follow for Shopify theme customisation work. If the store isn't live yet, start with setting up a Shopify store in India and come back once the basics are in place.

How Online Store 2.0 themes are built

At the time of writing, current Shopify themes use the Online Store 2.0 structure. Four ideas cover most of it:

• Templates decide what a type of page contains: the product template, the collection template, the page template. You can create extra templates, such as a product template for gift hampers, and assign them to particular products.
• Sections are the building blocks a template is made from: a hero image, a featured collection, the main product area, an FAQ. On 2.0 themes they can be added, removed and reordered on almost every page, not only the home page.
• Blocks sit inside sections: a heading, a button, the price, the variant picker, a collapsible tab. Most sections let you add, hide and reorder their blocks.
• Theme settings apply store-wide: colours, fonts, logo, button styles and spacing. If you are choosing these from scratch, choosing website colours and fonts helps keep the palette and type sensible.

Apps can plug into this structure with app blocks and app embeds, which is why adding a reviews or WhatsApp app rarely means pasting code into theme files any more. Underneath, each template is a JSON file listing its sections and their settings, and each section is a Liquid file with a schema at the end that defines the settings and blocks the editor shows. Older vintage themes don't work this way, and much of what follows is harder on them.

Theme editor or code: who changes what

A useful rule: if the theme already has a setting for it, use the editor. If it doesn't, the change needs code, and that code should add a new setting so the next change of the same kind doesn't.

Change	Where it is made	Who usually does it
Swap a banner image or headline	Theme editor	Your team
Reorder or hide sections on the home page	Theme editor	Your team
A different layout for one product range	A new template, built in the editor	Your team, with a little guidance
Size chart or care notes on every product	Metafields, plus a block if the theme lacks one	A developer sets it up, then your team fills it in
A section the theme doesn't have	A new section file in Liquid, CSS and JavaScript	Developer
How the variant picker or cart drawer behaves	Theme code	Developer
Checkout appearance	Checkout settings; deeper changes depend on your plan	Check what your plan allows first

Avoid the middle ground of pasting snippets from forums into theme files. They often work at first, but they sit outside the editor, nobody remembers they are there, and they are among the first things to break when the theme is updated.

Metafields: same layout, different details

Metafields are extra fields attached to products, variants, collections, pages, customers or the shop itself. They solve a common problem: every product needs some detail the standard product form lacks, such as fabric, fit, care instructions, dispatch time, an HSN code or a downloadable size guide.

The workflow has three parts:

1. Create a metafield definition in the admin settings, choosing a type such as single-line text, rich text, file, number or a reference to another product.
2. Fill it in on each product, or in bulk through a CSV import or the bulk editor.
3. Connect it in the theme editor. Many 2.0 blocks let you choose a metafield as the source for their text or image through the dynamic source option.

Where no block fits, a few lines of Liquid display it, as in the example below. The point is that content lives in fields and layout lives in the theme, so a merchandiser can add care notes to fifty products without anyone opening the code editor. This also keeps descriptions focused on selling while specifications sit in a consistent place; writing product descriptions that sell covers how to split the two. Metaobjects extend the same idea to reusable entries, such as a set of size charts or designer profiles, each linked from many products.

A small Liquid example

Liquid is Shopify's template language. It reads store data, such as a product's title, price or metafields, and turns it into HTML. This short snippet shows a sale label when the compare-at price is higher than the current price, and a care-notes box only when that metafield has been filled in:

{% if product.compare_at_price > product.price %}
  <span class="badge-sale">On sale</span>
{% endif %}

{% if product.metafields.custom.care_notes != blank %}
  <div class="care-notes">
    <h3>Wash & care</h3>
    {{ product.metafields.custom.care_notes | metafield_tag }}
  </div>
{% endif %}

Three things are worth noticing. The if checks mean nothing appears on products without care notes, so there are no empty boxes. The custom.care_notes part is the metafield's namespace and key, which come from its definition in the admin. And the metafield_tag filter outputs the value as HTML suited to its type. In a real theme this code would live in a custom block or section with its own schema, so your team can position it in the editor instead of it being fixed in one spot.

The duplicate-theme workflow

The published theme is what shoppers see, so editing its code directly makes every mistake public the moment you save. The safer routine:

1. Duplicate the live theme from the themes page in the admin. The copy is unpublished and can be previewed through a share link.
2. Rename the copy with the date and purpose, such as "Size chart work, October", so nobody publishes the wrong one.
3. Make every change on the copy, either in the code editor or through a developer's local tools connected to that theme.
4. Test on a phone: products with and without variants, the cart, a filtered collection, and every page using a template you changed.
5. Carry over editor changes made to the live theme in the meantime. Section content and settings are saved per theme, so a banner your team swapped on the live theme last week won't be on the copy.
6. Publish the copy at a quiet time, and keep the previous theme in the library as an instant fallback.

Step five is the one people forget. Agree a short pause on editor changes while the work is underway, or keep a list of everything changed on the live theme.

Theme updates and custom code

Themes from the Theme Store receive updates with fixes and new features. At the time of writing, a theme whose code hasn't been edited can usually be updated with little effort, while a theme with code changes needs more care: the update arrives as a fresh version, and your changes have to be carried into it. Check Shopify's current help pages for how updates work on your theme.

That is no reason to avoid custom code, but it should shape how the code is written:

• Put new features in new section, block and snippet files rather than rewriting the theme's own files. New files carry across to an updated theme far more easily than edits scattered through existing ones.
• Keep custom styles in one clearly named stylesheet or the theme's custom CSS setting, not spread across many files.
• Keep a change log of which files were added or edited, and why. A few lines in a shared document save hours at update time.
• Use version control where the project justifies it. Shopify's GitHub integration, at the time of writing, can connect a theme to a repository so every change is tracked and reversible.

When a theme carries years of undocumented edits and every update feels risky, it can work out cheaper to start from a clean copy of the current version and rebuild the customisations properly. That is a judgement made after reading the code, not before.

Before choosing someone, read hiring a Shopify developer in India for the questions to ask, how access should work and the red flags to avoid.

Planning to switch themes altogether rather than edit the current one? Read how to change your Shopify theme without losing SEO first.

When to hire a developer

You don't need a developer to change images, text, colours or the order of sections; the editor exists for that. It's worth bringing one in when:

• you need a section, block or template the theme doesn't offer, and want it editable afterwards;
• a Figma design has to become a working theme rather than an approximation;
• product data across a large catalogue needs structuring with metafields and metaobjects;
• something behaves wrongly, such as the wrong price on a variant, a cart drawer that won't update or a layout that jumps on mobile;
• product structured data is missing a price, availability or brand (see schema markup explained);
• leftover app code is slowing the store down, as covered in why Shopify stores get slow;
• the theme needs updating and has been customised in code.

Whoever you hire, ask three questions: will they work on a duplicate theme, how will they document what they change, and will their sections be editable in the theme editor? Clear answers tell you most of what you need to know. If you are still weighing up platforms, WordPress vs Wix vs Shopify compares how much design control each one gives you.

Quick check: before you change the theme

1. In Shopify admin, open Online Store > Themes and duplicate the live theme.
2. Run the page through PageSpeed Insights (pagespeed.web.dev) and read the Mobile tab first on the homepage and a product page.
3. Preview the duplicate on a phone before publishing.

When to get help

Get help when changes need code, or when the theme is slow. Shopify development covers this kind of work, with a written scope before anything starts. You can also send the details through the contact form.

FAQs

Can I customise a Shopify theme without coding?

Largely, yes. On an Online Store 2.0 theme you can add, remove and reorder sections and blocks, create templates for different products and change colours and fonts in the editor. Code is only needed for things the theme has no setting for.

Will customising my theme stop it from updating?

Editor changes don't. Code changes mean updates need extra care, because your edits have to be carried into the new version. Keeping custom work in separate files with a change log keeps that manageable.

Should I buy a new theme or customise the one I have?

Customising is usually cheaper and less risky if your current theme is a 2.0 theme that still receives updates. A new theme makes sense when it is an older vintage theme or its code has been patched so often that changes keep breaking things.

What is a metafield in Shopify?

An extra field attached to a product, collection or other item, used for details like fabric, care notes or dispatch time. The theme displays it, so the content can change without anyone touching the layout.

Have you customised Shopify themes before?

Yes. A recent Shopify build for a fashion brand that is launching soon included theme setup and customisation, alongside products, payments, shipping and checkout. The client stays private until launch.