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, and 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, the CSS variables, and every stylesheet, and 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.

What separates a real clone from a screenshot match

Anyone can get a section that looks right in a screenshot. A section you actually own does three more things:

• 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’s the single most common paste-time failure. Ask Claude to validate the schema before handing you the file, and the paste just works.

The one rule that keeps this clean

Clone the structure, the styling, and 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 files to Claude, and 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.

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.