1
Send one URL
One GET request with the page’s address and, if you want, the section by name. No browser to run, no scraper to write.
Design Extraction API
Shopify API
GET /v1/code25 credits/callTurn any website section into a Shopify section
The HTML to Shopify Liquid converter, as an API: point it at a section of any website and get back a .liquid file for your theme. Add it from the theme editor like any other section.
- 300 free credits a month
- Failed and repeat calls are free
- Works from ChatGPT, Claude and Cursor
1 file
drop it into sections/
Scoped CSS
safe next to your theme
Responsive
breakpoints and hover kept
How it works
From a URL to a file you can import
2
MiroMiro reads the live page
It loads every stylesheet and works out which rule wins for each element, the way a browser does.
3
Get it back, ready to use
One file to import, for 25 credits. A repeat call within 24 hours is free.
stripe.com · pricing section Download
sections/pricing.liquid
<div class="mm-k3f9a">
<div class="mm-div-1">…</div>
</div>
<style>
.mm-k3f9a .mm-div-1 { padding: 24px; }
</style>
{% schema %}
{ "name": "Pricing", "presets": [{ "name": "Pricing" }] }
{% endschema %}
Shopify file ready to importframework=shopify
One call
The API is the demo
One authenticated GET against any live URL. Typed JSON back.
Website to Shopify Section API
GET /v1/codeCoverage
What it captures
Found on the page
- .liquid section
- schema + preset
- scoped CSS
- responsive rules
- hover states
- web fonts
- section tokens
Formats you can ask for
- framework=shopify
Why this one
Section builders make you redraw the design block by block. This reads the section you already have on a live page and writes the theme file.
Compare alternativesParameters
What you can pass
Only url is required. Everything else narrows or reshapes the result.
urlrequired
any public URL
The page to extract from. With or without protocol (https:// is assumed).
framework
tailwind (default) · html · jsx · vue · elementor · shopify
The code you get back. tailwind returns markup with utility classes; html returns markup plus a companion stylesheet; jsx returns a React component; vue returns a single-file component.
section
hero · header · footer · pricing · features · testimonials · faq · cta
A part of the page by name, for callers that cannot see its markup (AI agents, mostly).
selector
any CSS selector
The section to extract, e.g. selector=%23hero or selector=.pricing-card - best taken from a previous response's sections list.
name
a component name
Component name for the jsx target - the identifier in "export default function ...".
theme
light (default) · dark
Which colour scheme to extract.
fields
field names
Comma-separated list of fields to return (e.g. fields=code,tokens).
render
true · false (default)
Load the page in a real browser and run its JavaScript before extracting.
fresh
true · false (default)
Skip the 24-hour cache and re-extract from the live page.
screenshot
true · full · false (default)
Requires render=true. The same real browser that renders the page also captures a screenshot - true for the 1440x900 viewport, full for the entire page height.
Every parameter, the response fields and the error codes are in the reference.
Agent-ready
Your agent can call this
“Get the hero section of allbirds.com as a Shopify section file for my theme.”
Step-by-step setup for your agent
ChatGPT
Claude
Claude Code
Codex
Cursor
Grok Bot
OpenAI dots
MuseUse cases
What you can build
Move a landing page into your store
Take the sections of a page built elsewhere and add them to your Shopify theme without rewriting the CSS by hand.
Prototype a section from a reference
Bring in a hero or feature grid you like, then adapt the copy and images in the theme code editor.
Agency handoffs
Give a client a working section file from their existing site on day one of a replatform.
FAQ
Before you integrate
How do I add the section to my theme?
Open the theme code editor (Online Store, Themes, Edit code), add a new section in the sections folder, paste the code field of the response into it and save. Then add it from the theme editor under Add section, where it is listed under the name of the site it came from. Do not paste it into a Custom Liquid block: that block is capped at 50 KB and cannot hold the schema at the end of the file.
Can I edit the text in the theme editor?
Not yet. The file has a schema with a name and a preset so it shows up in Add section, but it has no settings. You change the content in the code editor. The markup is clean and class names are short, so it is quick to find what you need.
Will it clash with my theme’s styles?
The CSS is scoped to a wrapper class unique to that section, and the wrapper resets the theme styles that usually leak into custom sections. The markup and CSS sit inside a raw block, so nothing in them is run as Liquid.
Is it responsive?
Yes. The breakpoint and hover rules of the original are written into the file as real CSS, and elements the source site fades in on scroll are emitted already visible.
What does it cost?
25 credits per section, the same as every other code format. Failed and blocked requests are never billed, a repeat call within 24 hours is free, and every key includes 300 free credits a month.
Does it work on sites built with JavaScript?
Yes. The page’s HTML and CSS are read first, which is enough for most sites. When a page only builds itself with JavaScript, or refuses a plain request, it is re-read in a real browser automatically at no extra cost. Add render=true to force the browser, for example for images that load on scroll: that costs 5 extra credits, on every plan including the free key.
Can it read pages behind a login?
No. It reads public pages the way a visitor without an account would see them. Pages that need a sign-in, and addresses on your own machine such as localhost, are out of reach.
Can my AI agent call it without code?
Yes. The same call is the extract_code tool on the MiroMiro MCP server. Connect ChatGPT, Claude, Cursor, Codex or another agent once, with a sign-in and no API key, and ask in plain language.
More about the Website to Shopify Section API
From a live URL to a Shopify section
The MiroMiro website to Shopify section API reads a section of any public web page and returns it as an Online Store 2.0 section file. It fetches the page, resolves every stylesheet it loads, works out which CSS rules actually apply to each element, and writes a .liquid file your theme can use. You send a URL and a section name. You get back a file.
What is inside the file
Clean markup inside a wrapper, a stylesheet scoped to that wrapper, the @font-face rules for the fonts the section uses, and a schema block with a name and a preset. Image and link URLs are absolute. The breakpoint and hover rules of the original are kept as real CSS, so the section behaves on a phone the way the source did.
Honest limits
It is one section at a time, edited as code, with no theme editor settings. It does not create products, collections or dynamic Liquid, so a product grid arrives as static markup. Images stay hosted where they were, and you will want to upload your own before going live.
Get your free API key
300 free credits every month, no credit card. One key unlocks every endpoint - brand, tokens, images, SVGs, fonts, and Lottie. Upgrade only when you outgrow the free tier.