Blog
Notes from building an e-commerce brain for coding agents. What converts, what places, and what we measured.
Shopify conversion rate optimization: the twelve mechanics
Shopify CRO is twelve mechanics on the product page and cart: four raise the basket, three build trust, three settle the decision, two extend the range.
Cart drawer, free-shipping bar, sticky add-to-cart: no app
All three are theme code: a drawer fed by the Cart AJAX API, a free-shipping line computed from the cart total, a sticky bar on the product page. No app.
Shopify bundles and quantity breaks without an app
A bundle or quantity break without an app is a theme section showing the tiers with the unit price, plus a native automatic discount so the cart matches.
Improve an existing Shopify store with AI, no rebuild
Keep the page. Audit it, let your AI inherit the theme, add only the mechanics the audit names at the anchor it names, and read a per-section diff first.
Free Shopify store audit that gives a score: what it checks
A free audit reads one public product page, scores it out of 100 on six posts, pins each missing mechanic in place, and returns a prompt for your AI.
Connect Claude to Shopify: the three connections
Three connections share the name: Shopify's connector runs your admin, the Dev MCP teaches your AI the API, a sections MCP hands it the page.
Connect ChatGPT to Shopify: two different things
Selling inside ChatGPT is Shopify's catalogue feed and needs nothing from you. Working on your store from ChatGPT is a remote MCP in developer mode.
Claude Code on a Shopify store: what it can touch
Claude Code edits the theme you pull to disk (sections, snippets, JSON templates) and pushes it back with the Shopify CLI. It never touches checkout.
Build a Shopify store with AI: the eight steps
Set up Shopify, pull the theme to disk, hand your AI the docs and the selling sections, build one page at a time, preview on a phone, push unpublished.
AI Shopify store builder: what each kind hands back
An AI Shopify store builder returns a configured theme, a separate storefront, or files in your theme. All three miss the sections that sell.
Where do express checkout buttons go?
At the top of the checkout page, above the email field and above everything the buyer would otherwise type. The only advantage a wallet button has is that it removes the form, so one placed under the card form removes nothing. Show at most three, name the separator after what sits below it, and render nothing at all when no wallet is available.
Vibe coding a store: what breaks at checkout
Six things break between the code running and somebody paying: the cart forgets itself on reload, shipping appears at the last step, a rejected field cannot be corrected, the pay button submits twice, there is no order summary, and the VAT is wrong. Each one has a small fix and none of them shows up in local testing.
Trust badges on a product page: what to show, what to drop
A badge is worth its space only if it is clickable through to third-party proof, already recognised by the buyer, and attached to an objection this page actually raises. A drawn padlock passes none of the three. A row of six seals reads as a seller defending himself before anyone accused him.
The variant selector that does not lose the sale
A dropdown hides the options, and with them the price that changes and the size that is gone. Render every value as a visible radio below roughly seven per axis, group above that. An impossible combination is resolved by moving the other axis, never by accepting the click and then showing an error. The price updates in a reserved line with tabular figures so nothing moves.
The thank-you page is a component, not a receipt
The confirmation screen is the only place in a store where an offer cannot cost you the sale, because the sale is already paid. Answer the four questions the buyer arrived with first, in order, and put the offer under them. A second charge needs a second consent, a link to a new order needs none, and the page must never write the order itself.
The subscribe-and-save selector
Never pre-select the subscription. In the EU a default the consumer has to reject is not consent and the payment is reimbursable under Article 22 of Directive 2011/83; in the US the recurring charge needs express informed consent under ROSCA. The working shape is two explicit choices side by side, the one-time purchase visible and selectable, the saving written in currency, the frequency chosen before add-to-cart, and the cancellation terms in the card rather than behind a link.
The section order of a high-converting product page
A product page converts on the order of its sections: thing, price, button on the first screen, each objection answered as it arrives, nothing decorative.
The announcement bar, and when it costs you money
A sticky announcement bar takes a permanent slice of the mobile first screen, so it has to carry something the buyer can act on: a code that works, a real cut-off time, a shipping fact. It must be dismissible, remember the dismissal across pages, reserve its height so nothing shifts, and give the space back when closed. Message rotation fails because nobody reads the second one.
Stripe Checkout with Claude Code: the part nobody writes
An agent wires Stripe correctly in about ten minutes. What it leaves out sits on both sides of the button: the amount must be computed from your own records rather than posted by the browser, the webhook is the only place an order becomes real, and the same event will arrive twice so the write has to be idempotent. Then the page that leads to the checkout still does not exist.
Social proof when you have no customers yet
With zero reviews there are four honest proofs left and none of them is a star rating: proof by material, proof by method, proof by written commitment, and an honest counter. Inventing reviews is listed as unfair in all circumstances in EU law, and it is visible anyway. The component has to render a useful empty state instead of an empty carousel.
Shopify MCP: which server builds the store?
None. The Dev MCP hands your AI Shopify's docs, the Storefront MCP hands your catalogue to an assistant, admin servers move data. None renders.
Replace Shopify apps with code you own
The case for replacing an app with a component is not the monthly fee. It is that an app is a tenant: it renders inside your page, it can price per order rather than per month, and uninstalling it can take page content with it. The case against is honest too — some apps reach surfaces your code cannot.
How to raise average order value on a store you coded yourself
Average order value moves through four mechanics, and each one acts on a different share of orders: the quantity tier on the product page, the shipping threshold in the cart, the named complement above the totals, and the addition after payment. On a custom store all four are components, not subscriptions.
Post-purchase upsell without an app
On a store you coded yourself, a post-purchase offer is one of two things: a new order the buyer confirms, or an addition to the order just paid. The second needs a saved payment method and a fresh authorisation, and that is the whole difficulty. Everything else is layout.
Mobile ecommerce UX: what breaks at 390 px
At 390 pixels a product page has roughly one screen to work with, and five things routinely eat it: an announcement bar, an oversized hero, a chat bubble, a cookie banner and a newsletter modal. Design the first screen at 390 first, then let it grow — the reverse never survives.
The MCP servers worth installing for frontend work
Four are worth the config line. Chrome DevTools MCP so the agent looks at the rendered page instead of the code, Playwright MCP when the flow has to be driven repeatably, Figma Dev Mode MCP only if a Figma file already exists, and shadcn MCP as a transport to any component registry. Everything else on the shelf is an index.
Guest checkout: the field list that converts
Six inputs plus a payment method. Every other field on a guest checkout is either derivable from one you already have, or removable because nobody downstream reads it. Sort the whole list into keep, derive and remove, put the account offer after the payment, and write the autocomplete tokens, which is the single line of work that removes the most typing.
Exit-intent email capture, without a library
The detection is about fifteen lines: a mouseout with no relatedTarget and a clientY at or above zero. On a phone there is no exit intent at all, so the honest mobile trigger is scroll depth or idle time rather than a modal on arrival, which Google treats as an intrusive interstitial. Build the dialog on the native element, remember the dismissal, and never fire it on a checkout page.
Compare-at price: anchoring that is legal
In the EU, an announcement of a price reduction must state the prior price, and Article 6a of Directive 98/6/EC defines that prior price as the lowest one applied in at least the 30 days before the reduction. That single rule is what makes the permanent struck-through price a problem. The engineering answer is a price history, a reference computed from it, and a component that renders nothing rather than lie.
Claude Code product page: prompt or components?
A longer prompt improves the layout and leaves the section order and the missing mechanics exactly where they were, because with no constraint the model returns the arrangement it has seen most. A component is a decision already made and saved to a file. A prompt is an intention redrawn on every run.
A cart drawer component, in full
A cart drawer is a modal dialog, so it needs a focus trap, Escape to close, a scroll lock on the body that does not shift the page, and a live region that announces the line that just arrived. The contents survive a reload because you store SKUs and quantities, never prices. It opens by itself after an add from a product page, and it must not open after an add from a grid.
AI store builder or Claude Code?
The choice is not about which one renders a prettier page. It is about who holds the walls: a hosted builder keeps the page on its own servers and the store exists while you keep paying, while code an agent writes into your repository is yours whatever happens next. Both are right answers, for different situations.
A reviews section with real structured data
The stars in a search result come from AggregateRating markup, and Google's structured data policies require the marked-up content to be visible on the page. Markup describing reviews the visitor cannot see is a manual action waiting to happen, not a shortcut. Generate the JSON-LD from the same array the component renders, show the distribution rather than only the average, sort newest first, and emit no markup at all when there are no reviews.
A countdown timer that is honest
A countdown is honest when the deadline comes from the server, is identical for every visitor, and something real happens when it passes. A deadline stored in localStorage restarts per visitor, which makes the scarcity claim false. The code that matters is the endpoint that serves the deadline, a hook that recomputes from a target instead of decrementing, and an expired state that is not a bug.
A bundle builder component (build your own box)
A bundle builder is a box with a fixed capacity, not an open cart. The count is on screen at all times, the discount is stated as a rule before it applies and only applied once the box is full, and the price per unit is visible throughout. The add button stays visible and disabled with the reason attached, because a hidden button reads as a broken page.
Claude Code plugins, skills and MCP servers
A Claude Code plugin is a folder with a manifest that bundles slash commands, subagents, skills, hooks and MCP servers, installed from a marketplace repository. A skill is instructions the model reads. An MCP server is a process that runs and returns things the model did not have. The plugin is the envelope, and only the server inside it can hand over a file.
Checkout page design, field by field
A checkout page is designed by removal. Ship seven fields for a physical order, show the complete total including delivery before the final button, let people buy without an account, and label that button unambiguously, which in the EU is a statutory requirement rather than a style choice.
Add to cart button
An add to cart button names what is being added and carries the total whenever the selection above it can change the price: `Add 3 tins · $48.00`. It needs one pending state, one confirmation announced to assistive technology, a tap target of 44 CSS pixels, and no second button of equal weight beside it.
Shopify upsell without an app, or with one: the split
On a Shopify theme an upsell is one section plus one native discount, no app. An app earns its fee only for the post-purchase offer, after payment.
Sticky add to cart on mobile
The sticky add to cart bar appears only once the inline button has scrolled out of view, never beside it, and it carries the selected total rather than a generic label. Pad with env(safe-area-inset-bottom), keep the button out of the tab order while hidden, hide it above 768px.
shadcn alternatives that don't look generated
Swapping the library does not fix it. What reads as generated is the untouched default: the stock radius, the stock ring, the stock neutral scale, and every shadcn alternative ships defaults of its own. What each one changes, and the four values to overwrite before you judge it.
Lovable SEO depends on one date
Whether a Lovable site is crawlable depends on when the project was created. Since 13 May 2026 new apps render on the server; older ones are client-only and rely on pre-rendering served to verified crawlers, which is why an SEO scanner sees an empty page and Google does not.
SaaS landing page sections that convert
A SaaS landing page section earns its place by killing one objection, and the order of the sections is the order the objections arrive in. That is the whole rule. Here are the objections in sequence, the section that answers each, and the four sections AI-generated pages ship that answer nothing.
Quantity breaks that raise average order value
Quantity breaks ask which one; a stepper asks how many. Ask a coding agent for a \"buy 2, save 15%\" selector and it returns a stepper, and we did: ChatGPT and Perplexity both returned one on 25 August 2026. That difference is the whole mechanic.
Order bump that is legal in Europe
One named item, one price, one reason, one box that starts unchecked, above the totals and below the cart contents. Article 22 of Directive 2011/83/EU requires express consent to any payment beyond the main obligation, so a pre-ticked yes is refundable. Never a carousel.
Lovable vs Claude Code, the real difference
Lovable is a hosted platform that owns the whole chain: chat, code, build, hosting, domain. Claude Code is an agent in your terminal, working on a repository you already own, and it hosts nothing. That is the real choice, and neither one knows how to make a page sell.
Lovable Shopify, what the integration actually does
Lovable builds the storefront; Shopify keeps checkout, payments and inventory. The mechanics that raise the basket sit on Lovable's side, yours to add.
Lovable alternatives and what they all miss
The alternatives to Lovable (Bolt, v0, Replit, Base44, and agents like Claude Code) differ on one axis that decides the rest. Does the code live on their servers, or in your repository? On what they build they converge, and not one of them puts the selling mechanics on the page.
Frequently bought together, done right
One complement, not a grid of six, and the pairing comes from the product itself rather than a recommendation engine. If the label claims buyers pair the two items, that is a factual claim about your order data. Without the data, offer the complement and say why it fits.
Free shipping threshold bar
Set the free shipping threshold against your margin, not because the number is round, and show the remainder in money: \"$6.00 to unlock free shipping\" is an instruction, a percentage is a conversion the buyer has to run. Never render the bar in an empty cart.
Ecommerce conversion rate optimization without traffic
Below roughly forty thousand sessions per variant a split test cannot separate effect from noise. Ship the mechanics whose absence is a known defect.
Claude Code design skills, and what they miss
Six Claude Code design skills exist. We installed four and read their source. impeccable ships 27 deterministic anti-pattern rules that run with no model at all. UI UX Pro Max ships 161 reasoning rules and 67 styles. Not one of the six knows what a cart is.
Why every AI generated landing page looks alike
Because a model with no constraint converges on the median of its training corpus. Indigo, Inter, three cards, one radius, a violet gradient. The tells are known and fixable. The part nobody covers is the commercial version of the same failure, where the sameness costs money.
Where to place an ecommerce upsell
Below the add-to-cart, never above it. One complement, never a carousel, priced well under the item in the cart, and never a step the customer must clear to continue. Never pre-ticked either. In the EU, Article 22 of the Consumer Rights Directive makes an inferred yes refundable.
shadcn ecommerce blocks: what exists, what's missing
Five registries ship shadcn ecommerce blocks: CommerCN, shadcnblocks, shadcnstore, shadcnstudio and Tailwind Plus. Read on 24 August 2026, none lists the four components that build a basket: quantity tier, free-shipping bar, chained complement, sticky mobile add-to-cart.
shadcn MCP and ecommerce UI components
shadcn MCP browses any shadcn-compatible registry you declare, which is the only real route from an agent to ecommerce components today. MCP ecommerce means two opposite things: agents that shop inside a store, and servers that hand a developer components. The second family is nearly empty.
MCP server for conversion rate optimization
No MCP tells you where to put a button. What exists splits into three families: measurement (Microsoft Clarity, PostHog, Chrome DevTools), experimentation (GrowthBook) and heuristic audit. Which family to connect, and the sample size below which a test proves nothing.
Serveurs MCP Shopify et e-commerce : l'inventaire réel
Le serveur MCP Shopify (shopify/dev-mcp) est un connecteur de données, comme les 21 serveurs e-commerce du registre officiel interrogé le 24 août 2026. Zéro serveur pour composants UI, landing page, test A/B ou vente additionnelle. L'inventaire réel, et trois vérifications avant d'en brancher un.
Image generation MCP server for Claude Code
Two installable image generation MCP servers today. shinpr's mcp-image adds in one line with claude mcp add and edits your real product photo through inputImagePath. replicate-mcp, Replicate's own, reaches many models. The official registry returns zero.
How to give AI design taste
With material, not adjectives. A taste skill such as impeccable, Anthropic's frontend-design or UI/UX Pro Max moves the output by forbidding known defaults, 59 deterministic detectors in impeccable's case. A real reference image moves it further, and almost nobody supplies one.
Claude Code ecommerce skills, what actually exists
One skill is actually about commerce: Medusa's ecommerce-storefront, installed with /plugin marketplace add medusajs/medusa-agent-skills. The rest of the first page is general design skills that never mention a cart. Each install command, and the three gaps none of them fill.
Bundle quantity selector component for React
The React implementation, in full: a RadioGroup over a tier array, the props, the accessibility markup, the selected and focus states, the mobile layout and the button binding. The commercial reasoning behind the tiers is a separate page.