Framer plugin
The Framerce plugin connects your Framer project to your Shopify store and manages component installation.
How it works
The plugin runs inside Framer and:
- Fetches the component manifest from the Framerce CDN
- Creates wrapper code files in your Framer project for each component
- Injects the bootloader into your site's
<head>(store config + runtime script)
Components then appear in your insert menu, ready to drag onto the canvas.
Plugin modes
| Mode | Description |
|---|---|
| Setup | Enter store credentials, connect to Shopify |
| Components | Browse and install/update components |
| Settings | Configure analytics, markets, advanced options |
Update components
When Framerce releases new component versions:
- Open the plugin
- Components with updates show a badge
- Click Update to pull the latest version
The plugin re-writes the wrapper code file, which triggers Framer to recompile the component.
Component not updating?
Close and reopen the Framer insert menu. If the old version persists, remove the component from your canvas and re-add it from the insert menu.
Bootloader
The bootloader ensures store data is available before any component renders. The plugin injects it into your site's <head>:
html
<!-- Preconnect for performance -->
<link rel="preconnect" href="https://cdn.framerce.com">
<link rel="preconnect" href="https://your-store.myshopify.com">
<!-- Store configuration -->
<script type="application/json" id="framerce-config">
{"shopDomain":"...","storefrontAccessToken":"...","apiVersion":"2026-01"}
</script>
<!-- Runtime library -->
<script type="module" src="https://cdn.framerce.com/v1/core.js"></script>What's next
- Layout & Slots — Compose components into custom layouts
- Components Overview — Browse all available components