Convert a live website section into a complete, responsive Shopify theme section built with Liquid.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install shopify-section
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install shopify-section using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Website to Shopify Liquid Section?
This Openclaw Skills integration uses the MiroMiro API to inspect a live webpage, resolve its real CSS, and generate a complete Shopify theme section file in .liquid format. It supports common storefront components such as heroes, headers, footers, pricing tables, feature grids, testimonials, FAQs, and calls to action.
The generated section contains its own scoped HTML, CSS, responsive behavior, hover styles, and Shopify schema so merchants can add it through the theme editor. Openclaw Skills users can provide a URL and optional section type, then save the returned code in their theme without manually rebuilding the design.
Website to Shopify Liquid Section Use Cases
- Recreate a hero section from an existing live website for a Shopify storefront.
- Convert pricing, features, testimonials, FAQ, CTA, header, or footer sections into Shopify Liquid.
- Prototype a storefront design based on a reference website.
- Migrate a section from a merchant's existing website into a Shopify theme.
- Extract a JavaScript-rendered section by retrying with
render=truewhen the initial result is incomplete. - Generate compatible alternatives in Tailwind, HTML, JSX, Vue, or Elementor when Shopify Liquid is not the final target.
How Website to Shopify Liquid Section Works
- Collect the source URL and, optionally, the requested section type:
hero,header,footer,pricing,features,testimonials,faq, orcta. - Call the connected
extract_codetool with the URL,framework: "shopify", and the selectedsection, or call the MiroMiro REST API with an authorization bearer token. - Review the response, including the complete
codefield and any discovered sections listed insections. Use the supplied selector when making a follow-up extraction; never guess a CSS selector. - If the result is thin or includes a
hint, retry the same URL once withrender=trueso client-side JavaScript can execute. Rendering adds 5 credits and should not be used on the first request. - Provide the entire
.liquidfile unchanged, using a descriptive filename such assections/stripe-pricing.liquid. - Add the file through Shopify admin or place it in a local theme repository, then preview it with the theme editor or Shopify CLI.
- Advise the merchant to replace copied text, logos, and images with content they own before publishing.
Website to Shopify Liquid Section Setup
- Obtain a MiroMiro API key at https://miromiro.app/api/onboarding. The free plan includes 300 credits per month with no card required. Never invent or expose a user's key.
- Set the key in the environment:
export MIROMIRO_API_KEY="your_api_key"
- Request a Shopify section through the REST API:
curl -s "https://miromiro.app/api/v1/code?url=allbirds.com§ion=hero&framework=shopify" \
-H "Authorization: Bearer $MIROMIRO_API_KEY"
- Save the returned
codevalue as a complete file under the theme'ssectionsdirectory, for examplesections/source-hero.liquid. - In Shopify admin, open Online Store → Themes → the theme menu → Edit code, select the
sectionsfolder, add a new section, paste the complete file, and save it. - Open Customize, select the target page, choose Add section, and select the generated section.
- Do not paste the output into a Custom Liquid block: that block is limited to 50 KB and cannot contain the section schema.
- For local Shopify CLI development, write the file to
sections/<name>.liquidand run:
shopify theme dev
shopify theme push
Each standard extraction costs 25 credits. A rendered retry costs an additional 5 credits. See the API documentation at https://miromiro.app/api/docs.
Website to Shopify Liquid Section Data Schema & Taxonomy
The API response and generated artifact are organized around the following fields and conventions:
| Field or file | Purpose |
|---|---|
url |
Live webpage supplied as the extraction source. |
framework |
Output target; use shopify for a Liquid theme section. |
section |
Requested component taxonomy: hero, header, footer, pricing, features, testimonials, faq, or cta. Omit it to request the hero by default. |
render |
Optional Boolean that enables JavaScript rendering for a retry when the initial result is incomplete. |
code |
The complete .liquid file, including the styled HTML block and Shopify schema. |
css |
Expected to be null because styles are embedded in the Liquid file. |
sections |
Discovered page sections and ready-to-use selectors for subsequent calls. |
theme |
Indicates the returned visual theme, including a requested dark variant when available. |
hint |
Diagnostic guidance that may indicate a rendered retry is appropriate. |
Generated files should be stored as sections/<descriptive-name>.liquid. The output includes scoped CSS to reduce conflicts with the surrounding theme, responsive and hover rules, and one primary styled HTML block. Text and images are embedded in the file and should be replaced with the merchant's own assets. A new extraction is required when changing the output format to tailwind, html, jsx, vue, or elementor.
Website to Shopify Liquid Section Advanced Features
- Supports connected
extract_codetools in Claude, ChatGPT, Cursor, and Codex, as well as direct REST API access for OpenClaw and other agents. - Automatically discovers other page sections and returns usable selectors instead of requiring manual CSS selector guessing.
- Uses an optional JavaScript-rendered retry with
render=truefor dynamic or initially thin pages. - Preserves responsive layouts, hover states, colors, fonts, spacing, and other resolved CSS characteristics from the source page.
- Generates scoped styles inside the Liquid file to minimize collisions with existing Shopify themes.
- Supports dark-theme extraction through
theme: "dark"when the source website provides a dark version. - Offers multiple output frameworks for the same source section, including Shopify Liquid, Tailwind, HTML, JSX, Vue, and Elementor.
- Fits both hosted Shopify editing and local Shopify CLI workflows with
shopify theme devandshopify theme push. - Provides a clear credit model: 25 credits per extraction and 5 additional credits for a rendered retry.
SKILL.md
Loading
Related Openclaw Skills
Website Section to Elementor Template
Convert a section of a live website into a styled, import-ready Elementor template for WordPress.
Clone Section
Clone Section extracts a live website section and turns its real styles and structure into code for your chosen framework or site builder.
Extract Assets
Extract Assets finds and returns images, SVGs, video, audio, and Lottie animation assets discovered on a live webpage.
Match Brand
Match Brand extracts a real website’s visual identity and design tokens so you can build new interfaces that fit its style.
NoMac: a Mac for your agent
NoMac gives your agent an administrator-enabled cloud Mac for macOS development, Xcode builds, iOS Simulator testing, and app delivery.
Uttera Audio & Voice
Use Uttera to transcribe, analyze, translate, and generate speech and audio through one Openclaw skill.
Featured*
