Building A Blazing Fast Shopify Store: Liquid or Hydrogen?

Someone once told me, “You don’t really need your website to go that fast.” I knew what they meant.
I’d just spent five seconds waiting for Song for the Mute’s homepage to load. By any standard metric, that’s slow. But I didn’t care. When you’re browsing one of the coolest brands on the internet, and you really want to buy, you’re not timing it. You’re in it. You’re immersed. You’re seeing poetry, storytelling, and fashion blending perfectly together!

But most stores aren’t Song for the Mute.
And if your brand doesn’t have that kind of magnetic pull yet, performance matters — a lot. Google called it out years ago in their “Milliseconds Make Millions” report. Even today, 82% of users say slow speeds affect their purchasing decisions, and a 1-second improvement in page speed can yield an extra $7,000/day for a $100k/day site. Things haven’t changed.
Now, if you're using a traditional Shopify theme, built on Liquid and your site feels sluggish, your first instinct might be to install a performance app.
Don’t. Most of them do more harm than good. Others might suggest going headless. I build for Shopify Hydrogen, and even I’ll say this: don’t rush.
Can Shopify Liquid Perform Well?
Absolutely. Shopify published their own study in late 2023 showing that Liquid storefronts outperform most ecommerce platforms in Core Web Vitals.
As of September 2023, 59.5% of Shopify sites passed all CWV thresholds, a stat that continues to climb.

Even large-scale merchants like Rothy’s, Rad Power Bikes, and Dollar Shave Club use Liquid and still hit performance benchmarks.
Surprisingly, Liquid even outperforms most headless implementations. Shopify found that many SSR frameworks — the ones powering most headless setups — had fewer sites passing Core Web Vitals compared to Liquid. Hydrogen ranked second, but there’s still a gap.
So why invest millions in building Hydrogen?
Just why?
Hydrogen vs Liquid/Shopify Themes
A Rebuttal Against Liquid
First, I have to say that it might be hard to compare apples to apples in this case, mainly because the data in Shopify’s benchmark focuses on real storefronts using Hydrogen. Many of these early adopters built custom experiences without performance best practices. In contrast, Liquid storefronts benefit from:
-
Years of optimization by Shopify's core teams
-
Default themes like Dawn that are tightly optimized
-
A templating model that constrains performance pitfalls
Hydrogen, on the other hand, gives full freedom.
Yes, this freedom cuts both ways; it brings performance potential and risk of poor implementation. Hydrogen storefronts can match or exceed Liquid performance when built well. Shopify’s own documentation even notes:
“Some routes in the Hydrogen demo store template saw their load time cut in half” after optimizing GraphQL queries.
Hydrogen is built on React Server Components (RSC) and uses Vite for ultra-fast development. Shopify chose this stack specifically because:
-
RSC reduces client JS bundle size significantly
-
Pages stream in progressively with lower Time to First Byte (TTFB)
-
Data fetching is done on the server, not in the client render phase
You get full control. You also get full responsibility. That’s why some Hydrogen stores load in half the time, and others fall flat.
When Should You Consider Hydrogen?
Page speed shouldn’t be the only factor in deciding between Shopify Hydrogen and Liquid. The real choice comes down to how much control you need over your storefront experience.
If you’re planning to run A/B tests, personalize content, or build dynamic user interfaces, you’ll hit the limits of Liquid fast. Hydrogen is built for that kind of flexibility. It’s designed for brands that want to iterate quickly, experiment often, and optimize every touchpoint.
On the other hand, Liquid works well for stores that prioritize simplicity and stability. Its guardrails are a strength if your store setup is relatively fixed, maybe with just a few campaign landing pages here and there.
Use Hydrogen if:
-
Your store has 500+ SKUs or 100K+ visits/month, and you’re seeing speed decline.
-
You need to launch experiences that your theme can’t handle: multi-currency PWA, AR tools, immersive UIs.
-
Your team (or agency) is fluent in React and headless workflows
Stick with Liquid if:
-
You’re validating a new product or category
All your needs are covered within the theme editor, and your site already performs well -
You don’t have the engineering support to maintain a custom frontend
The TL;DR
In short, Liquid gives you structure. Hydrogen gives you freedom. Choose based on how far you plan to push your storefront.
How To Build Hydrogen Storefronts Faster?
One of the biggest reasons developers hesitate to go headless is that it breaks the visual editing experience. The Shopify Theme Editor disappears. Content teams are locked out. Everything becomes a Jira ticket.
Weaverse fixes that.
With Weaverse Hydrogen, developers can build Hydrogen themes and components via an SDK, expose them in a familiar drag-and-drop editor, just like Shopify Theme Editor, and let content teams reuse, remix, and publish without touching code.
And it's only getting easier.
With Weaverse AI, the gap between idea and execution shrinks dramatically. Developers will soon be able to turn Figma design into Hydrogen landing pages using Weaverse and Figma MCP. Merchants will soon be able to edit their Hydrogen storefronts using a natural language interface.
If you’re interested in Weaverse AI, let me know here, and I’ll reach out once it’s ready!
Reactions
Join the Discussion
Continue Reading
More insights from the Weaverse team

