Shopify Theme Development: Custom Sections, Templates and Clean Liquid
Our Shopify theme development service is for stores that need more from their theme than the settings panel allows: new sections, templates driven by your product data, a theme rebuilt from a custom design, or an old theme brought up to Online Store 2.0. We write clean, documented Liquid, keep every change in version control, and build on an unpublished theme so your live store is never at risk.
Theme work is one part of our end-to-end Shopify build service, and it is also available as a standalone project for stores that are already trading.
What theme development means on Shopify
Shopify theme development is writing and customising the code that renders your storefront: Liquid templates, JSON templates, sections, blocks, snippets, CSS, JavaScript and theme settings. A well-built theme gives your team control in the theme editor, pulls content from your product data, loads quickly, and can be changed safely over time.
It covers the storefront only. Features that need back-end logic, such as custom discounts, checkout extensions or a custom app, are custom development, and we cover the boundary between the two below.
Signs your theme is holding the store back
- Every new page layout needs a developer because the theme has no suitable sections.
- Product specs, size charts or ingredients are pasted into each description because the template cannot read metafields.
- The theme was edited directly in the code editor over several years, and nobody knows which files are safe to change.
- You are still on a vintage theme, so apps cannot add app blocks and templates cannot be edited in the theme editor.
- Theme updates from the developer are skipped because they would overwrite your customisations.
- Mobile pages are slow, and much of the weight comes from theme scripts and leftover app code.
What we build
Custom sections and blocks
We build sections your team can add, reorder and configure in the theme editor: comparison tables, lookbooks, shop-the-look grids, ingredient or material breakdowns, store locators, feature callouts and anything else your design needs. Each section gets sensible settings, blocks where content repeats, and presets so it appears ready to use. Where the theme architecture supports it, we use theme blocks that can be reused across several sections instead of duplicating code.
JSON templates and alternate templates
Online Store 2.0 uses JSON templates, so one theme can hold several layouts for the same page type. We create alternate product, collection and page templates, for example a bundle product template or a lookbook collection template, and assign them in the admin without extra code.
Metafield and metaobject-driven templates
Structured product data should live in metafields and metaobjects, not in description HTML. We define the fields, connect them to sections through dynamic sources, and build templates that show specs, size guides, care instructions, compatibility or designer profiles automatically. For larger catalogues this is where theme work saves the most admin time.
Theme settings and section groups
Colours, typography, spacing, buttons and cart behaviour are set up as global theme settings. Headers, footers and announcement bars are built as section groups so your team can edit them from the theme editor like any other section.
App compatibility
Modern Shopify apps insert their features through theme app extensions as app blocks and app embeds. We make sure custom sections accept app blocks where needed, remove leftover code from uninstalled apps, and replace old script injections with supported methods where the app offers them.
Vintage theme upgrades
If your store runs on a vintage theme, we move it to Online Store 2.0 by rebuilding templates as JSON, turning hard-coded layouts into sections, and carrying over your customisations. The alternative, moving to a new theme, is sometimes cheaper, and we will tell you which route makes sense.
Build a custom theme or extend an existing one
| Approach | What we do | Suits | Watch for |
|---|---|---|---|
| Configure a ready-made theme | Set up settings, templates and content, no custom code | Stores that need to launch quickly | Limited to the theme's sections |
| Extend a ready-made theme | Add custom sections, templates and styling on top of a good Online Store 2.0 base | Most growing stores | Custom code must be merged carefully when the theme updates |
| Build a custom theme | Build the whole theme from a custom design, section by section | Brands with a distinctive design or complex content model | Higher cost; you own all future maintenance |
For many stores, extending a well-built theme is the best value. If you do not have a base theme yet, our fixed-price theme marketplace is a practical starting point. When the brief starts with a blank page, our store design team produces the Figma section library we build from.
How we write theme code
Performance-minded Liquid
We keep render cost down by avoiding nested loops over large collections, using the image_url and image_tag filters for responsive images with correct sizes, lazy-loading anything below the fold, and loading JavaScript only on the templates that need it. Deeper Core Web Vitals work, including app script audits and third-party tags, belongs to our speed optimisation specialists, and theme code we write is ready for that work.
Search-safe markup
Templates use one H1 per page, semantic heading order, and structured data output from Liquid for products and collections. Crawl, canonical and indexation rules sit with our technical SEO for Shopify work, and we coordinate so theme changes never break them.
Accessible, documented code
Sections use semantic HTML, keyboard-accessible menus and drawers, and visible focus states. Every custom section is documented with its purpose, settings and any metafields it depends on, so another developer can pick it up.
Version control and release workflow
We develop with Shopify CLI, running a local preview against your store data and checking code with Theme Check before anything is pushed. Your theme is connected to a GitHub repository through Shopify's GitHub integration, so every change is tracked, reviewed and reversible. Work happens on a development branch connected to an unpublished theme, and you approve changes on a preview link.
When the base theme releases an update, we merge it on a branch, resolve conflicts with your custom code, test, and only then publish. That keeps you on a supported theme instead of freezing on an old version.
Theme QA before anything goes live
| Area | What we check |
|---|---|
| Templates | Every product, collection, page, blog, cart, search and account template with real data |
| Edge cases | Sold out, on sale, single image, many variants, long titles, empty collections |
| Devices | Current iOS and Android browsers, desktop Chrome, Safari, Firefox and Edge |
| Theme editor | Every section setting and block behaves as documented |
| Apps | App blocks and embeds render correctly in custom sections |
| Markets | Currency, language and translated content display correctly |
| Performance | Lighthouse and PageSpeed Insights checks on key templates before and after changes |
Problems we fix in existing themes
| Problem | Cause | Fix | What it moves |
|---|---|---|---|
| Team cannot build pages without a developer | Theme lacks flexible sections | Custom section library with presets | Time to launch new pages |
| Product info inconsistent across products | Specs pasted into descriptions | Metafield-driven blocks with dynamic sources | Admin time, data accuracy |
| Theme updates never applied | Customisations made in the live theme without version control | Git-based workflow and a merge routine | Access to theme fixes and features |
| Heavy pages on mobile | Unused scripts, oversized images, leftover app code | Code clean-up and responsive images | LCP, INP, mobile conversion |
How a theme project runs
1. Audit and baseline
We review your current theme code, installed apps, customisations and edit history, and record Lighthouse scores and template load times. The written audit lists what is worth keeping, what should be rebuilt, and what is risky to touch.
2. Strategy and scope
We agree the sections, templates and settings to build, whether to extend your theme or start fresh, and how updates will be handled. The fixed scope and fee are signed off before development starts.
3. Build and fix
Code is written on a development branch connected to an unpublished copy of your theme. You preview each section and template with your own products and approve them before release.
4. Launch and track
The approved theme is published at a quiet trading time, and we watch for errors, app conflicts and performance changes afterwards. Documentation and the repository are handed over with the theme.
Outcomes the work can influence
- Time your team needs to publish a new page or campaign.
- Mobile LCP and INP on product and collection templates.
- Consistency and accuracy of product information.
- Number of developer requests for routine content changes.
- Ability to apply theme updates without losing customisations.
Campaign pages built from these sections can then be tailored by our landing page designers for paid traffic.
When theme development is the right service
- Your design needs layouts the current theme cannot produce.
- Your catalogue has structured data that should be shown by the template, not typed into descriptions.
- You want your theme under version control with a safe release process.
- You are on a vintage theme and need Online Store 2.0 features.
If the store is live and you want a complete change of design and structure, the redesign service for live stores wraps theme work in URL, redirect and ranking protection. If you need logic beyond the storefront, such as a custom app, Functions or checkout UI extensions, see our custom Shopify app and Functions work.
How pricing works
Theme projects are quoted as a fixed fee after a discovery call and a look at your theme code. Price depends on the number of sections and templates, whether we extend a theme or build from scratch, data modelling in metafields, and the state of the existing code. See how our pricing works, or ask for a theme development quote.
Frequently asked questions
It is a fixed project fee. Small section builds cost far less than a full custom theme, and the main drivers are the number of sections and templates, metafield modelling and how much existing code needs untangling. You get a written quote after we review your theme.
Most stores get the best value from a well-built ready-made theme extended with custom sections. A fully custom theme makes sense when your design or content model is distinctive enough that no theme fits without heavy rework.
Yes. We keep your customisations in version control and merge base theme updates on a branch, resolving conflicts before publishing. That way you keep receiving fixes from the theme developer.
Yes. Every section we build has settings, blocks and presets so your team can add, reorder and edit it in the theme editor like any built-in section.
Yes. We either rebuild your current theme with JSON templates and sections or move you to a new Online Store 2.0 theme with your customisations carried over. The audit tells you which is cheaper for your store.
No. All development happens on an unpublished theme connected to a Git branch. You review changes on a preview link, and nothing is published without your approval.
Related services
- Shopify store design and Figma prototypesthe design stage that produces the section library we code.
- Custom apps, Shopify Functions and checkout extensionsfor features that go beyond the theme.
- Core Web Vitals and speed workdeeper performance fixes across apps and third-party scripts.
- Crawl, canonical and structured data fixeskeeps search rules intact through theme changes.
Talk to a Shopify theme developer
Share your store URL and what the theme needs to do. We will review the code, recommend whether to extend or rebuild, and send a fixed scope in writing. Talk to a Shopify theme developer.