engineering//2 min read
Shopify: customise the theme, build an app, or go headless?
Most Shopify stores need far less custom engineering than they think, and a few need much more. How to tell which of the three paths fits what you are trying to change.
In short
- Start with the theme: Online Store 2.0 sections and blocks cover most design and merchandising needs.
- Build an app when you need new business logic or data, not just a new look.
- Go headless only when the storefront experience is the product and you can run a front-end team.
- Checkout is the most locked-down part of Shopify; check what is possible on your plan before designing around it.
Shopify gives you three levels of control, each with more freedom and more to maintain. Picking the lowest level that does the job is usually the fastest path to launch and the cheapest to run.
Level 1: theme customisation
Shopify themes are written in Liquid, Shopify's template language. Online Store 2.0 themes are built from sections and blocks that merchants can add, reorder and configure in the theme editor without touching code. Most branding, layout and merchandising changes belong here.
{% comment %} sections/feature-row.liquid {% endcomment %}
<section class="feature-row">
{% for block in section.blocks %}
<div class="feature" {{ block.shopify_attributes }}>
<h3>{{ block.settings.title }}</h3>
<p>{{ block.settings.text }}</p>
</div>
{% endfor %}
</section>
{% schema %}
{
"name": "Feature row",
"blocks": [{
"type": "feature",
"name": "Feature",
"settings": [
{ "type": "text", "id": "title", "label": "Title" },
{ "type": "textarea", "id": "text", "label": "Text" }
]
}],
"presets": [{ "name": "Feature row" }]
}
{% endschema %}Use metafields and metaobjects for structured content such as size guides, ingredients or specifications, so the data lives in Shopify and the theme simply displays it.
Level 2: a custom app
When the change is about logic or data rather than presentation, build an app. Apps use Shopify's APIs and webhooks to sync inventory with a warehouse, apply wholesale pricing rules, generate custom documents, or connect an ERP. Theme app extensions let an app add blocks to the storefront without editing theme code, so theme updates do not break it.
Level 3: headless commerce
In a headless build, Shopify handles products, cart, checkout and orders, and a separate front end, often built with Shopify's Hydrogen framework or Next.js, uses the Storefront API to render the store.
- Worth it when the shopping experience is highly custom (configurators, rich content, app-like flows), or the store shares a front end with other products.
- Costs: a second application to host and maintain, theme-editor features to replace, and some apps that assume a Liquid theme will not work.
You want to change | Usually the right level |
|---|---|
Look, layout, landing pages | Theme |
Product information structure | Theme with metafields and metaobjects |
Pricing rules, syncing, back-office automation | App |
Storefront blocks added by your own tool | App with a theme app extension |
The whole shopping experience | Headless |
About checkout
Checkout is the most controlled part of Shopify, for good reason: it handles payments. Customisation happens through checkout extensibility rather than editing templates, and the depth available depends on your plan, with the most control on Shopify Plus. Confirm what your plan allows before a design depends on a checkout change.
Change the theme for how it looks, build an app for how it works, and go headless only when the storefront itself is the product.
