Connect and manage your Shopify store

Connect Shopify with a public Storefront API token, sync products into Framer CMS, and keep your published storefront settings up to date.

1. Prepare Shopify Headless

  1. In Shopify admin, install the Headless sales channel and create a storefront.
  2. Open Storefront API → Manage permissions.
  3. Enable unauthenticated_read_product_inventory for stock components and unauthenticated_read_bundles for bundle blocks.
  4. Copy the public Storefront API token and your permanent myshopify.com domain.
Use the public Storefront token. Do not enter an Admin API token or a private Storefront token.

2. Connect in Framer

  1. Open FrameStoreKit from Framer's Plugins menu and sign in to your FramerHub account.
  2. In onboarding, enter your shop domain and public token. Add a custom store domain if needed.
  3. Select Test connection. The plugin validates access before saving.

The connection belongs to this Framer project. Use the setup walkthrough for the CMS collection and product sync steps.

3. Sync products and install the site script

Open the plugin from Framer CMS to create the managed Products collection and run your first sync. Free stores can sync up to 15 products; a paid license assigned to the connected store unlocks the paid features.

The plugin installs your saved connection through Framer's site custom code. If a CMS action cannot write site code, reopen the plugin from the canvas and use Manage → Domains & runtime → Retry site script update.

Newly inserted components use auto connection fields so they follow your saved settings. Publish the Framer site after installing or updating the script.

Optional customer login

Choose Skip for now in the Customer accounts onboarding step if you only need the storefront. Pro and Lifetime users can enable login now or later in Manage → Customer accounts.

Customer Account login requires its own public Client ID and registered site URLs. Follow the Customer Account setup guide.

Update credentials after onboarding

  1. Open the plugin from the Framer canvas.
  2. Go to Manage → Connection.
  3. Edit the shop domain or Public Storefront API token.
  4. Select Save changes. The plugin validates the new connection.
  5. Check Manage → Domains & runtime for the script status, then publish your Framer site.

Updating the token for the same store preserves the saved Customer Account Client ID and published site URL. Changing to another Shopify store clears the old Client ID; configure customer login for the new store separately.

For the published site URL, use Manage → Domains & runtime and select Save site URL. For Customer Account credentials, use Manage → Customer accounts.

How script updates work

Every successful settings save replaces the FramerHub runtime snippet with the current values. Existing FramerHub runtime copies are removed before one replacement is written, so repeated saves do not add duplicate scripts. Unrelated custom code is preserved.

For component instances inserted with an older plugin, change explicit connection values in the property panel to auto to follow future updates. Explicit values continue to override the shared settings.

Saving updates the project's site code. Publishing makes the change available to visitors.

Free-plan branding

Free stores display a Powered by FrameStoreKit button near the bottom-right corner of the published site, above Framer's own badge. It links to FrameStoreKit pricing.

Applying a Pro or Lifetime license to the connected store removes the FramerHub badge from the site code. Publish again to update the live site.

When a script update fails

  1. Reopen the plugin from the canvas.
  2. Open Manage → Domains & runtime.
  3. Select Retry site script update.
  4. If the script is disabled, enable it in Site Settings → Code.
  5. Publish and test your storefront.

A script failure can leave settings saved while the site still needs an update. You can retry without re-entering your credentials. A successful CMS sync remains successful even if Framer denies the script write.

Disconnect a store

Use Manage → Danger zone → Disconnect store. The plugin removes the connection and requests removal of its runtime and badge snippets. CMS products stay in Framer. Check Site Settings → Code if Framer denies removal, then publish the change.