How to Develop a Custom Shopify Theme

Table of Contents

Table of Contents

Team planning a custom Shopify theme for an online store

Quick Answer

Custom Shopify theme development means building your store’s templates, sections, and styles to fit your brand and buying process, instead of adjusting a stock theme. Most developers start from Shopify’s Skeleton reference theme and work locally with Shopify CLI. They write Liquid, HTML, CSS, and JavaScript, then test speed and accessibility before publishing. It’s worth it when a stock theme can’t support how your customers shop.

Shopify’s theme tutorial uses “Shopify CLI and the Skeleton reference theme” to create a new theme.

A custom theme won’t sell more products on its own. What it can do is remove the compromises a stock theme forces on how you present them.

So the first question isn’t how to build one. It’s whether your store has outgrown what a good stock theme can do.

When a custom Shopify theme is worth it

Most new stores should start with a well-built theme from the Shopify Theme Store, free or paid, with its settings adjusted to fit. Those themes are tested for speed, accessibility, and features, and they cost far less than a custom build.

Shoppers browsing an online store on a phone

A custom theme earns its cost when the store’s needs don’t fit any stock layout. It also makes sense when settings alone can’t get you the look and the buying flow you want.

Common reasons include complex product options, custom bundles, or wholesale and retail pricing on one site. A content-heavy brand that sells through stories as much as product grids is another.

Another reason is performance. Stock themes carry features for thousands of merchants, and most stores use only some of them. A custom build can ship only what your store needs, which can make pages lighter.

There are trade-offs. A custom theme needs a developer for changes that a stock theme’s settings handle, and Shopify platform updates may need code work. Budget for ongoing care, not just the build.

Key Takeaways

Custom Shopify theme development pays off when you plan it around:

  • Fit, not novelty: Build custom only when a stock theme can’t support how your customers buy.
  • Sections for the team: A theme your staff can edit in the theme editor keeps small changes off the developer’s desk.
  • Speed as a requirement: Set performance targets before design starts, not after launch.
  • Care after launch: A custom theme is a product you maintain, not a one-time purchase.

Stock theme, customized theme, or fully custom

Before writing code, decide how far from a stock theme you need to go. Custom theme development covers a wide range, from a few new sections to a full rebuild. There are three common paths, and each suits a different store.

Option What it means Best for Trade-off
Stock theme Theme Store theme with settings changed New and simple stores Looks like other stores using it
Customized theme Stock theme with custom sections and code edits Stores with a few special needs Theme updates need care to keep your edits
Fully custom theme Built from a reference theme or from scratch Complex catalogs and distinct brands Higher cost and ongoing developer time

We’d steer most stores to the middle. A customized theme keeps tested foundations and adds the few sections your store needs.

"From scratch" also means different things to different people. For most developers, it means starting from Shopify’s Skeleton theme and building every template and section from there. Very few teams write a theme with no starting code at all, and there’s rarely a reason to.

Build steps for a custom Shopify theme

To create a Shopify theme that lasts, follow the same order as any website project: plan, design, build, test, and launch.

Developer working through the build steps of a custom Shopify theme

  1. Map the store’s pages and flows. List every template you need: home, collection, product, cart, search, blog, article, pages, and customer accounts. Note where customers enter and where you want them to go.
  2. Wireframe the key templates. Sketch the product page, collection page, and homepage first, since they carry most sales. Changing a wireframe costs far less than changing finished code.
  3. Design for mobile and desktop. Settle the look on the templates that matter most, then extend it to the rest.
  4. Set up the development environment. Install Shopify CLI, create a development store, and run shopify theme init to clone the Skeleton theme.
  5. Build templates, sections and blocks. Write Liquid, HTML, CSS, and JavaScript, and expose settings so staff can edit content in the theme editor.
  6. Load real products and content. Test with your actual catalog, including long product names, many variants, and missing images.
  7. Test speed, accessibility, and browsers. Check the home, collection, and product pages on phones and desktops.
  8. Launch and monitor. Publish the theme, keep the old one as a backup, and watch sales and speed for the first weeks.

Step four is where many first-time builders get stuck. Shopify CLI’s theme dev command previews your local code in real time using the store’s data, so you see changes as you save them.

A custom theme is only as good as the plan behind it. Most expensive fixes start as skipped wireframes.

Setting up local development

Professional theme work happens on your computer, not in the Shopify admin code editor. Local development lets you use Git, review changes, and test safely before anything reaches customers.

Developer editing theme code locally before pushing it to a store

The development environment has four parts. You need Shopify CLI, a code editor, Git for version control, and a development store with sample products. Shopify CLI connects your local theme code to the store.

The everyday loop is simple. Run theme dev to preview changes, commit your work to Git, and push the theme to an unpublished copy for review. Only publish once the store owner has approved it.

Keep a staging theme alongside the live one. Every change gets tested there first, including app installs that inject code into the theme. That habit prevents most launch-day surprises.

If you’re building a theme from scratch for the first time, expect a learning curve. The Skeleton theme gives you a clean base, but the custom design, sections, and settings are still yours to write.

Liquid and Online Store 2.0 basics

Every Shopify theme runs on Liquid. The Liquid reference describes it as "a template language created by Shopify." It has its own tags, filters, and objects, and it isn’t a dialect of any other language.

Liquid has three building blocks. Objects output store data, such as a product’s title or price. Tags add logic, like loops and conditions. Filters change output, such as formatting a price or resizing an image.

Themes follow a standard folder structure. The main folders are layout, templates, sections, blocks, snippets, assets, config, and locales. The layout file wraps every page, templates define each page type, and sections and blocks are the building pieces inside them.

Why Online Store 2.0 matters