ChatGPT Quit Agentic Commerce. That Doesn't Mean You Should.
ChatGPT Quit Agentic Commerce. That Doesn't Mean You Should. Two posts this week confirm the same signal: Juozas Kaziukėnas: ChatGPT is abandoning agentic commerce after 5 months. Users researched products but didn't buy through the chatbot. Kelly Goetsch: OpenAI is losing ground to Anthropic and deprioritizing commerce because enterprise commerce is harder than they expected. The headlines say "AI commerce is failing." The real story is more nuanced. Why They Retreated Agentic commerce — AI agents that discover, compare, and complete purchases on behalf of users — hit three hard walls: 1. Catalog Normalization Is Brutal Product data (pricing, inventory, variants, availability) needs to be: Standardized across every retailer Constantly updated in real-time Accurate enough for AI to trust Only Google Shopping has done this at scale. ChatGPT couldn't. 2. Trust Gap: Research ≠ Purchase Users were happy to research products inside ChatGPT. But when it came time to buy, they didn't trust the chatbot with payment. This isn't a ChatGPT problem — it's a user behavior problem. Facebook Shops and Google's "Buy with Google" hit the same wall. 3. Fraud and Error Safeguards Commerce and payment firms need real safeguards against: AI initiating fraudulent transactions AI making erroneous purchases Liability when something goes wrong These safeguards don't exist yet at scale. Without them, platforms retreat to just driving traffic to retailer sites. What They're Not Saying This is a pause, not a permanent retreat. Kelly Goetsch explicitly predicts: "they'll re-prioritize commerce in a few months once they figure out the infrastructure layer." Juozas Kaziukėnas frames it as lack of conviction: Chinese AI platforms like Alibaba's Qwen are spending hundreds of millions to force the behavior change. ChatGPT gave up too early. Either way, they'll be back. The question is: will your store be ready? The Infrastructure Layer Wins Long-Term When AI platforms return to agentic commerce, the stores that win won't be the ones with the prettiest themes or the best brand storytelling. They'll be the ones with: Structured product data that agents can read and reason about Clean APIs that don't break under automation Checkout flows with real safeguards and clear liability boundaries Machine-readable manifests (like UCP's ucp.json) that broadcast capabilities to agents This is exactly what Hydrogen + Storefront API architectures are built for. Why Hydrogen Teams Have a Structural Advantage Monolithic Liquid stores have product data trapped in rendered HTML. AI agents have a hard time reasoning over server-rendered markup. Hydrogen stores built on the Storefront API already expose: Structured, queryable product data Stable cart and checkout mutations Clean authentication via Customer Account API Market-aware URLs for localized experiences Adding UCP support or similar agent-ready layers is an extension of the architecture, not a rewrite. What You Should Do While Big Platforms Regroup 1. Audit your data layer Can an AI agent query your product catalog via clean API? Or is your data trapped in theme templates? 2. Check your checkout safeguards Do you have clear boundaries for what automated systems can and can't do? Fraud detection? Liability clarity? 3. Make your capabilities machine-readable If you're on Hydrogen, you're most of the way there. The next step is declaring your capabilities in a format agents can discover. 4. Don't wait for platforms to figure it out The stores that win agentic commerce won't be the ones who waited for ChatGPT to solve catalog normalization. They'll be the ones who made their data clean, their APIs stable, and their checkout safe — before the next platform tries again. The Honest Take Agentic commerce is harder than the hype. The platforms with the biggest AI models just hit the wall. But the infrastructure layer still wins. If your store is machine-readable, API-first, and checkout-safe, you become the integration backbone for whichever platform eventually cracks it. The platforms quit early. That doesn't mean you should. Sources Juozas Kaziukėnas on ChatGPT abandoning agentic commerce: https://www.linkedin.com/posts/juozas_chatgpt-is-abandoning-agentic-commerce-its-activity-7435308306329473025-Ncy0 Kelly Goetsch on OpenAI deprioritizing commerce: https://www.linkedin.com/posts/kellygoetsch_feels-like-openai-is-quickly-losing-ground-activity-7435323329483460608-GgKK Shopify headless architecture: https://shopify.dev/docs/storefronts/headless

