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
Reactions
Join the Discussion
Continue Reading
More insights from the Weaverse team
ChatGPT Paused Agentic Commerce. Smart Storefront Teams Should Prepare Anyway.
ChatGPT Paused Agentic Commerce. Smart Storefront Teams Should Prepare Anyway. This week, two strong commerce voices pointed in the same direction: Juozas Kaziukėnas: ChatGPT users researched products in-chat, but purchase behavior lagged. Kelly Goetsch: OpenAI appears to be deprioritizing commerce near-term while they regroup around enterprise complexity. So yes, the hype cooled down. But no, the opportunity didn’t disappear. What Actually Broke The problem wasn’t “AI can’t sell.” The problem was trying to force checkout at scale before the infrastructure was ready. 1) Catalog normalization at internet scale To transact safely, agents need clean and current product data across every merchant: pricing inventory variants shipping and delivery constraints That standardization is expensive and operationally hard. 2) Behavior gap: research is easy, buying is hard People are comfortable asking AI for recommendations. They’re still less comfortable letting AI finalize payment flow. That trust gap has existed in previous platform cycles too. 3) Risk controls weren’t mature enough Commerce stack partners need stronger safeguards for: AI-initiated errors fraud and abuse vectors liability ownership when transactions fail Without these controls, platforms default to “send traffic to retailer site” instead of in-chat checkout. Why This Still Matters for Shopify Teams A platform pause doesn’t remove the long-term direction. It just changes the short-term winner profile. The winners now are teams that strengthen the infrastructure layer: structured product data stable APIs explicit checkout guardrails machine-readable capability exposure That’s exactly where headless teams can compound advantage. Why Hydrogen Teams Are Better Positioned Hydrogen storefronts already operate on API-first patterns: queryable Storefront data programmable cart/checkout integrations predictable auth and routing flows That means “agent-ready” is usually an extension of your system—not a full rebuild. 30-Day Readiness Plan (No Hype, Just Execution) If you run Shopify + Hydrogen, do this now: Normalize catalog data fix inconsistent variant naming enforce price/inventory freshness rules Harden checkout boundaries define what automation can and cannot do add explicit fraud/error controls Improve machine readability expose capabilities through clear API contracts reduce theme-layer data leakage Instrument trust metrics track handoff drop-off from AI-assisted journeys monitor conversion from “AI research” to “checkout start” Bottom Line Agentic commerce is not dead. It’s in the messy infrastructure phase—where most teams lose patience. If you use this window to clean data, harden checkout, and improve machine-readable architecture, you won’t be reacting when platforms re-prioritize commerce again. You’ll be ready first. Sources Juozas Kaziukėnas on ChatGPT commerce pullback: 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 docs: 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.
