Select it on the page
Open PocketUI on any website and drag over the section you want.
Shopify export · coming soon
Website to Shopify convert any HTML section into a Shopify Liquid section
Select any section on any website. Get a Liquid section with schema, blocks and presets, editable in the theme customizer.
Early supporters get 30% off their first year. No spam, ever.
Shopify demo video · coming soon
How it works
Three steps from a website to Shopify
Captured1 / 5
HTML structure
PocketUI captures the real thing
Not a screenshot: its structure, authored CSS, states and breakpoints, saved to your library.
CtrlV
Paste it into Shopify
Add the section to your theme. It shows up in the customizer with its own settings.
Steps 1 and 2 work today. The Shopify step is coming soon.
Shopify
What lands in Shopify
Capture
From any live website
No Liquid written by hand. Select the section on the page and it becomes a theme section.
Section captured
What lands
A real Liquid section
Schema, blocks and presets included, so merchants edit it in the customizer like any theme section.
pricing.liquid1 / 6
Section· pricing
Responsive
Responsive, already set
Desktop, tablet and mobile styles come from the site's own CSS.
Library
Every capture, kept
It is also saved to your library, in a folder you name by idea, so you can find it again.
Image
Tailwind
Figma
Palette
Screenshot
Image
Tailwind
Figma
Palette
Screenshot
React
Image
Font
Aa
HTML
Image
React
Image
Font
Aa
HTML
Image
SVG
Vue
Palette
Page
Image
SVG
Vue
Palette
Page
Image
Every export
One capture, every platform
Capture a section once and send it wherever the project lives. Each export has its own page.
Convert a website section to Shopify, in short
PocketUI is a design inspiration tool and Chrome extension that saves any section of a live website as real code. Its Shopify export, coming soon, will turn that saved section into a Liquid section file with schema, blocks and presets for Online Store 2.0 themes, so merchants can edit it in the theme customizer without touching code.
Shopify export questions
No, a Chrome extension. You select the section on the live website and get a Liquid section file for your theme.
Yes. The export is a standard section with schema, blocks and presets, which is what Online Store 2.0 themes use.
Yes. Text, colors and blocks are exposed as settings in the theme customizer.
Open PocketUI on the page, select the section you want, choose Shopify as the export, and add the Liquid file it gives you to your theme's sections folder. It then appears in the theme customizer.
Yes. PocketUI reads the section's real HTML and CSS and writes a Liquid section around them, with the text, colors and repeated items exposed as settings and blocks.
It targets Online Store 2.0 themes, such as Dawn and the themes built on it, because those support sections on every page.
Use it to learn from layouts and to move your own or your clients' designs into Shopify. Text, images, logos and brand assets on other people's stores stay their property, so replace them with your own.
Shopify export is coming soon, on the Studio plan or the Shopify pack. Figma and code export already work on every plan.
Stop recreating designs you've already seen
Join now and get 30% off your first year as an early supporter.
One email on launch day. That's it.