Install FigPii on Shopify

Installing FigPii On Shopify

This guide covers a complete Shopify installation. Follow the steps in order — several of them depend on the one before.

What a complete installation involves

FigPii on Shopify has three components. They do different jobs, and installing one does not replace the others.

Component	What it does	Required?
Tracking code in `theme.liquid`	Runs A/B experiments, records heatmaps and session recordings, tracks on-site goals	Yes — nothing works without it
Shopify app + App Embed	Tracks orders and revenue server-side via Shopify webhooks	Yes, for any store measuring revenue or purchases
Custom pixels	Tracks funnel events server-side tracking cannot see — add to cart, view cart, remove from cart, search	Optional

The most common installation problem we see is a store with the app installed but no tracking code, or the tracking code installed but App Embed switched off. Either leaves you with a partial setup that appears to be working.

Step 1 Install the FigPii Shopify app

Install the FigPii app from the Shopify App Store, then log in or register through the app to connect it to your FigPii account.

One app connects one Shopify store to one FigPii domain.

Already had FigPii installed before? Server-side order tracking requires permissions that earlier versions of the app did not request. Re-open the app and accept the new permissions. Without this the app will look connected while sending no order data.

Step 2 Enable the App Embed

Enable the FigPii App Embed in your theme. This is what allows the app to send order and revenue data to FigPii server-side.

Server-side tracking is more reliable than browser-based order tracking: it doesn't depend on a script loading successfully, isn't affected by ad blockers, and doesn't rely on the visitor reaching the order confirmation page.

Step 3 Add the tracking code to your theme

Although the app can install the tracking code automatically, we recommend adding it manually to theme.liquid. Shopify's app-injection method offers less control over placement, and placement materially affects performance and flicker.

To retrieve your tracking code:

Log in to FigPii.
Click Tracking ON / Tracking Stopped / Tracking OFF in the top-left corner.
Click Copy Code.

Your code will look like this:

html

<code><!-- FigPii Asynchronous Tracking Code --> <script>!function(){var n=document.createElement('script');n.crossOrigin='anonymous',n.async='async',n.src='https://tracking-cdn.figpii.com/1888276374.js',document.head.append(n),window._fpEvent=window._fpEvent||[]}();</script> <!-- End FigPii Asynchronous Tracking Code -->

The number in that URL — 1888276374 in this example — is your access key. Make a note of it; you'll need it again if you set up custom pixels in step 7.

To add it to your theme:

In Shopify, go to Online Store → Themes.
Click Actions → Edit code on your live theme.
Under Layout, open theme.liquid.
Paste the tracking code immediately after the opening <head> tag.
Save.

Placement matters. The earlier the code runs, the faster FigPii can apply your variations, and the less chance a visitor sees the original page before the variation appears.

Working on a duplicated theme? Add the code to your live theme. Code added to an unpublished theme has no effect until that theme is published.

Step 4 Add the anti-flicker snippet

Strongly recommended for Shopify stores. Shopify themes typically load a substantial amount of third-party code, which delays when FigPii can apply a variation and increases the chance visitors briefly see the original page first.

The anti-flicker snippet hides the page until FigPii is ready, then reveals it.

html

<code><!-- FigPii Anti-Flicker Snippet --> <style>.fp-hide{opacity:0!important;}</style> <script>(function(w,h,c,v,t,a,o){h.className+=" "+c;o=w[v]=w[v]||[];o.show=a=function(){h.className=h.className.replace(RegExp(" ?"+c),"")};setTimeout(function(){a();o.show=null},t)})(window,document.documentElement,"fp-hide","_fpHide",4500);</script> <!-- End FigPii Anti-Flicker Snippet -->

Two rules for this snippet:

It must sit in <head> before the FigPii tracking code.
It must be hardcoded directly into the page, never added through Google Tag Manager or any other tag manager. A tag manager loads after the browser has begun rendering, which is too late for the snippet to do its job.

See Anti-Flicker Script and The Flicker Effect.

Step 5 Define your order and revenue goals

Enabling App Embed sends the data; these goals record it. In FigPii, open Site Goals and create the following:

Goal Name	Goal Type	Match Type	Event Value
Shopify Purchase	Custom Event	Exact Match	`shopify_purchase`
Shopify New Customer Purchase	Custom Event	Exact Match	`shopify_new_customer_purchase`
Shopify Returning Customer Purchase	Custom Event	Exact Match	`shopify_returning_customer_purchase`

New customers are those with exactly one order in their history; returning customers have two or more.

What is excluded: exchanges, returns and draft orders are automatically excluded from order tracking. If draft-order invoices are a significant share of your revenue — common on B2B and wholesale stores — your FigPii revenue figures will be lower than your Shopify totals by roughly that share. This does not affect experiment validity, since the exclusion applies equally to your control and variations.

Add these goals to experiments using the Saved Goals dropdown.

Step 6 Verify the installation

In FigPii, click Tracking Inactive in the top bar and select Verify Installation. The status can take up to an hour to change from Inactive to Active.
Place a test order on your store and confirm the Shopify Purchase goal registers a conversion.
If you added custom pixels in step 7, check Settings → Customer events in Shopify — each pixel should show data in the Data column, not a dash.

Do not launch experiments until tracking shows as Active. Data collected before that point may be incomplete.

Step 7 Custom pixels for funnel events (optional)

Server-side tracking covers orders and revenue. If you also want to measure add to cart, view cart, remove from cart or search as goals, those require Shopify custom pixels.

Full instructions are in Tracking Ecommerce Events on Shopify.

Excluding internal traffic

Add your office and staff IP addresses to the IP filter in your domain settings so internal activity doesn't skew results. See How can I exclude internal traffic from data collection?