Setup
Install the Coframe app from the Shopify App Store, connect the store, install the scripts and confirm it is live, with a migration step for stores that installed Coframe by hand
Copy this guide and your current settings as a prompt for your AI agent.
Preview agent promptSee the guide, code and settings included when you copy.
A one-time setup, about ten minutes, with no theme code changes. Nothing reaches shoppers until step 5, and that step is reversible from Disconnect this store in the app.
On this page
01Before you start
| Check | Detail |
|---|---|
| Store access | Sign in to Shopify as the store owner, or as staff with permission to install apps |
| Existing install | If the store already runs Coframe from a hand-installed script or custom pixel, this is a migration: do the two removal steps first |
| Credentials | The project ID (24 hex characters) and the conversion API key (cfpv1_…), both issued by Coframe |
02The six steps
| Step | What happens on the storefront |
|---|---|
| 1. Remove the script (manual installs only) | Nothing yet |
| 2. Delete the pixel (manual installs only) | Nothing yet |
| 3. Install the app | Nothing yet |
| 4. Connect the store | Nothing yet |
| 5. Install the scripts and save the theme | Coframe starts rendering |
| 6. Verify | — |
03Migrating from the manual install
Do this before installing the app. The app delivers the script and the pixel itself, so the manual copies have to come out first. Leaving them in place runs two copies of Coframe on every page: duplicate session and conversion events, two sets of variants competing to apply, and experiment results you cannot trust.
Remove the script from the theme
Go to Online Store → Themes → … → Edit code and open
layout/theme.liquid. Delete the Coframe <script> tag, the one pointing
at edge.cofra.me/cf.js, and click Save. Do this on the live theme
and on any theme planned for publishing. Remove only that script tag;
everything else in <head> stays.
Delete the manual custom pixel
Go to Settings → Customer events, open the custom pixel added for
Coframe, usually named coframe-tracking, and delete it. The app installs
and manages its own web pixel; keeping this one would double-count every
checkout.
04Install, connect and switch on
Install the app
Signed in to the Shopify admin, open the Coframe listing at
https://apps.shopify.com/coframe-app-prod and click Start for free.
Shopify shows what the app can access: view customer data, view staff and
contributor data, and view and edit store data.
Settings and permissions explains
each one. Review them, then click Install.
Connect the store
Open the Coframe app in the admin. On Connect this store to Coframe, paste the project ID and the conversion API key, then click Connect store. Four things happen: the key is verified with one call against your Coframe project; the order webhooks are subscribed server-side; the web pixel is installed in Shopify’s sandbox; and the storefront is left untouched.
Install the scripts
The Overview reads Not live on storefront, three of four steps complete. Click Install Coframe Scripts. Nothing is copied, pasted or configured, and no theme code is edited, but the step finishes in the theme editor, which opens in a new tab.
Save the theme
The theme editor opens on App embeds with the Coframe embed already switched on. “This app embed doesn’t have customizable settings” is expected. The embed does not go live until the theme is saved: click Save, top right. Back in the Coframe tab, the app detects the change on its own and flips Coframe scripts to Done. Closing the editor without saving installs nothing; click Install Coframe Scripts again to reopen it. The same panel is always reachable from Online Store → Themes → Customize → App embeds.
Confirm the store is live
The Overview flips to Live on storefront and all four stages turn green. Connection health should read:
| Integration | Expected state | What it confirms |
|---|---|---|
| API key | Configured | The store is authenticated against the Coframe project |
| Order webhook | Active | Server-side order and checkout events are forwarding |
| Web pixel | Installed | Checkout events are reported from the pixel sandbox |
| Coframe scripts | Installed | The storefront is serving the SDK, verified end to end from the public script URL |
The last one only turns green once the storefront actually serves the script.
Then prove it yourself on the storefront: Verify and troubleshoot.
Once the install is verified, the Coframe team takes it from there. Experiment setup, variants and conversion reporting all happen in Coframe; nothing further is needed in the Shopify admin.
# Setup Install the Coframe app from the Shopify App Store, connect the store, install the scripts and confirm it is live, with a migration step for stores that installed Coframe by hand A one-time setup, about ten minutes, with no theme code changes. Nothing reaches shoppers until step 5, and that step is reversible from Disconnect this store in the app. ## Before you start Check | Detail | Store access | Sign in to Shopify as the store owner, or as staff with permission to install apps | Existing install | If the store already runs Coframe from a hand-installed script or custom pixel, this is a migration: do the two removal steps first | Credentials | The project ID (24 hex characters) and the conversion API key (`cfpv1_…`), both issued by Coframe | ## The six steps Step | What happens on the storefront | 1. Remove the script (manual installs only) | Nothing yet | 2. Delete the pixel (manual installs only) | Nothing yet | 3. Install the app | Nothing yet | 4. Connect the store | Nothing yet | 5. Install the scripts and save the theme | Coframe starts rendering | 6. Verify | — | ## Migrating from the manual install [Video: Video: removing the hand-installed script tag and the manual custom pixel before installing the app (45s, narrated)](assets/videos/shopify-app-migrate.mp4) Watch: 45s — removing the hand-installed script tag and the manual custom pixel before installing the app Do this before installing the app. The app delivers the script and the pixel itself, so the manual copies have to come out first. Leaving them in place runs two copies of Coframe on every page: duplicate session and conversion events, two sets of variants competing to apply, and experiment results you cannot trust. Remove the script from the theme Go to Online Store → Themes → … → Edit code and open `layout/theme.liquid`. Delete the Coframe `<script>` tag, the one pointing at `edge.cofra.me/cf.js`, and click Save. Do this on the live theme and on any theme planned for publishing. Remove only that script tag; everything else in `<head>` stays. Delete the manual custom pixel Go to Settings → Customer events, open the custom pixel added for Coframe, usually named `coframe-tracking`, and delete it. The app installs and manages its own web pixel; keeping this one would double-count every checkout. ## Install, connect and switch on [Video: Video: installing the app, connecting the store, installing the scripts, saving the theme, and the Overview turning live (118s, narrated)](assets/videos/shopify-app-install.mp4) Watch: 118s — installing the app, connecting the store, installing the scripts, saving the theme, and the Overview turning live Install the app Signed in to the Shopify admin, open the Coframe listing at `https://apps.shopify.com/coframe-app-prod` and click Start for free. Shopify shows what the app can access: view customer data, view staff and contributor data, and view and edit store data. [Settings and permissions](../docs/settings-and-permissions.html) explains each one. Review them, then click Install. Connect the store Open the Coframe app in the admin. On Connect this store to Coframe, paste the project ID and the conversion API key, then click Connect store. Four things happen: the key is verified with one call against your Coframe project; the order webhooks are subscribed server-side; the web pixel is installed in Shopify’s sandbox; and the storefront is left untouched. Install the scripts The Overview reads Not live on storefront, three of four steps complete. Click Install Coframe Scripts. Nothing is copied, pasted or configured, and no theme code is edited, but the step finishes in the theme editor, which opens in a new tab. Save the theme The theme editor opens on App embeds with the Coframe embed already switched on. “This app embed doesn’t have customizable settings” is expected. The embed does not go live until the theme is saved: click Save, top right. Back in the Coframe tab, the app detects the change on its own and flips Coframe scripts to Done. Closing the editor without saving installs nothing; click Install Coframe Scripts again to reopen it. The same panel is always reachable from Online Store → Themes → Customize → App embeds. Confirm the store is live The Overview flips to Live on storefront and all four stages turn green. Connection health should read: Integration | Expected state | What it confirms | API key | Configured | The store is authenticated against the Coframe project | Order webhook | Active | Server-side order and checkout events are forwarding | Web pixel | Installed | Checkout events are reported from the pixel sandbox | Coframe scripts | Installed | The storefront is serving the SDK, verified end to end from the public script URL | The last one only turns green once the storefront actually serves the script. Then prove it yourself on the storefront: [Verify and troubleshoot](../docs/verify-and-troubleshoot.html). Once the install is verified, the Coframe team takes it from there. Experiment setup, variants and conversion reporting all happen in Coframe; nothing further is needed in the Shopify admin.