Online Store 2.0 changed how themes are built. Shopify’s Online Store 2.0 documentation says its JSON template format lets you add sections "to most pages in your theme."

In practice, that means merchants can rearrange and add sections on product pages, collection pages, and custom pages without a developer. A custom theme that ignores this forces every layout change back to code.

Build reusable sections with clear settings and sensible defaults. Then your team can launch a new landing page or seasonal product layout in the theme editor. That’s where a custom theme saves developer hours every month.

Skills a theme developer needs

A theme developer needs solid HTML and CSS, working JavaScript, Liquid, and comfort with Shopify CLI and Git. Knowledge of accessibility and web performance separates good theme work from average theme work.

Speed and SEO for custom themes

Speed is where custom themes can win or lose. Shopify’s performance best practices note that Google uses the Core Web Vitals as a ranking signal.

Checking how fast a Shopify store loads on a phone

Shopify also sets a bar for its own Theme Store. Its theme store requirements say themes "must have a minimum average Lighthouse performance score of 60" across product, collection, and home pages. That’s a floor for public themes, and a custom theme should aim well above it.

The biggest speed costs are usually large images, heavy JavaScript, and too many apps injecting scripts. Use Shopify’s responsive image filters, load scripts only where they’re needed, and review every app’s impact before installing it.

For SEO, a custom theme should output clean headings, editable page titles and descriptions, descriptive image alt text, and readable URLs. Product and collection descriptions need to be real text in the page, not baked into images.

Now ask yourself: does your current theme load quickly on a phone, or does every new app make it slower?

Moving from your current theme without losing sales

Switching themes on a live store carries risk. The checklist below keeps the switch from costing you orders or search traffic.

  • Keep URLs the same: Shopify controls most product and collection URLs, so a new theme usually doesn’t change them. Confirm any custom pages keep their addresses.
  • Carry over metadata: Page titles, descriptions, and image alt text live mostly in the Shopify admin, but check any that the old theme code set.
  • Rebuild app integrations: Reviews, subscriptions, and upsell apps may need setup again in the new theme.
  • Check tracking: Confirm analytics and ad pixels still fire on product, cart, and checkout steps.
  • Compare speed: Test the old and new themes on the same pages before you publish.

Publish during a quiet sales period and keep the old theme in your library. If something breaks, you can switch back in minutes while you fix it.

What custom Shopify theme development costs

Cost depends on the number of templates, the complexity of product options, and how much the theme editor must support. A customized stock theme costs far less than a fully custom build.

Budgeting for a custom Shopify theme build and ongoing care

At White Peak, ecommerce websites typically cost $5,000 to $20,000, depending on requirements and features. A store that needs custom product builders, wholesale logic, or many unique templates sits toward the top of that range.

Plan for ongoing costs too. Theme fixes after Shopify platform changes, new sections, and app conflicts all need developer time, and they touch the theme code directly. A maintenance budget keeps the theme from drifting out of date.

Hiring a Shopify developer

If you’re not building the theme yourself, the developer you hire matters more than any tool. Theme services vary widely in what they include. Look for someone who has built Online Store 2.0 themes and can show live stores they’ve worked on.

Shopify developers reviewing theme code and design together

Ask how they handle the theme editor, performance targets, and accessibility. Ask how they’ll hand over the code and document custom sections. A good answer includes version control and a staging theme for testing changes.

Also ask what happens after launch. Some developers build and leave, while others offer ongoing support. Ask the same questions of any team offering Shopify development, including ours.

Once the store is live, connect it to your ad channels. When you connect Shopify to Facebook and Google, catalog syncing and conversion tracking show which products the new theme sells.

Custom Shopify theme FAQs

How long does it take to build a custom Shopify theme?

A customized stock theme can take a few weeks. A fully custom theme usually takes longer, because each template needs design, build, and testing. The biggest factors are the number of unique templates, product complexity, and how quickly content and feedback arrive.

Can I build a Shopify theme without coding?

You can customize a stock theme without coding, using the theme editor’s sections and settings. A custom theme needs Liquid, HTML, CSS, and JavaScript. Page builder apps sit in between, but they add scripts that can slow your store.

Is a custom Shopify theme better for SEO?

A custom theme isn’t automatically better for SEO. It helps when it loads faster and outputs cleaner code than your current theme. Good content, clear headings, and fast pages matter more than whether the theme is custom or stock.

What is the Skeleton theme?

The Skeleton theme is Shopify’s minimal reference theme for developers. Running shopify theme init clones it to your computer as a starting point. It gives you a clean structure to build on, without the features and styles of a full Theme Store theme.

Getting help in Reno

If you take one thing from this, build custom only when a stock theme truly can’t fit how your customers shop.

White Peak is a web design and digital marketing agency in downtown Reno. We design and build Shopify stores for businesses in Reno, Sparks, Carson City, Truckee, and nationwide.

If you’re weighing a custom theme, our ecommerce website design team will help you decide in a free consultation.

Book a Free Consultation

Written by

Picture of Tim Woda

Tim Woda

Tim Woda is a serial entrepreneur, business growth strategist, and founder and CEO of White Peak Marketing. With more than 25 years of experience building and scaling companies, he specializes in digital marketing, customer acquisition, conversion optimization, customer retention, and revenue growth. Tim is also the creator of MaximizeOS and a featured speaker at the B2B Marketing Expo.

Scroll to Top

Refer a Friend or Colleague

Earn up to a $1,000 credit

referral program

Who Says There's No Such Thing as Easy Money?

You can earn an unlimited number of referral credits simply by introducing White Peak to business owners or marketing pros who would benefit from our web design or marketing help.

Next Steps...

Visit https://whitepeak.io/legal-notices/ for Referral Program Terms.