Shopify theme development services build, customize or rebuild the Liquid theme that controls how your store looks and performs. A good provider works with Shopify’s theme architecture, tests speed against Core Web Vitals, and hands over code you can maintain. Judge them on process, performance practice and handover, not just screenshots.
Key takeaways
- A theme is built from a layout file, templates, sections, blocks and snippets, plus config, locale and asset files. A provider should be fluent in all of them.
- Shopify’s own performance guidance puts server-side Liquid, the LCP image and JavaScript at the top of the list. Ask how a provider handles each.
- To enter the Shopify Theme Store, a theme must score an average Lighthouse performance of at least 60 across the home, product and collection pages. That’s a floor, not a goal.
- Good agencies use Shopify CLI, development themes, version control and Theme Check, so changes are reviewable and repeatable.
- Rollouts can’t carry Liquid template changes, so your release process still matters.
- Shopify’s redesigned Partner Directory, announced on 9 November 2026, validates partner profiles with Shopify data. It’s a useful check, but not a substitute for asking for references.
- Ask for a written scope, a performance target, a staging link and a handover.
What do Shopify theme development services include?
Shopify theme development services cover the design-to-code work that turns your brand into a working storefront. That can mean building a new theme, customizing an existing one, migrating an older theme to the current architecture, or adding features such as custom sections, product page layouts and filtering.
Shopify describes a theme as the thing that controls the organization, features and style of a merchant’s online store. The code sits in a standard directory structure, and Shopify says themes must use it. Knowing that structure helps you read a quote, because each folder maps to a type of work.
| Folder | What it holds | Typical work |
|---|---|---|
| layout | The base files that host repeated elements like the head, header and footer. A theme.liquid file must exist here. | Global markup, analytics tags, section groups |
| templates | Files that control what’s rendered on each page type | Product, collection, page, blog and cart layouts |
| sections | Reusable modules merchants can add, remove and reorder, plus section groups | Hero banners, feature rows, product grids |
| blocks | Reusable modules that live inside sections | Buttons, icons, text items |
| snippets | Reusable pieces of Liquid code that merchants can’t see in the theme editor | Product cards, price displays, icons |
| assets | Images, CSS and JavaScript | Styling, scripts, fonts |
| config | JSON files that define theme settings and store their values | Colors, typography, global options |
| locales | Translation files | Multi-language stores |
Only a layout directory containing a theme.liquid file is required for a theme to be uploaded. Subdirectories other than the listed ones aren’t supported.
In practice, a theme development service usually bundles several of these jobs:
- Custom theme build. A new theme made for your brand and catalog.
- Theme customization. Changes to an existing theme, such as new sections, layouts and features.
- Performance work. Cleaning up Liquid, images, scripts and fonts to improve Core Web Vitals.
- Migration to the current architecture. Moving an older theme so merchants can add and remove sections on any template.
- App block integration. Making sure the theme is ready for apps that insert content through blocks.
- Handover and training. Documentation and a walkthrough, so your team can keep editing.
Some providers also build the checkout and account experience, but those are separate surfaces from the theme, so ask what’s in scope.
How is a theme different from the rest of your Shopify build?
A theme controls the storefront presentation. Apps, checkout and back-office workflows live elsewhere. Mixing them up leads to quotes that don’t match what you need.
Shopify’s documentation splits storefront work into themes and custom storefronts. Themes use Liquid, HTML, CSS, JavaScript and JSON. If the online store features don’t meet your needs, Shopify says you can use developer tools to build a custom storefront instead. That’s a different build with different costs and trade-offs. If you’re weighing that path, our guide to Shopify Hydrogen vs traditional themes explains the difference.
Our broader Shopify development services guide covers apps, integrations and custom builds. This post stays focused on the theme layer.
What should a good theme developer know?
A strong theme developer knows Liquid, the theme architecture and Shopify’s performance guidance, and uses a professional workflow. Here’s what to look for, using Shopify’s own docs as the benchmark.
Theme architecture and Liquid
JSON templates act as a wrapper for sections, while Liquid templates contain code. Section groups let merchants add, remove and reorder sections in areas like the header and footer. Blocks sit inside sections. Snippets hold reusable code and are invisible in the theme editor.
A developer should explain how they’ll split your page designs into sections and blocks, and how granular to make each component. Shopify’s best-practice pages discuss that trade-off. Too coarse, and merchants can’t change much. Too fine, and the editor becomes a maze.
Config files use JSON with comments and trailing commas in some places. Files that users typically edit, such as templates JSON, section groups, settings data and locale files, don’t persist comments. If a developer parses theme files through the API, they need a parser that supports comments. That’s a small detail, but it shows whether someone has read the docs.
Guiding principles
Shopify lists several principles for theme development. We’ve shortened them here.
| Principle | What it means |
|---|---|
| Be performant | Minimize JavaScript and rely on modern, native browser features |
| Be purpose-built | Optimize the layout and feature set for a specific merchant or segment |
| Offer best-in-class UX | Put the customer first |
| Be mobile first | Most store traffic is on mobile, so design for it throughout |
| Be accessible | Build accessibility in from the start |
| Make customization simple | Give merchants simple, intuitive options |
These apply whether you’re building for a single merchant or for the Theme Store. If a quote doesn’t mention mobile, performance or accessibility, ask why.
Tooling
Good teams don’t edit live themes by hand. Shopify CLI helps with a development workflow. It can create development themes, hot reload CSS and section changes, push and publish themes from the command line, work across environments and run Theme Check.
Development themes are temporary, hidden themes connected to your store. They don’t count toward your theme limit and are deleted from the store after seven days of inactivity. Shopify also notes that a development theme is deleted when you run the logout command, and that for a preview link that survives, you should push it to an unpublished theme.
Environments let developers switch between stores or deploy to development, staging and production instances of a theme with a single flag. CLI can also run in a CI/CD pipeline. A .shopifyignore file lets developers exclude files from CLI operations.
Shopify also offers a GitHub integration for managing theme code from the admin, and Theme Check, which catches errors and enforces best practices as you code. Its performance checks flag things like oversized bundles, parser-blocking scripts and remote assets.
Ask which of these a provider uses. “We edit in the code editor on the live theme” is a red flag.
How should a provider handle theme performance?
A provider should treat performance as part of the build, not a cleanup job at the end. Shopify’s performance guidance names the practices with the biggest effect, and you can use them as a checklist when you interview agencies.
Shopify says performance directly influences conversion rates, repeat business and search engine rankings. For the Theme Store, Shopify tests each theme on a benchmark store and requires a minimum average Lighthouse performance score of 60 across the home page, product page and collection page. That’s an entry bar. Many stores will want to aim higher, and you can ask your provider for a target and how they’ll test it.
The metrics
Shopify’s docs define the metrics that matter.
- TTFB (Time to First Byte). How long the browser waits for the first byte of HTML. On a Shopify storefront, most of that time is Liquid rendering.
- FCP (First Contentful Paint). When the browser paints the first text or image.
- LCP (Largest Contentful Paint). When the largest element in the initial viewport finishes rendering, usually a hero or product image.
- CLS (Cumulative Layout Shift). How much visible content moves unexpectedly while the page loads.
- INP (Interaction to Next Paint). How quickly the page responds visibly after a tap or click.
LCP, CLS and INP are the Core Web Vitals, which Google uses as a ranking signal. If you want a plain-English refresher, our Core Web Vitals guide and our post on Interaction to Next Paint cover the ideas.
The essential practices
Shopify’s essential practices have the largest impact across the broadest range of themes. Ask any provider how they handle each.
| Practice | Why it matters |
|---|---|
| Never lazy-load the LCP image | Lazy loading delays the image until after layout, so eager-load images in the first viewport |
| Mark the LCP image with fetchpriority=”high” | Tells the browser to fetch it before other resources; a one-line change |
| Don’t hide the LCP image behind animations | Fade-ins delay the LCP event even after the image downloads |
| Render essential content in Liquid and HTML, not JavaScript | Server-rendered content is available before the browser does anything, and helps SEO |
| Avoid deeply nested Liquid loops | Cost grows with catalog size; Shopify calls it the most common cause of high TTFB |
| Load first-paint resources before content_for_header | Stylesheets, fonts and scripts can download while Liquid runs |
| Use preload sparingly | Overuse competes with the browser’s own prioritization |
Shopify adds that a theme fast on 10 products can be slow on 100 if loops are nested badly. That’s the reason to test on a realistic catalog and not a demo store.
Liquid, images, JavaScript and CSS
Some of the further recommendations are worth turning into interview questions.
Liquid. Move metafield access outside loops, avoid fetching all variants when you only need a few, keep pagination under 25,000 objects, and flatten nested render calls. Use section.index to load above-the-fold and below-the-fold sections differently. Use the Section Rendering API for dynamic updates instead of full page reloads.
Images. Use image_url and image_tag, which generate srcset attributes, add width and height and serve from the CDN. Don’t use CSS background images for LCP content, because the browser’s preload scanner can’t discover them early. Use the picture element when you have separate mobile and desktop images.
JavaScript. Remove or defer render-blocking apps. Audit unused scripts, including tracking pixels. Use defer on non-critical scripts and load code on user interaction where possible. Remove A/B test anti-flicker snippets when no tests are running. Build the DOM for hidden components, like filter panels and cart drawers, only when they open.
CSS and fonts. Reduce the number of stylesheets, since each extra one triggers a style recalculation. Reduce layout shift from font swapping with size-adjust and font metric overrides. Self-host web fonts on the Shopify CDN. Use App Blocks with a min-height so app-injected content doesn’t push the page around.
None of this needs a magic app. If a quote says “speed optimization app included”, read the next section.
Beware of fake performance apps
Shopify’s docs include a guide on avoiding fake performance apps. It describes apps that cheat Lighthouse and PageSpeed tests, for example by injecting transparent elements or serving different pages to crawlers. A provider that recommends one is optimizing for the score, not for your customers.
Ask any provider how they’ll measure speed. A good answer mentions both lab tests and real-user field data, and it names the pages tested. Shopify’s docs recommend using Real User Monitoring and synthetic lab tests together.
How do mobile, accessibility and SEO fit in?
They fit into the same build. Shopify’s performance docs say core web vitals are measured on mobile by default, so mobile performance is theme performance. They list mobile practices that affect rankings and usability.
- Test with real mobile CPU and network throttling.
- Avoid intrusive full-screen interstitials on page load.
- Make tap targets at least 48 by 48 pixels.
- Avoid content wider than the viewport.
- Make sure content that’s hidden on mobile isn’t deprioritized by Google’s mobile-first indexing.
Shopify also lists accessibility and design among its theme best practices. If accessibility matters to your brand, ask what a provider tests against and how.
For search, the theme controls the markup, headings, structured data hooks and speed. Our ecommerce migration SEO checklist is useful if the theme project also changes URLs, and our post on how page speed affects bounce rate explains why the speed work pays off.
How do you scope a theme project?
A clear brief prevents most disputes. Write down what you want before you ask for quotes.
Include:
- Goals. What should change: conversion, speed, brand, editing flexibility?
- Catalog. Number of products and collections, variant complexity, metafield use.
- Page types. Home, collection, product, cart, search, blog, landing pages, account pages.
- Custom features. Mega menu, filters, product bundles, size guides, quick buy.
- Apps. Which apps are staying, and which should be replaced or removed.
- Markets and languages. Multi-market and translation needs. Themes can customize settings and app embeds per market.
- Performance target. A named metric and the pages it’s measured on.
- Handover. Documentation, a walkthrough and who owns the code afterwards.
Shopify’s docs note that you can customize an existing theme with CLI, which suits a smaller scope, and build a new theme from the Skeleton theme, which suits a custom build. A provider might start from either, so ask which and why.
What a written quote should state
- What’s in scope and what isn’t
- The starting point (existing theme, Skeleton, or other)
- Number of templates and sections
- The performance target and how it’ll be tested
- Staging environment access for review
- Revision rounds
- How the code is delivered and where it’s stored
- Support or warranty period after launch
We’re not listing prices because they vary by scope, region and provider. Get at least two quotes with the same brief, so you can compare like with like.
How do you launch a theme without breaking the store?
You launch with a staging copy, a checklist and a release plan. Shopify gives you tools for each step.
A developer can preview a theme with a development theme, share a password-protected preview with others, then push it to an unpublished theme on your store. You review it in the theme editor and publish when you’re ready.
If you use Rollouts, remember some limits. Shopify’s help center says rollouts can’t be applied to vintage themes and that you can’t change Liquid templates as part of a rollout. A rollout can swap in a replacement theme, or hold edits to your current one. Publishing a different theme while a rollout has theme edits can remove those edits, and publishing from CLI or the API is blocked until those rollouts end or are archived. We explain all of this in our Shopify Rollouts guide. Tell your developer which rollouts are active before they deploy.
A simple launch plan:
- Build and review on a development theme.
- Push to an unpublished theme and run QA on real devices.
- Test cart, checkout, discounts, markets and any apps.
- Run a performance check on the home, product and collection pages.
- Choose a quiet time to publish.
- Check analytics and error reports the first day.
- Keep the previous theme unpublished in case you need to switch back.
Where do you find a Shopify theme developer?
You can find developers through the Shopify Partner Directory, referrals, agencies and freelance platforms. The directory has just changed. Shopify’s changelog for 9 November 2026 announced a redesigned Partner Directory that validates partner profiles with Shopify data, so you can find and hire partners with proven experience in the areas your business needs, based on profiles informed by Shopify data and partner collaboration history.
That’s a helpful filter. It doesn’t replace your own checks. Ask for:
- Two or three live stores they’ve built, and what role they played
- A short call with a past client, if the client agrees
- A sample of their code or a code review of a small task
- Their process for staging, version control and QA
- Who will actually do the work
If you want our team to look at your theme, see our Shopify development services or contact us with your brief. If your brand spans Shopify and another platform, our ecommerce development services cover that.
What do the top results miss about Shopify theme development services?
Most service pages list features and show portfolio images. Here’s what’s usually left out.
They don’t mention the architecture. The directory structure, sections, blocks and snippets decide how editable your theme is. A provider who can’t explain them can’t explain your quote.
They say “fast” without a number. Shopify’s own Theme Store floor is a Lighthouse average of 60, and it uses a benchmark store. Ask for a metric, a page list and a testing method.
They forget catalog size. A nested loop that’s fine on 10 products can be slow on 100. Ask to see tests on your real catalog.
They recommend speed apps. Some apps cheat the test. Real gains come from Liquid, images, scripts and CSS.
They ignore the release process. Rollouts and CLI publishing can clash. A launch plan matters as much as the design.
They skip handover. If your team can’t edit sections after launch, you’ll be back for every small change.
Red flags and green flags
| Red flags | Green flags |
|---|---|
| Edits made directly on the live theme | Development themes, staging links and version control |
| “Speed app” as the main performance plan | A written metric, pages tested and fixes in the theme code |
| No mention of mobile | Mobile tested with throttling and real devices |
| Vague scope: “a few custom sections” | A list of templates, sections and features |
| Won’t share past work or references | Live examples and a client contact |
| Code delivered as a zip with no notes | Repository access, notes and a walkthrough |
| Promises of rankings | Talks about Core Web Vitals and markup |
Common mistakes when hiring
- Choosing on design alone. Pretty mockups don’t tell you how the theme performs or how editable it is.
- Skipping a performance target. Without one, “fast” means whatever the provider says it means.
- Stuffing the theme with apps. Shopify’s guidance says to audit and remove unused scripts, including apps and tracking pixels.
- Testing on a small catalog. Test on the real one.
- Forgetting the markets. If you sell in several regions, plan market-specific settings from the start.
- Letting the agency own the only copy. Ask for repository access.
- Launching without a rollback. Keep the old theme ready.
A short checklist
- Write a brief with goals, page types, features and apps.
- Ask for a quote that names scope, starting point and performance target.
- Check how the provider uses CLI, development themes, version control and Theme Check.
- Ask how they’ll handle the LCP image, Liquid loops and JavaScript.
- Ask for a plan to test on mobile and on your real catalog.
- Check the Partner Directory profile and ask for references.
- Plan a staging review and a launch window.
- Tell the developer about any active rollouts.
- Agree on handover and a support period.
Frequently asked questions
What do Shopify theme development services include?
They cover building a new theme, customizing an existing one, migrating an older theme to the current architecture, performance work, app block integration and handover. The work spans layout, template, section, block, snippet, asset, config and locale files.
How do I know if a Shopify theme is fast?
Test it on your real catalog with both lab tools and real-user data. Shopify’s Theme Store requires a minimum average Lighthouse performance score of 60 across the home, product and collection pages, but you can set a higher target. Watch LCP, CLS and INP.
Should I use a speed optimization app?
Be careful. Shopify’s docs warn about apps that cheat Lighthouse and PageSpeed tests, for example by injecting transparent elements or serving different pages to crawlers. Real improvements usually come from cleaner Liquid, correctly loaded images, fewer scripts and tidy CSS.
Can I customize my existing theme instead of building a new one?
Often, yes. Shopify’s docs describe setting up a development environment to customize an existing theme with CLI. Whether it’s the right choice depends on the theme’s quality, its architecture and how far your design departs from it.
Can Shopify Rollouts deploy my theme code changes?
Partly. Rollouts can hold edits to your main theme or replace it, but you can’t change Liquid templates as part of a rollout, and rollouts can’t be applied to vintage themes. Publishing a different theme while a rollout has theme edits can remove those edits.
Where can I find a Shopify theme developer?
Try the Shopify Partner Directory, which Shopify redesigned in November 2026 to validate partner profiles with Shopify data. Also ask for referrals, review live stores and request a client reference.
How long do development themes last?
Shopify says development themes created with the CLI are temporary and hidden. They don’t count toward your theme limit and are deleted after seven days of inactivity, or when the developer logs out. For a lasting preview, push the theme to an unpublished theme on your store.
Do I need to migrate to Online Store 2.0?
If your theme is older, Shopify’s docs describe a migration that lets you add and remove sections on any template and prepares your theme for app blocks. Your provider can tell you whether your current theme needs it.
The bottom line
The best Shopify theme development services read like a good building contractor. They show you a plan, work in a clean environment, test on the real thing and leave you with something you can maintain. Pretty screens matter, but the structure, speed and handover are what you live with.
Start by writing a one-page brief. Then ask each provider the same five questions: how they use CLI and staging, how they’ll hit your speed target, how they handle the LCP image and Liquid loops, how they’ll test mobile, and what you’ll own at the end. Their answers will tell you more than any portfolio.