How to Set Up Color Swatches in Your Shopify Hydrogen Store
How to Set Up Color Swatches in Your Shopify Hydrogen Store If you're building a Hydrogen storefront with variant-heavy catalogs, swatches are one of the highest-impact UX improvements you can ship quickly. This guide walks through the full implementation path from Shopify Admin setup to production-ready React components. Color swatches transform the shopping experience by allowing customers to visualize product variants at a glance. Instead of reading through dropdown menus, customers see the actual colors—making purchase decisions faster and more intuitive. In this comprehensive tutorial, we'll walk through implementing color swatches in a Shopify Hydrogen store, from configuring the data in Shopify Admin to rendering the swatches in your React components using the modern optionValues API (released in 2024-07). Part 1: Setting Up Swatches in Shopify Admin Step 1: Access Product Variant Options Log in to your Shopify Admin Navigate to Products → Select a product with color variants Scroll to the Variants section Click Edit Options next to the "Color" option Step 2: Configure Swatch Data For each color value, you can set: Swatch TypeWhen to UseExample Solid Color (Hex)Single, uniform colors#FF0000 for Red Image UploadPatterns, textures, gradientsPlaid, Leopard print, Tie-dye Named ColorStandard CSS colors"Navy", "Tomato", "Teal" Best Practices for Swatch Configuration ✅ Use Hex Codes for Accuracy: #1E3A8A is more reliable than color names ✅ Optimize Swatch Images: Keep them under 200x200px ✅ Consistent Naming: Use "Navy Blue" across all products, not sometimes "Navy" ✅ Fallback Ready: If no hex is set, the code will attempt to parse the option name as a color Part 2: Querying Swatch Data with GraphQL The optionValues API Shopify's Storefront API provides the optionValues field—a dedicated, efficient way to fetch product option data including swatches. GraphQL Fragment Add this fragment to your app/graphql/fragments.ts: fragment ProductOption on ProductOption { name optionValues { name firstSelectableVariant { id availableForSale price { amount currencyCode } image { url altText } } swatch { color image { previewImage { # Optimize: Resize swatch images server-side url(transform: { width: 100, height: 100, crop: CENTER }) altText } } } } } Key fields: swatch.color: Hex code (e.g., #FF5733) swatch.image.previewImage: Optimized image for patterns/textures firstSelectableVariant: First available variant with this option—critical for navigation Using the Fragment in Product Queries query Product($handle: String!) { product(handle: $handle) { id title options { ...ProductOption } variants(first: 100) { nodes { id availableForSale selectedOptions { name value } } } } } Part 3: Building the React Components 1. Color Utility Functions Create helpers to handle edge cases like light colors on white backgrounds. // app/utils/colors.ts import { colord } from "colord"; /** * Validates if a string is a parseable color * Supports hex, RGB, HSL, and named colors */ export function isValidColor(color: string): boolean { return colord(color).isValid(); } /** * Detects if a color is "light" (brightness > threshold) * Used to add borders to white/cream/yellow swatches */ export function isLightColor(color: string, threshold = 0.8): boolean { const c = colord(color); return c.isValid() && c.brightness() > threshold; } Install the dependency: npm install colord 2. Swatch Component Create a reusable swatch component with local type definitions: // app/components/product/ProductOptionSwatches.tsx import { Image } from "@shopify/hydrogen"; import { cn } from "~/utils/cn"; import { isLightColor, isValidColor } from "~/utils/colors"; // Define types locally for better portability export type SwatchOptionValue = { name: string; selected: boolean; // Computed prop available: boolean; // Computed prop swatch?: { color?: string | null; image?: { previewImage?: { url: string; altText?: string | null; } | null; } | null; } | null; }; type SwatchProps = { optionValues: SwatchOptionValue[]; onSelect: (value: SwatchOptionValue) => void; }; export function ProductOptionSwatches({ optionValues, onSelect }: SwatchProps) { return ( <div className="flex flex-wrap gap-3"> {optionValues.map((value) => ( <SwatchButton key={value.name} value={value} onClick={() => onSelect(value)} /> ))} </div> ); } function SwatchButton({ value, onClick }: { value: SwatchOptionValue; onClick: () => void; }) { const { name, selected, available, swatch } = value; const hexColor = swatch?.color || name; // Fallback to name const image = swatch?.image?.previewImage; return ( <button type="button" disabled={!available} onClick={onClick} title={name} className={cn( "size-8 overflow-hidden rounded-full transition-all", "outline-1 outline-offset-2", selected ? "outline outline-gray-900" : "outline-transparent hover:outline hover:outline-gray-400", !available && "opacity-50 cursor-not-allowed diagonal-strike" )} > {image ? ( <Image data={image} className="h-full w-full object-cover" width={32} height={32} sizes="32px" /> ) : ( <span className={cn( "block h-full w-full", (!isValidColor(hexColor) || isLightColor(hexColor)) && "border border-gray-200" )} style={{ backgroundColor: hexColor }} > <span className="sr-only">{name}</span> </span> )} </button> ); } 3. Diagonal Strike-Through for Unavailable Variants Add this CSS utility to your app/styles/app.css: .diagonal-strike { position: relative; } .diagonal-strike::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom right, transparent calc(50% - 1px), #999 calc(50% - 1px), #999 calc(50% + 1px), transparent calc(50% + 1px) ); pointer-events: none; } 4. Using the Component In your route file, map the raw GraphQL data to the SwatchOptionValue type by calculating selected and available status. // app/routes/products.$handle.tsx import { useNavigate, useLoaderData } from "@remix-run/react"; import { ProductOptionSwatches, type SwatchOptionValue } from "~/components/product/ProductOptionSwatches"; export default function ProductPage() { const { product, selectedVariant } = useLoaderData<typeof loader>(); const navigate = useNavigate(); // 1. Find the color option const colorOption = product.options.find( (opt) => ["Color", "Colors", "Colour", "Colours"].includes(opt.name) ); // 2. Map raw data to component props // We need to calculate 'selected' and 'available' based on current context const swatches: SwatchOptionValue[] | undefined = colorOption?.optionValues.map((value) => { // Check if this is the currently selected value const isSelected = selectedVariant?.selectedOptions.some( (opt) => opt.name === colorOption.name && opt.value === value.name ); return { ...value, selected: !!isSelected, available: !!value.firstSelectableVariant?.availableForSale, }; }); const handleSwatchSelect = (value: SwatchOptionValue) => { // Navigate to the corresponding variant URL if (value.firstSelectableVariant) { navigate(`?variant=${value.firstSelectableVariant.id.split('/').pop()}`, { preventScrollReset: true, replace: true }); } }; return ( <div> {colorOption && swatches && ( <div className="space-y-2"> <h3 className="font-medium">Color: {selectedVariant?.selectedOptions.find(o => o.name === colorOption.name)?.value}</h3> <ProductOptionSwatches optionValues={swatches} onSelect={handleSwatchSelect} /> </div> )} </div> ); } Final checklist Before shipping, verify: Swatch data is configured for every color option in Shopify Admin Variant availability is reflected visually (disabled + strike-through) Light colors have visible borders Swatch images are optimized and transformed server-side URL/state updates correctly when users change swatches With this setup, shoppers can scan options faster, reduce misclicks, and reach purchase decisions with less friction.

