$99 lifetime on AppSumo · Limited timeWe've partnered with AppSumo: get wpgraft for life for $99, one payment. Limited time, only on AppSumo.
Get the dealDiscount codes land here first.
Members get offers on wpgraft, plus build tips and early word on what is shipping next.
FramerAny published Framer site
ShopifySections and blocks in your theme editorMove a page from Framer to Shopify as an editable theme section, not a screenshot or an embed. What comes across, and what does not.
wpgraft needs no access to your Framer account, no export file and no API key. It reads the page as your browser rendered it: the real elements and the real computed styles on each one, at every width you ask for. It then builds that as a Shopify section made of theme blocks, with every style in one of the blocks’ own settings. Nothing that arrives depends on Framer still being there.
Framer has no way to export a design to Shopify, and Shopify has no way to import one. So this is not an export: you open the published Framer page, point at the part you want, and it is written into your Shopify theme from what was on screen. The Framer site keeps running the whole time, so you can move one section at a time.
wpgraft is a Chrome extension. Get it from wpgraft.com/releases. Install it, click the icon, sign in. Copying needs an account with a paid plan, which you can choose from wpgraft.com/#pricing. On your very first copy it asks you to confirm you have the right to reuse what you are copying, once, and does not ask again.
There is no Shopify app to install and nothing to subscribe to. The extension writes the copy into your theme from the Shopify admin you are signed in to in Chrome, as you.
The *.framer.app or *.framer.website URL, or your own domain, not the Framer editor.
Click the wpgraft icon on the source tab and pick your destination under Copy into. There is one Shopify entry, labelled Shopify. Switch Also copy tablet & phone on unless you only want the desktop layout: it is off until you turn it on, and it captures three viewports instead of one, so the copy arrives responsive.
Select element starts a picker: hover to highlight, press ↑ to widen the selection to the parent and ↓ to narrow it again, click to confirm, Esc to cancel. Whole page takes the entire document in one pass. wpgraft scrolls the page for you first so lazy images and scroll-triggered effects have fired, then waits for the fonts and images to finish before it reads anything.
Sign in at admin.shopify.com. For a section, open the theme editor (Online Store → Themes → Customize) on the page it belongs on, the home page or one of your pages: the section is added after the sections that page already has. For a whole page, any admin page will do, because it becomes a new page of its own.
When the copy is ready, the box wpgraft shows on the page you copied from has an Add to Shopify now button once wpgraft is allowed on admin.shopify.com. Otherwise click the wpgraft icon and press Add in Shopify on the copy, and allow it when Chrome asks. The extension works in your admin tab with your own session, making the same requests the admin itself makes. The first time, it adds the wpgraft section and its blocks to the theme. It then has Shopify check the copy before anything else is created, uploads the images to your store’s Files, and writes the copy into the theme open in the theme editor, or your live theme when no editor is open: a section goes onto the page open in the editor, and a whole page, or a section with no editor open, becomes a new hidden page with a template of its own. The admin tab then opens the theme editor on it.
Look it over in the theme editor. A new page is created hidden, so shoppers do not see it until you make it visible under Online Store → Pages. A section added to the page open in the editor is already in that page’s template. Press Save in the theme editor after your own changes, as for any edit there.
This is where the product earns its keep. Click any block in the theme editor and its settings open with the copy’s real values in them. Change the heading, pick a different image from your Files, change the padding at desktop, tablet or phone width.
A Shopify section built from theme blocks
The copy is one wpgraft section, and every box, text, image and icon inside it is a theme block you can select in the theme editor’s sidebar, nested the way the page was.
Every style is a setting
A block’s CSS properties are its own settings, so its padding, width, font and colours are fields you change in the sidebar, with hover fields beside them, and tablet and phone variants for the properties that usually change with the screen. A declaration with no field of its own goes into the block’s More CSS box rather than being dropped.
Images in your Files
The images are uploaded to your store’s Files and the blocks point at Shopify’s copies. An image Shopify could not fetch keeps its original address.
Kept apart from your theme’s styles
The section resets what it would inherit and sets every element inside it back to the browser’s defaults before its own styles apply, so your theme’s heading and button styles do not restyle the copy, and the copy does not restyle your theme.
After the insert: Look it over in the theme editor. A new page is created hidden, so shoppers do not see it until you make it visible under Online Store → Pages. A section added to the page open in the editor is already in that page’s template. Press Save in the theme editor after your own changes, as for any edit there.
The *.framer.app or *.framer.website URL, or your own domain, not the Framer editor.
A guide that only lists what works will waste your afternoon. These are the things that surprise people, set out before you start rather than discovered afterwards.
javascript: link in the source page is emptied during the capture, before anything reaches Shopify. It is the one thing wpgraft will not carry across for you.<iframe> is kept as the embed it is, inside an HTML block, pointing at the same address. wpgraft does not descend into it, which is also why a builder’s own editor canvas and an AI chat’s artifact preview have to be opened on their own URL before you can copy them.No. Nothing is installed from the Shopify App Store and there is nothing to subscribe to. The extension writes the copy from the Shopify admin you are signed in to in Chrome, as you, with the same requests the admin itself makes.
The one open in the theme editor. With no theme editor open, your live theme, where it arrives as a new page that is created hidden, so shoppers do not see it until you make it visible. To try a copy without touching the live theme, duplicate the theme and open the duplicate in the theme editor first.
Shopify holds at most 512 KB of content on one page, and a long page with many images and styles can need more. It is a Shopify limit, not a fault in the copy. Copy the page a section at a time with Select element, and add each section to the same page in the theme editor.
Adding a copy changes the theme, so the account needs the Themes permission. Sign in as the store owner, or ask the owner to give you that permission under Settings → Users.
No. Nothing is exported, moved or deleted. wpgraft reads the rendered Framer page the same way any browser does and writes a new copy into Shopify. Your Framer site keeps running exactly as it did, which is what lets you rebuild one section at a time and switch over when you are ready.
No. What lands is a wpgraft section in your own theme, with the images uploaded to your store’s Files. There is no embed and no stylesheet loaded from Framer; the one exception is an image Shopify could not fetch, which keeps its original address.
Editable. Every box, text and image is a theme block with its own settings in the theme editor’s sidebar, and every CSS property of a block is one of those settings. A part that goes deeper than Shopify allows becomes an HTML block, which you edit as HTML. Before release, copies were added to a real store from its admin, and the theme editor rendered them with every block opening on its own fields.
Yes, once you switch Also copy tablet & phone on. It is off by default, and with it off you get the desktop layout only, slightly faster. With it on, wpgraft measures the page three times: at your window’s own width, then at 768px, then at 375px. The tablet and phone values go into each block’s own fields: a block has Use different styles ≤991px and ≤767px switches, with tablet and phone fields for the 35 properties that change between breakpoints, such as display, width, padding, font size and text alignment, and a More CSS box per breakpoint for anything else. One honest caveat about the measurement: the Web Store build produces the narrow viewports inside the page rather than by resizing the window. It re-evaluates every media query at the target width, pins the layout width, resolves vw units and clamps position: fixed boxes to it, and the result is measured at 100% of the property values a real 768px and 375px window produces on getbootstrap.com and on a stock WordPress theme. What it cannot do is re-run the source site’s own JavaScript for the new width, so a layout a script computes on resize is copied as the desktop script left it, and the capture says so in a warning.
Every plan is paid; there is no free tier and no trial. Pro is $20 a month or $180 a year, and Lifetime is $299 once. Each one includes every destination, whole-page copies as well as sections and elements, and unlimited copies at full fidelity, with nothing watermarked or downgraded. If it does not work for what you build, ask within 7 days of the charge and 90% of the plan price comes back.
That depends on whose page it is and what you copy. Your own site, your own client’s site, a template you have licensed, or your own design on a platform you are leaving. None of that is in question. Somebody else’s design is a decision you are making, and wpgraft asks you to confirm you have the right to make it before your first copy. Text, images, fonts and icons all carry their own licences, and they travel with the copy.
Read moreThe layout, usually yes. The words, photos and logo inside it, no. Take the shape, bring your own content, and you are on the safe side of the only line that really matters.
Read the postNot legal advice: the post says so too, and says why.
Other ways into Shopify
Other places Framer can go
Every destination unlocked, full fidelity, on every plan. Point at one Framer section, put it in Shopify, and judge the result inside the refund window.
