How I Build Shopify Landing Pages Now (Figma + Claude Code)

The fastest way we've found to build ecommerce landing pages: design the page in Figma, hand the mock-up to Claude Code inside the Shopify theme repo, and let it build the page as native Liquid blocks. Hands-on time is a few minutes. The build itself ran in the background for 30 to 45 minutes while I did other things.

Here's the full walkthrough on a real page:

The Workflow

• Design the whole page in Figma first. The complete landing page, laid out exactly how it should look.
• Export the mock-up as one image and drop it into Claude Code, running inside the repo that holds the full Shopify theme.
• Claude breaks the design into blocks. It reuses theme blocks that already exist and builds new ones only where the design needs something new.
• Everything ships as native Liquid. Real sections and blocks, editable in the theme like anything else. No page builder, no embeds.

The reuse step is what makes this fast. If the theme already has a testimonial block or a comparison table, there's no reason to rebuild it. Claude maps the mock-up against the existing block library, writes a build plan, and only creates net-new sections. I read the plan before it starts, because I don't always agree with what it thinks it should do, and it's much cheaper to redirect at the plan stage than after the build.

Claude Pulls Its Own Assets From Figma

The piece that removes the most manual work: Claude Code has API access to Figma. Along with the exported mock-up, I give it the Figma link, and it downloads every image and asset it needs on its own. No exporting assets one by one, no renaming files, no uploading to Shopify by hand.

That's the difference between babysitting a build and letting it run. This one went 30 to 45 minutes in the background. It hit one snag along the way: while trying to QA its own work it started attempting to log into Shopify, so I stopped it, pointed it back on track, and it figured out how to push the page in correctly. That's a realistic picture of where this workflow is right now. It runs mostly alone, and occasionally needs a nudge.

The QA Pass Is Just Screenshots

Once the page is live in the theme, QA is a visual check on desktop and mobile. Anything that looks off, the fix loop is the same every time: screenshot it, drop the screenshot into Claude Code, describe the problem in a sentence. Alignment off? Screenshot. Section broken on mobile? Screenshot. While it works on one fix you keep scanning for the next.

In this build that loop caught a misaligned section, a mobile layout issue, and a bug where adding a product kicked the visitor back to the homepage instead of staying on the landing page. Each one was a screenshot and a sentence, fixed while I kept reviewing. The build gets you to about 80 percent; the QA loop takes it to 95 and up. What's left is judgment calls on spacing and sizing that you'd be tweaking in any workflow.

Why Native Liquid Blocks Matter

Landing page builders get you a page, but it lives outside your theme: separate hosting, separate styling, another subscription, and usually a page speed penalty you pay for in ad performance. Building straight into the theme means the page uses your existing styles and components, loads like the rest of the store, and anyone on the team can edit it in the Shopify customizer later. And because the blocks are reusable, every page you build this way makes the next one faster.

This is the same pattern we keep finding with Claude Code across the agency: give it real access to the systems (the theme repo, the Figma file, the product catalog and brand voice for email copy, the Klaviyo API for list operations) and it stops being a chatbot and starts being a builder.

Watch the full build in the video on YouTube. If you want landing pages built like this for your store, reach out.