Shopify Headless with Next.js vs Liquid: which choice for your e-commerce?
Shopify is today one of the most widely used e-commerce platforms in the world. Easy to use, robust and scalable, it allows you to quickly launch a high-performance online store.
But when you want to create a truly personalized experience, two main technical approaches are available: staying on the classic Shopify architecture and customizing its theme, or opting for a decoupled (headless) architecture with a modern framework like Next.js.
Each of these approaches has its advantages and constraints. In this guide, I will compare these two architectures pragmatically to help you make the right choice for your needs.
Table of contents
1. Classic Shopify: effective in most cases
When we talk about classic Shopify, we're talking about a store based on Shopify servers, a theme (free, premium or custom) and the Liquid template engine.
Why classic Shopify works so well
Shopify was designed to solve 90% of common e-commerce needs:
- ✓Complete product management
Products, collections, variants, inventory managed natively
- ✓Optimized checkout flow
Checkout tested and converted on billions of transactions
- ✓Clean and stable SEO
Structure optimized by default for search engines
- ✓Simple and autonomous back-office
Your teams can manage the catalog without a developer
- ✓Very rich app ecosystem
Thousands of apps to extend functionality
Key takeaway: For most e-commerce projects, this is exactly what you need.
2. Custom Liquid: an underestimated lever
Many associate classic Shopify with "generic" themes. This is wrong... if the theme is custom-developed.
With good mastery of Liquid, HTML, CSS and JavaScript, it is possible to create:
✓ Fully customized design
No creative limits with modern CSS and JavaScript
✓ Clean and elegant animations
GSAP, Framer Motion can integrate with Liquid
✓ Smooth user experience
Fast navigation and polished interactions
✓ Visually premium store
Result very close to headless with simpler architecture
Key advantages of Shopify + Custom Liquid
- •Access to 100% of Shopify native features
- •Excellent client autonomy
- •Simple maintenance and controlled costs
- •Solid and lasting SEO
- •Fast time-to-market
Key takeaway: Classic Shopify with custom Liquid theme remains a very effective solution for most e-commerce projects.
3. Shopify headless: a premium approach
Shopify headless consists of using Shopify only as a backend (products, orders, payments) and building the frontend with a modern framework like Next.js, connected via APIs (Storefront API).
What headless actually does better
Let's be clear: headless has real advantages.
- ✓1. Maximum performance
A well-optimized Next.js frontend offers excellent loading times and ultra-smooth navigation
- ✓2. Total design freedom
With Next.js, GSAP or Framer Motion, create very advanced animations and immersive experiences
- ✓3. Total control of user journey
Customize every interaction without Liquid constraints
- ✓4. Modern and scalable architecture
TypeScript, reusable React components, automated tests
Concrete examples of my headless projects
TechStore →
Electronics store with Shopify Headless + Next.js + GSAP
Sophisticated product animations, ultra-smooth navigation, modern design impossible to reproduce with a classic theme
Meeniye →
Hair products e-commerce with Shopify Headless + Next.js + GSAP
Strong branding, immersive experience, subtle animations that reinforce brand identity
The often overlooked limitations
This is where many misunderstandings arise.
- ⚠Mandatory Shopify checkout
In standard headless, you must redirect to the Shopify-hosted checkout (checkout.shopify.com). Impossible to customize except with Shopify Plus (>$2000/month)
- ⚠Increased developer dependency
Every evolution goes through code, maintenance is continuous, client autonomy is reduced
- ⚠Larger investment
Longer initial development and long-term technical maintenance
- ⚠Technical complexity
Requires a real product vision and competent technical team
4. Detailed technical comparison
Here's a point-by-point comparison to help you visualize the key differences.
| Criteria | Shopify Liquid | Shopify Headless |
|---|---|---|
| Architecture | Integrated monolithic | Decoupled frontend via API |
| SEO | Excellent (native) | Excellent (SSR Next.js) |
| Performance | Very good (CDN Shopify) | Excellent (fine optimization) |
| Checkout | Native Shopify (optimized) | Shopify hosted (except Plus) |
| Design customization | High (CSS/JS) | Total (React) |
| Advanced animations | Possible but limited | Excellent (GSAP, FM) |
| Client autonomy | Maximum (Shopify admin) | Reduced (back-office only) |
| Shopify apps integration | Total (complete ecosystem) | Partial (depending on API) |
| Maintenance | Simple (managed by Shopify) | Continuous (dev needed) |
| Time-to-market | Fast (2-8 weeks) | Medium (4-12 weeks) |
| Ideal use case | SMB, standard growth | Premium brands, strong branding |
Key takeaway: Liquid favors efficiency and autonomy. Headless favors maximum performance and creative freedom, with a more technical architecture.
5. Code examples: Liquid vs Next.js
Let's see concretely the difference in approach with code examples for displaying a product list.
Liquid approach (Classic Shopify)
LIQUID<!-- sections/collection-products.liquid -->
<div class="collection-grid">
{% for product in collection.products %}
<div class="product-card">
<a href="{{ product.url }}">
<img
src="{{ product.featured_image | img_url: '400x' }}"
alt="{{ product.title }}"
loading="lazy"
>
<h3>{{ product.title }}</h3>
<p class="price">{{ product.price | money }}</p>
{% if product.compare_at_price > product.price %}
<span class="sale-badge">Sale</span>
{% endif %}
<button class="add-to-cart" data-product-id="{{ product.id }}">
Add to cart
</button>
</a>
</div>
{% endfor %}
</div>✓Simple and accessible syntax
✓Data directly available from Shopify
✓Shopify Ajax API integrated for cart
Headless approach (Next.js + Storefront API)
NEXT.JS// app/collection/[handle]/page.tsx
import { getCollection } from '@/lib/shopify';
import ProductCard from '@/components/ProductCard';
export default async function CollectionPage({
params
}: {
params: { handle: string }
}) {
const collection = await getCollection(params.handle);
return (
<div className="collection-grid">
{collection.products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}✓TypeScript for type safety
✓Reusable React components
⚠API configuration and state management needed
6. When to choose classic Shopify?
Classic Shopify with custom Liquid is the best choice when you're looking for efficiency, autonomy and fast ROI.
1. Launch or progressive growth
You're launching your online store or in a growth phase and need quick results.
2. Need for maximum autonomy
Your team needs to manage catalog, promotions, product pages without going through a developer.
3. Essential Shopify app ecosystem
You rely on Shopify apps (reviews, upsells, email marketing, etc.) that integrate natively.
Key takeaway: In these cases, a custom Liquid theme offers an excellent quality/efficiency ratio.
7. When to opt for Shopify headless?
Shopify headless becomes relevant when user experience and branding are strategic differentiating factors.
1. Very strong and differentiating branding
Your brand identity is strategic and you need a unique visual experience impossible to reproduce with Liquid.
2. Ultra-optimized performance and experience
You're aiming for the best possible performance (perfect Core Web Vitals, instant navigation) and have the budget to achieve it.
3. Multi-platform architecture
You plan to use the same Shopify backend for multiple frontends (website, mobile app, physical stores).
A progressive approach
You can adopt a progressive approach to minimize risks:
This approach allows you to start quickly with Liquid, then migrate to headless if your needs evolve.
8. Frequently Asked Questions (FAQ)
What's the difference between Shopify and Shopify headless?
Classic Shopify is a monolithic solution where the frontend (Liquid theme) and backend are integrated. Shopify headless uses only the Shopify backend (via Storefront API) and a custom frontend (Next.js, etc.). Headless offers more creative flexibility but requires more development.
Can I customize the checkout in Shopify headless?
No, unless you have Shopify Plus. In standard Shopify with headless architecture, you must redirect to the Shopify-hosted checkout (checkout.shopify.com), which is not customizable. Only Shopify Plus (>$2000/month) allows checkout customization with Checkout Extensibility. This is an important constraint to consider.
Is Shopify headless faster than Liquid?
Not necessarily. A well-optimized Liquid site is already very fast thanks to Shopify CDN. Headless with Next.js can offer additional performance gains (SSR, fine code splitting), but the difference isn't always significant for the end user. Both can achieve excellent Core Web Vitals.
How long to create a Shopify headless vs Liquid site?
A custom Liquid site can be delivered in 2 to 8 weeks depending on complexity (2-3 weeks for a simple site, 6-8 weeks for a complex project). A headless site with Next.js generally takes 4 to 12 weeks (4-5 weeks for an MVP, 10-12 weeks for an ambitious project). Headless requires about 2x more development time for equal complexity.
Conclusion
Classic Shopify with custom Liquid offers an excellent balance between customization, performance and autonomy. It's an effective solution for most e-commerce projects with fast time-to-market.
Shopify headless with Next.js gives total control over user experience and very advanced creative possibilities. It's a relevant approach for projects with strong branding, complex animation needs, or multi-platform architecture.
Both approaches are valid and can produce excellent results. The choice depends on your priorities: autonomy and speed to market, or creative freedom and advanced customization.
The important thing is to choose the architecture that truly fits your needs, your team and your goals, not a technical trend.
Need advice for your Shopify project?
I can help you determine the most suitable approach for your needs and create a high-performing and profitable e-commerce store.
Johan Lorck
Freelance Next.js developer specialized in creating high-performance web applications. I can help you choose the best architecture for your project.
Let's discuss your Shopify project →