What you are connecting
Product view and add-to-cart are captured by the Web Pixel on every theme. The theme app embed provides the session cookie bridge and behavior analytics. Connect the Shopify app for one-click Web Pixel install for full checkout → purchase reporting.
| Component | What it does | Required for |
|---|---|---|
| Shopify Customer Privacy | Store-wide consent banner | Behavior analytics and aggregated heatmaps after consent |
| Theme app embed | App embed in Theme Editor — no manual code edits; removed automatically on uninstall | Sessions, page views, scroll/pointer signals, cart session bridge |
| Shopify Web Pixel | Product view, cart, checkout, and purchase events from Shopify's checkout sandbox | Full commerce funnel (product view → cart → checkout → purchase) |
| 100 Rocks Shopify app | OAuth + one-click Web Pixel install | Auto pixel install (write_pixels scope) |
| Product page block | Optional product template block for approved 100 Rocks PDP variants | Showing approved variants in controlled product page tests |
1. Configure Shopify customer privacy
100 Rocks reads Shopify Customer Privacy as the canonical processing decision before behavior collection. You do not install a separate 100 Rocks consent banner on production Shopify themes.
- For Shopify's native banner: Shopify admin → Settings → Customer privacy, then enable the banner for your regions.
- If you use a compatible consent app, keep it enabled and confirm that it synchronizes choices to Shopify Customer Privacy.
- Ensure shoppers can accept or decline analytics with equally prominent choices.
- No consent-provider setting is required in 100 Rocks.
2. Enable the theme app embed
This is the recommended installation method. The tracker is managed by Shopify and removed automatically when the app is uninstalled — no code left in your theme files.
- Shopify admin → Online Store → Themes.
- Next to your live theme, click Customize.
- In the left panel, open App embeds (the puzzle-piece icon).
- Find 100 Rocks Analytics in the list and toggle it on.
- Click Save in the top-right corner.
Optional: add the Product page block
Add the 100 Rocks Product page block when you want 100 Rocks-approved Experimentation variants to render on your live product template. The block keeps a manual fallback layout, so your product page remains usable even when no test is running.
- Shopify admin → Online Store → Themes → Customize.
- Open a product template.
- Add the 100 Rocks Product page / PDP Container app block to the template.
- Choose the fallback layout you want shoppers to see when no test is active.
- Save and preview a product page before publishing theme changes.
Verify the embed
Alternative (headless storefronts): open 100 Rocks → your project → Advanced counter settings → Manual theme snippet, copy the production snippet, and paste it immediately before </body> in layout/theme.liquid.
- Open your storefront in a private/incognito window.
- Accept analytics in the configured Shopify-compatible banner.
- Browse one or two pages.
- In 100 Rocks → your project → Counter, confirm Tracker live or Receiving events = Yes.
3. Connect the Shopify app
OAuth connects the 100 Rocks app for one-click Web Pixel install and theme app embed lifecycle.
Purchase attribution comes from Web Pixel checkout_completed only — no order webhook.
- In 100 Rocks → your project → Counter, complete the consent provider and theme app embed first.
- Expand 2. Commerce funnel — Web Pixel + Shopify app.
- Click Connect Shopify app (OAuth).
- Confirm status shows App connected.
- Do not use Shopify admin Settings → Notifications → Webhooks for this setup.
4. Web Pixel and privacy settings
The Web Pixel runs in Shopify's sandbox. Configure Customer privacy on the 100 Rocks app before checkout events will flow.
Privacy settings (required)
Your storefront privacy notice should disclose 100 Rocks as an analytics processor, the analytics categories you enable, retention, and how shoppers can exercise privacy rights. Copy and adapt the standard wording in the Consent & privacy overview. Behavior analytics should not be enabled until your notice, consent mechanism, and any required DPA are in place.
- Shopify admin → Settings → Apps and sales channels.
- Open 100 Rocks → Customer privacy.
- Permission: select Required.
- Purposes: check Analytics only. Leave Marketing and Preferences unchecked.
- Data sale: select Data collected does not qualify as data sale.
- Save.
Install the Web Pixel
- In 100 Rocks → your project → Counter, expand 2. Commerce funnel — Web Pixel + Shopify app.
- Click Install Web Pixel automatically (requires Connect Shopify app from step 3).
- If automatic install is unavailable, expand Manual fallback, copy the snippet, and paste it in Shopify Settings → Customer events → Custom pixels.
- Save if you used the manual fallback.
Verify pixel
- Add a product to cart and reach checkout (payment not required).
- In 100 Rocks → your project → Counter, check Last pixel event — it should show a recent timestamp.
- Purchase appears in the commerce funnel when the pixel fires checkout_completed on the same bridged session.
Express checkout (optional)
Standard product views and add-to-cart need no theme markup — the Web Pixel handles them on every theme. For Shop Pay or Apple Pay buttons on the product page, you can optionally add data-100rocks-commerce="express-checkout" to the button element.
Dev and test stores only
Do not use the Dev / test install (footer loader) on production shopper themes. Production stores must use the theme app embed (or manual snippet if headless) with consent synchronized to Shopify Customer Privacy.
Need help?
See Troubleshooting for common install and data issues.
See Actions & CTAs for automatic detection and optional named-action markup.
For consent and legal details, see Consent & privacy overview.