Quickstart
From an empty Framer project to a working storefront — install the app, pair your store, drop in a component and import your catalog.
Set it up
- Install the Shopify app
Add Framerlink to your store from the Shopify App Store. The app's home page in your Shopify admin shows an onboarding checklist that tracks these same steps.
- Start your subscription
Open the app's Plan page and pick Monthly or Yearly. Pairing requires an active subscription — see Billing & plans for details.
- Open the plugin in Framer
In your Framer project, open Plugins → Framerlink. You'll land on the Connect to Framerlink screen.
- Pair your store
In the Shopify admin, copy your store name from Pairing Setup and click Generate Pairing Code. Enter both in the plugin and press Login. Codes expire after 15 minutes — the full flow is covered in Pairing your store.
After pairing, the plugin loads your product catalog automatically and the home screen unlocks: Components, Brand, and the CMS sync tools.
Add your first component
- Open Components from the plugin home screen.
- Find Product Card and drag it onto the canvas (or click to insert).
- The component lands in your project as a code file named
FL_product_card.tsx, already wired to your store.
Every component is a real Framer code component — resize it, restyle it from the properties panel, and combine it with your own layouts. See How components work for what's happening under the hood.
Import your catalog
To power CMS-driven pages (product grids, collection pages), mirror your catalog into the Framer CMS:
- Open the CMS panel in Framer and choose Framerlink as the source.
- Review the defaults — fields, collections and filters are all adjustable.
- Click Import Products.
The import creates a Shopify Products collection (plus Shopify Collections), and the button shows live progress while items land. Full details in Importing products.