The 4 Types of Shopify Coding (And Which Ones You Really Need)
- There are 4 distinct types of Shopify coding, and they're wildly different in skill level, time commitment, and who actually needs them.
- Level 1 (CSS tweaks) can take a templated store and make it look completely custom. This is where most store owners should start.
- Level 2 (HTML/CSS + Liquid) is where things get really powerful, but pre-built tools like The Section Studio now let you skip the code and get the same results.
- 98.5% of Shopify stores use pre-built themes. Full custom theme development (Level 3) is almost certainly not what you need.
- App development (Level 4) is its own entire career path. You can build an incredible Shopify business without ever touching it.
There are really only 4 types of Shopify coding: basic CSS tweaks, HTML/CSS + Liquid section development, full custom theme builds, and custom app development. Most store owners only need one or two of these. Some don't need any. The ones that get all the search attention (Ruby! GraphQL! React!) are probably the ones you'll never touch.
Every article about Shopify coding throws language names at you without explaining which ones you'd actually use. I'm going to fix that. Here's what each level involves, what it costs, and which ones are worth your time. If you're just getting started, check out things to know before starting your Shopify store first.
The 4 Types of Shopify Coding (Quick Overview)
Here's the framework at a glance. Think of these as levels: they increase in complexity and decrease in how many people actually need them.
| Level | What It Is | Languages | Who Needs It |
|---|---|---|---|
| 1. CSS Tweaks | Visual styling changes | CSS | Anyone who wants a polished store |
| 2. Custom Sections | Building editable layouts | HTML, CSS, Liquid | Designers, developers, ambitious DIYers |
| 3. Full Theme Dev | Coding an entire theme from scratch | HTML, CSS, Liquid, JSON, JavaScript | Theme Store sellers, enterprise brands |
| 4. App Development | Building custom functionality | Node.js, React, Ruby, GraphQL | Software developers |
Level 1: Basic CSS Tweaks (Shopify CSS Customization)
This is where everyone starts, and you can do a lot more here than most people realize.
CSS controls how things look: colors, fonts, spacing, sizing, borders, shadows, animations. Think of your Shopify theme as a house. CSS is the furniture, paint, and decor. The structure stays the same, but the feel changes completely.
What you can actually do with CSS alone
- Change colors anywhere on your site (not just where the theme editor lets you)
- Upload and apply custom fonts beyond what your theme offers
- Fine-tune spacing, sizing, and typography across every page
- Restyle buttons, navigation menus, and form fields
- Hide or reposition elements you don't want
- Add hover effects and subtle animations
A lot of store owners assume they need a developer when they want their site to feel more "custom." But strategic Shopify CSS customization on one of the best Shopify themes for your store can genuinely transform a site.
Here's what a simple CSS customization looks like in practice:
.btn, .shopify-challenge__button {
border-radius: 0;
text-transform: uppercase;
letter-spacing: .12em;
font-weight: 700;
transition: all .3s ease;
}
.btn:hover {
opacity: .85;
transform: translateY(-1px);
}
(Ten lines of CSS that takes two minutes and completely changes the personality of a store.)
Typography alone makes a huge difference. Pairing the right fonts (I have a whole guide on the best Shopify font combinations) and fine-tuning sizes and spacing with CSS can take a site from "template" to "brand."
Very easy to learn, you could start today. Shopify has a built-in custom CSS field in the theme editor (no file editing required), and there are thousands of free tutorials online. If you can copy and paste, you can do this.
Level 2: HTML/CSS + Liquid (Custom Shopify Sections)
This is where things get really powerful, and where I spend most of my time as a Shopify designer.
Level 2 combines HTML for structure, CSS for styling, and Liquid (Shopify's template language) to make everything editable in the theme editor. The result: custom sections a store owner can update and rearrange without touching code.
What Level 2 unlocks
- Custom homepage layouts that don't exist in any theme
- Unique section designs editable directly in Shopify's theme editor
- Reusable sections you can move between projects, regardless of theme
- Layouts optimized for conversion, not just what the theme happened to include
Online Store 2.0 supports up to 25 sections per template and 50 blocks per section, on every page. If you're building a high-converting Shopify homepage, the sections you choose matter more than the theme.
Here's what Level 2 Liquid looks like in practice—a simplified Liquid section schema:
{% schema %}
{
"name": "Custom Feature Grid",
"settings": [
{
"type": "text",
"id": "heading",
"label": "Section Heading",
"default": "Why Choose Us"
}
],
"blocks": [
{
"type": "feature",
"name": "Feature",
"settings": [
{
"type": "image_picker",
"id": "icon",
"label": "Icon"
},
{
"type": "text",
"id": "title",
"label": "Title"
}
]
}
]
}
{% endschema %}
That schema turns raw HTML into an editable section in Shopify's drag-and-drop editor. The store owner only sees fields for a heading, icons, and titles, never the code.
💡 The shortcut most people miss: You don't actually need to learn Liquid to get Level 2 results. Plug-and-play Shopify sections (like the ones in The Section Studio) give you custom, editable layouts that drop right into any Online Store 2.0 theme. Same outcome, no code required.
A $350 theme with the right custom sections will outperform a $50,000 custom build almost every time. You get exactly the layouts you need on a foundation already tested by thousands of stores.
Learnable, but no longer required. Shopify Liquid development takes months to learn from scratch. But the tools now exist to skip the code entirely. This is the level where hiring a developer (or buying pre-built sections) gives you the biggest return.
Level 3: Full Custom Shopify Theme Development
I'm going to be direct: this is probably not what you need.
Custom Shopify theme development means coding an entire theme from zero. Every page template, section, setting, feature, breakpoint, and performance optimization.
I hear this constantly: "I need a custom theme." When I dig in, they almost always mean "I want my site to look custom." A custom look is Level 2. A custom theme is Level 3, and it comes with a very different price tag.
What full theme development actually involves
- Coding every page template from scratch (homepage, product, collection, cart, blog, etc.)
- Building a complete settings architecture for the theme editor
- WCAG accessibility compliance and Core Web Vitals optimization
- Multi-language and multi-currency support
- Compatibility with Shopify's app ecosystem (87% of merchants use apps, averaging 6 per store)
- Ongoing maintenance as Shopify releases platform updates
💰 The real cost: Custom Shopify theme development runs $10,000-$50,000+ and takes 12-16 weeks. Compare that to a premium theme ($180-$400) plus custom sections, which can achieve a comparable result in a fraction of the time and budget.
Legitimate use cases exist: building themes to sell in the Shopify Theme Store (268 themes serve 4+ million stores), enterprise brands with genuinely unique requirements, or stores with user experiences that can't be assembled from sections. But 99% of projects don't fall into those categories.
If you're building a $100K/year Shopify store, your budget is almost certainly better spent on strategy, marketing, and a well-customized theme. Overspending on custom development before the business proves out is one of the most common Shopify mistakes to avoid.
Advanced. Requires deep knowledge of HTML, CSS, JavaScript, Liquid, JSON schemas, and Shopify's Theme API. This is a professional developer's domain, and even experienced developers spend months on a single theme.
Level 4: Custom Shopify App Development
This is a completely different world! We've left design territory and entered software engineering.
Shopify app development is all about what your store does rather than how it looks: custom checkout flows, loyalty programs, inventory systems, third-party integrations, subscription engines. If it requires custom backend logic, it's Level 4.
What app development covers
- Custom functionality that doesn't exist in Shopify's 11,900+ app ecosystem
- Node.js and React for the frontend, Ruby or Node.js on the backend
- GraphQL for communicating with Shopify's APIs
- Webhook handling, data storage, authentication, and security
The analogy I always use: comparing theme development to app development is like comparing an interior designer to an electrician. Both work on the same building, but they're completely different jobs.
If someone tells you that you need custom app development, make sure you actually do. 87% of merchants get everything they need from existing apps. The Shopify App Store has over 11,900 options. Unless you need truly proprietary functionality, there's almost certainly an app that covers your use case.
Professional software development. If you're a store owner or designer, you won't need this. You can build an incredible Shopify business without writing a single line of app code.
So, Which Types of Shopify Coding Do You Actually Need?
This is the question that actually matters, and the answer depends on who you are.
Store owners and founders
Level 1 (basic CSS) is genuinely useful and very learnable. Level 2 results are available without code through pre-built section libraries. You don't need Levels 3 or 4. Focus your energy on product, marketing, and increasing your Shopify conversion rate.
Shopify designers and freelancers
Level 1 is essential. Level 2 is where the real value lives, whether you code it yourself or use tools like The Section Studio. Level 3 is optional (and rarely needed for client work). Skip Level 4 entirely.
Aspiring Shopify developers
Learn Levels 1 and 2 thoroughly. Consider Level 3 if you want to sell themes or work with enterprise clients. Level 4 is a fork in the road: it's a great career, but it's software engineering, not design.
Agency owners
Your team needs Level 1 and 2 coverage at minimum. Level 3 capability is nice but rarely client-facing. Level 4 is worth partnering on (not building in-house) unless apps are your core business.
The vast majority of stores I've built used Levels 1 and 2 exclusively, and we've dipped our toes into Level 4 for some custom discount logic. A great theme, smart CSS, and the right custom sections get you 95% of the way to a store that looks and converts like a fully custom build. That remaining 5% is almost never worth the extra $40,000.
You don't need to learn everything. You need the right things. And a strong Shopify About Us page that converts combined with a well-designed homepage will do more for your business than any amount of custom coding.
Get Level 2 Results Without Writing Code
I built The Section Studio specifically for this gap. It's a library of plug-and-play custom Shopify sections that drop into any Online Store 2.0 theme. Every section is fully editable in the theme editor, responsive, and designed to convert.
You get Level 2 power without Level 2 complexity and no Liquid required.