Agentic Commerce in 2026: What Shopify Merchants Need to Know About ACP and UCP
Agentic Commerce in 2026: What Shopify Merchants Need to Know About ACP and UCP AI-assisted buying is no longer hypothetical. In 2026, commerce is shifting from search and click to ask and buy. For Shopify merchants, that means your storefront is no longer just a website — it’s a machine-readable commerce surface that AI agents can query and transact against. The Shift: from search UX to agent UX Traditional ecommerce optimization focused on: PDP design Checkout friction SEO rankings Agentic commerce adds a new layer: Structured product data API reliability Protocol compatibility If agents can’t parse your catalog cleanly, they’ll route buyers elsewhere. The Two Protocols: ACP and UCP ACP (Agentic Commerce Protocol) ACP powers AI-native buying flows like ChatGPT commerce integrations, including in-chat purchasing experiences. Source: https://openai.com/index/buy-it-in-chatgpt/ Docs: https://developers.openai.com/commerce/ UCP (Universal Commerce Protocol) UCP is positioned as a shared protocol direction for broader AI-discoverable commerce surfaces, including Google/Shopify ecosystem momentum. Source: https://www.htt.it/en/agentic-ecommerce-acp-ucp-shopify-ai-commerce/ Source: https://wearepresta.com/shopify-ucp-how-to-implement-2026-guide/ Context: https://shopify.com/news/ai-commerce-at-scale Practical merchant view: ACP and UCP are not mutually exclusive. ACP helps with AI-native checkout channels; UCP-style readiness helps with cross-agent discoverability. Opportunity: new demand channels AI agents are becoming a new demand interface between users and merchants. That changes where conversion starts. Instead of: user lands on homepage → browses → compares It becomes: user asks assistant → agent evaluates merchant data → transaction decision This rewards merchants with: clean catalog schema strong availability/pricing consistency dependable APIs Cost structure: what to watch In AI-assisted checkout channels, economics can include: platform/agent commission layers payment processing (e.g., Stripe rails) Exact percentages vary by channel and configuration, so merchants should model margin impact per channel before scaling. 4-step action plan for Shopify + Hydrogen merchants Normalize product data Standardize titles, attributes, variants, inventory, and pricing logic. Publish machine-readable commerce surfaces Prepare manifests/feeds/endpoints for agent parsing as standards mature. Harden API flows Keep product, cart, pricing, and availability APIs fast and predictable. Instrument conversion by channel Track AI-assisted sessions and compare CPA/margin vs paid channels. Why this matters for Weaverse users Hydrogen merchants are already API-first — that’s an advantage. At Weaverse, we’re aligning theme architecture for both human storefront conversion and AI-agent readability. Agentic commerce is still evolving, but the preparation window is now. Sources https://openai.com/index/buy-it-in-chatgpt/ https://developers.openai.com/commerce/ https://www.htt.it/en/agentic-ecommerce-acp-ucp-shopify-ai-commerce/ https://wearepresta.com/shopify-ucp-how-to-implement-2026-guide/ https://shopify.com/news/ai-commerce-at-scale
Never miss an update
Subscribe to get the latest insights, tutorials, and best practices for building high-performance headless stores delivered to your inbox.