How to clone any Shopify page with Claude Code

To clone a page into Shopify with Claude Code: download your theme, grab the reference section’s code, hand both to Claude, and rebuild it one section at a time as clean, editable Liquid. You keep the layout and the styling. You bring your own copy and images. This works on any Online Store 2.0 theme, not a specific one.

This is the exact method we use on real cloning work, generalized so you can run it yourself. No page builder, no theme lock-in. The output is yours to edit forever.

What you need first

Four things:

• Your target theme, downloaded from Shopify as a .zip.
• The reference page you want to match (a live URL or a design file).
• Claude Code.
• Your own copy and images. You’re cloning the structure, not stealing someone’s content, which we’ll come back to.

Step 1: Give Claude Code your theme

In Shopify admin, go to Online Store → Themes → ⋯ → Download theme file. Unzip it and open the folder in Claude Code.

This step is the one most tutorials skip, and it’s the one that matters most. Claude reads your theme’s real structure: how its sections are built, which snippets exist, how the cart drawer opens, what the buy-button markup looks like. A cloned section that ignores that wiring looks right and then breaks the moment someone adds it to the cart. Feed the real theme, and the section fits it.

Step 2: Grab the reference

There are three ways to capture the page you’re matching. Pick by what you have.

The grabber script (the precise way)

On the reference page, right-click the section you want and choose Inspect. In the elements panel, click the section’s outermost <div class="shopify-section …"> so it becomes the selected node. Then paste this into the Console and hit Enter. It reads the section’s markup and the CSS variables, walks every stylesheet, then saves a section-bundle.txt.

/* Shopify Section Grabber — select the section's outer node in Inspect first */
(async () => {
  const node = (window.$0 && $0.closest && $0.closest('.shopify-section'))
    || document.querySelector('.shopify-section');
  if (!node) { alert('Select the section node in the Elements panel, then re-run.'); return; }
  const out = [`/* selected: ${node.id || '(no id)'} */`];
  const push = (h, body) => out.push(`\n${'='.repeat(20)} ${h} ${'='.repeat(20)}\n${body}`);
  push('SECTION OUTER HTML', node.outerHTML);

  const vars = [];
  const cs = getComputedStyle(document.documentElement);
  for (const p of cs) if (p.startsWith('--')) vars.push(`${p}: ${cs.getPropertyValue(p).trim()};`);
  push(':ROOT CSS VARIABLES', [...new Set(vars)].sort().join('\n'));

  const assets = [];
  document.querySelectorAll('link[rel="stylesheet"][href]').forEach(l => assets.push(l.href));
  for (const url of [...new Set(assets)]) {
    try { out.push(`\n/* FILE: ${url} */\n${await (await fetch(url)).text()}`); }
    catch (e) { out.push(`\n/* FAILED: ${url} (${e.message}) */`); }
  }
  const blob = out.join('\n');
  const a = document.createElement('a');
  a.href = URL.createObjectURL(new Blob([blob], { type: 'text/plain' }));
  a.download = 'section-bundle.txt'; a.click();
  console.log(`section-bundle.txt ready (${blob.length} chars).`);
})();

It works by reading the live Document Object Model, so what you capture is exactly what the browser renders, not a guess.

Saving the page

Faster and rougher: right-click the page, choose Save As, pick “Webpage, Complete.” You get an HTML file and an assets folder. Hand that to Claude. It carries more noise than the script, but for a simple section it’s enough.

Exporting from Figma

If the design lives in Figma rather than a live site, a Figma-to-code plugin exports the layout, and you import that as your reference. Best when you’re building from a mockup, not copying something already online.

Step 3: Rebuild it section by section

Don’t ask for the whole page at once. Hand Claude one section at a time: the reference bundle, a screenshot (desktop and mobile if they differ), and one line describing what it is. Ask for a single self-contained .liquid section file.

One at a time isn’t slower in practice. It’s easier to check each piece against the reference, and every finished section becomes a pattern you can reuse on the next page.

How long a clone actually takes, and why

Faster than you would guess. We have delivered finished client page clones in three hours, and our published turnaround for a fixed-price clone is 48 hours, which is deliberately padded to cover the back and forth on assets rather than the build itself. The build is rarely the slow part. Compare that with a landing page designed from nothing: ten to eleven hours of our time, and five or six of those go on research before a single line of code exists, pulling competitors out of the Meta Ads Library, reading their page structures, working out which patterns are actually carrying the conversion. The build afterwards is four or five hours.

