The AI Shopify development workflow I use on real client projects. From one prompt to a deployed Shopify section and a working Klaviyo email flow, end to end. Includes the starter prompt you can paste into your own Claude Code today.
This is the workflow I use to ship Shopify tooling for clients in hours instead of days. One prompt into Claude Code, a live section deployed to a draft theme, and a working Klaviyo flow firing automated emails. No manual file uploads. No copy-paste between tools.
The video walkthrough
Direct link if the embed does not load: Watch on YouTube.
What this workflow ships
By the end of the build you have:
- A new page on your Shopify storefront with a custom Liquid section
- An animated background video pulled from your Shopify file library
- A section schema the merchant can configure from the theme editor
- A working Klaviyo flow triggered by a custom event that Claude Code registered automatically
- UTM tracking on the email so you can measure which campaign brought which lead
Time to ship: an afternoon, including iteration on the design.
The stack and why
| Tool | Role | Why this one |
|---|---|---|
| Claude Code | Dev surface | Local filesystem access, scaffolds Liquid + schemas + JS |
| Shopify AI Toolkit | The bridge | Gives Claude write access to your theme and Klaviyo API. The unlock. |
| Shopify Horizon theme | Storefront | Clean section model, Online Store 2.0 |
| Klaviyo | Email flow | First-class API and segmentation for Shopify |
| motionsites.ai | Design seed | Copyable prompts for disruptive landings |
| Google AI Studio + NanoBanana | Background image | Iterate the still until the vibe is locked |
| Higgs Field | Background animation | Animate the still into a seamless loop |
Required prerequisite: the Shopify AI Toolkit must be installed and wired into your Claude Code before any of this is reproducible. Watch the Shopify AI Toolkit Setup walkthrough first.
The five stages, high level
1. Design pipeline
Pull a landing page reference from motionsites.ai. Each one has a Copy button that exports the exact prompt to regenerate that design in any frontier model. Your aesthetic foundation is done in two clicks.
For the animated background, seed an image in Pinterest, iterate it in Google AI Studio with NanoBanana until the vibe is locked, then animate it in Higgs Field with a tight prompt: no camera move, no zoom, no text, seamless loop. Drop the clip into your Shopify file library.
2. Duplicate your theme
Before you let Claude Code touch your store, duplicate your live theme and work in the draft. The Shopify AI Toolkit writes files directly to whichever theme it has access to, and you do not want a half-finished section pushed to your live storefront.
3. Prompt Claude Code
Paste the design prompt from motionsites as your base layer, then stack the constraints that matter. Theme name, page goal, schema settings, the math the section needs to compute, accessibility requirements, and where to pull the background video from. Be specific about inputs and outputs. The starter prompt is below.
Claude does not hand you files to deploy manually. It writes the section, the schema, and any JavaScript directly to your draft theme. The new files appear in the Shopify theme editor in minutes.
4. Iterate
V1 will look rough. Always. Iterate with Claude on the logic, tune the theme settings for visuals, do not drop into raw CSS until the editor genuinely cannot get you there. When the flow works and the design is not embarrassing, ship it. Polishing past that point is how projects die in pre-launch.
5. Wire the Klaviyo flow
Pre-requisite: your Klaviyo account is connected to Shopify. Create a list, set Consent to single opt-in, and create a flow with an API trigger. The custom event Claude registered when it built the section is already in the dropdown. Toggle Enable Re-Entry, save, then add an email node, enable UTM tracking with explicit parameters, and go live.
End-to-end smoke test, and you are done.
The starter prompt
This is the prompt template I paste into Claude Code at the start of any custom Shopify section build. Adapt the bracketed sections to your project. The structure is the part that matters.
Context:
I am working on a Shopify store using the [THEME NAME] theme.
The Shopify AI Toolkit is installed and wired into Claude Code.
I am in a duplicated draft theme. Never push to live until I validate.
Goal:
Create a [SECTION TYPE: lead-gen calculator / comparison table / wizard form / pricing tool] section that [ONE-SENTENCE PURPOSE].
Page setup:
- New page on the storefront, slug: [PAGE SLUG]
- Custom template assigned to this page only
- Background video pulled from the Shopify files library, asset filename: [VIDEO FILENAME]
Inputs the merchant will configure via the theme editor:
- [Input 1: type, label, default]
- [Input 2: type, label, default]
- [Input 3: type, label, default]
Outputs the section will compute or display:
- [Output 1, including formula if applicable]
- [Output 2]
Calculation logic, if any:
[Plain English description of the math, with variable names]
Constraints:
- Accessible: WCAG AA, keyboard navigable, prefers-reduced-motion respected
- Uses theme color tokens. Never hardcoded colors.
- All copy comes from schema settings. Never hardcoded text.
- Mobile-first, responsive
- No external CDN dependencies
If the section captures leads, also wire it to Klaviyo:
- Custom event name: [EVENT_NAME_IN_SNAKE_CASE]
- Properties to send: [list of properties]
- Fire the event via the Klaviyo client-side track API on form submit
- Register the event metric so it appears in the Klaviyo Flow trigger dropdown
Deliverables:
1. A new section file in /sections/
2. A schema block with all merchant-configurable settings
3. Scoped JavaScript in /assets/, only if interactivity is needed
4. The page template in /templates/
5. Klaviyo event registered via the toolkit
Then deploy to my draft theme and tell me the storefront preview URL.Three things make this prompt work where vague ones fail:
- Context up front. Claude knows the theme, the toolkit availability, and the safety constraint (draft theme only).
- Inputs and outputs named explicitly. This is the difference between a pretty section and a working tool.
- Klaviyo wiring is in the same prompt. Claude registers the event during the build, so the metric exists in Klaviyo by the time you go to wire the flow. No "why is my custom event missing" debugging.
Drop this into Claude Code, fill the brackets, and you will have a deployable Shopify section in your draft theme inside an hour.
When to hire this out
If you build on Shopify and the workflow above is your daily operating system, keep going. Subscribe to the channel for the next AI workflow drop.
If you run a Shopify Plus store and want this kind of tooling shipped for you instead of building it yourself, book a discovery call. Custom calculators, lead-gen tooling, migration calculators, and Klaviyo-wired forms are the kind of build I run for clients every week.
About the author: Mael is a Shopify Plus architect operating as Maelify. Builds custom Shopify Plus tooling, migrations, and AI-assisted dev workflows for merchants and agencies in English, Spanish, Portuguese and Mandarin.