How to connect a Webpixel in a Remix App?

Shopify Discussion

Topic summary

A developer is attempting to automatically connect a Webpixel extension during Shopify app installation in a Remix application.

Current Status:

  • Successfully created the Webpixel app extension
  • Pixel appears as “not connected” in the backend
  • Manual connection via GraphiQL works
  • Unable to implement automatic connection during installation

Main Challenge:
Unclear where to place the GraphQL mutation code within the Remix project structure and how to trigger it during app setup.

Proposed Solution:
Another user provided a code example using @shopify/shopify-api with a webPixelUpdate mutation that sets connected: true. The suggestion involves:

  • Creating a GraphQL client with shop credentials
  • Executing the mutation with the pixel ID
  • Calling this function during app installation

Outstanding Question:
The original poster remains uncertain about what constitutes the “setup part” in Remix and which specific file should contain this code, indicating they’re new to the framework and unable to find working examples online.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hey everyone,

It’s been a few days now I have a roadblock, so I would love to pick your brains.

I have an app that’s I’m trying to build and I need to install & connect a Webpixel at the app installation.

So far I managed to create the Webpixel app extension and I can see the pixel in the backend as not connected.

I managed to connect the Webpixel by manually using GraphiQL.

But I’d like to be able to do this automatically at the app installation.

I can’t seem to find a way to make this GraphQL query work in Remix and I don’t know where it should be located in the project.

2

Hi,

Hope following will help

  • Go to setup part of your Remix app.
  • Use GraphQL API to send a request.
    Here is the code example
import { shopifyApi, LATEST_API_VERSION } from "@shopify/shopify-api";

export async function setupWebPixel(shop, accessToken) {
  const client = new shopifyApi.clients.Graphql({
    shop,
    accessToken,
    apiVersion: LATEST_API_VERSION,
  });

  const mutation = `
    mutation ConnectWebPixel($webPixelId: ID!) {
      webPixelUpdate(id: $webPixelId, input: { connected: true }) {
        webPixel {
          id
          connected
        }
        userErrors {
          field
          message
        }
      }
    }
  `;

  const response = await client.query({
    data: {
      query: mutation,
      variables: { webPixelId: "YOUR_PIXEL_ID" },
    },
  });

  console.log("WebPixel Connection Response:", response);
}
  • Call function when the app installs.
3

Thanks so much for taking the time to answer. What do you call the setup part of remix? What file is that?

Sorry, I’m new to Remix.

I can’t find one example online of this webPixelCreate that works.

Thanks in advance