Sit those two numbers next to each other and the real explanation appears. Cloning is not faster because the code is easier. It is faster because the expensive part has already been done by someone else. A page that already converts is a page where the layout decisions, the objection order, the proof placement, the offer framing were all settled by somebody spending real money on traffic to find out. You are skipping the research, not the work. That is the entire economic argument for cloning, and it is why a reference page is worth more than a design brief.

The catch worth naming: this only holds if the reference is genuinely proven. Clone a page you simply liked the look of and you inherit none of the advantage, only the speed. Pick something you have seen running as an ad for months, and the odds change.

What separates a real clone from a screenshot match

Anyone can get a section that looks right in a screenshot, and screenshots are a low bar. A section you actually own does three more things, and the gap between those two outcomes is most of what separates a clone that becomes an asset from one that becomes a maintenance problem six weeks later. The distinction matters more than it sounds, because both versions look identical on the day they ship. You only find out which one you got the first time somebody on your team wants to change a headline.

• Pixel-identical by default. Out of the box it matches the reference, no configuration needed.
• Fully editable. Every meaningful element, text, colour, font, spacing, image, mobile behaviour, is a setting in the theme editor. Your team changes it without touching code.
• Self-contained. One file, with its own scoped CSS and JS and its own {% schema %}. No edits to the rest of the theme, no external libraries. Nothing else can break it, and it can’t break anything else.

Skip those and you have a brittle copy. Build them in and you have an asset. This is the same standard behind our store and page cloning work, and the reason we don’t ship page-builder clones.

The pre-flight that saves you a Shopify error

Before you paste, check the section’s {% schema %}. It has to be valid JSON, with no duplicate setting ids and correct types. A malformed schema throws Shopify’s FileSaveError the second you try to save the file, and it is the single most common paste-time failure by a wide margin. Ask Claude to validate the schema before handing you the file, and the paste just works. This is worth building into your prompt permanently rather than remembering each time, because the failure is silent until the exact moment you try to save, and by then you have lost your place in the flow. A schema check costs one sentence. The error costs a round trip.

The other pre-flight worth running is a settings audit. Every piece of text a human might reasonably want to change should appear in the schema as a setting, and the fastest way to check is to read the schema rather than the markup. If a headline is sitting in the Liquid as a literal string, it is not editable. You will be back in the code the first time marketing wants a different word. Ask for it explicitly: every visible string exposed as a setting, sensible defaults, one preset so the section can be added from the theme editor without configuration.

The one rule that keeps this clean

Clone the structure, the styling, the behaviour. Bring your own copy, images and brand. Layout and design patterns aren’t protected, and rebuilding them is normal. A brand’s actual content and assets are protected, and scraping them isn’t cloning, it’s copying. The conceptual side of cloning, including where the legal line sits, goes deeper if you want it.

FAQ

Do I need to know how to code?

Not to run the method, but it helps to read what comes back. You paste a script, hand the files to Claude, then paste the result into your theme. Knowing enough to sanity-check the output is the difference between a smooth clone and a confusing one.

Which themes does this work on?

Any Online Store 2.0 theme. The method reads your specific theme first, so it adapts to Dawn, Impulse, or whatever you run, rather than assuming one.

Is cloning a page legal?

Reusing layout and structure, yes. Copying a brand’s content, images or identity, no. Clone the bones, fill them with your own everything.

How long does one section take?

The first section on a new theme is slower because the theme gets analysed once. After that, sections go fast because the groundwork is done.

Can Claude clone a whole page at once?

It can try, but don’t. Section by section gives cleaner, checkable, reusable files. One giant file is harder to fix and harder to trust.

How fast is a page clone really?

We have shipped finished client clones in three hours. The published 48-hour turnaround is padded for asset back-and-forth, not build time. Building the same page from scratch runs ten to eleven hours because of the research.

What usually goes wrong?

A malformed schema blocking the save, and hardcoded text that should have been a setting. Both are caught by asking for schema validation and a settings audit before you paste.

Want the clone done properly instead of doing it yourself? Our fixed-price page clone does exactly this, any page rebuilt into your theme for $149 in 48 hours. Send us the reference and we’ll rebuild it into clean, editable sections. Usually a reply within the hour.