Shopify Customer Tag Counter on Webpage

Retired Boards Appdev Store Design
, ,

Topic summary

Goal: Display a green message at the top of a product page reading “1 IN [customer tag VIPEXC] CHANCE OF WINNING,” where the bracketed value is the count of customers tagged VIPEXC (only eligible participants).

Update: Suggested approach is to use Shopify’s API to query customers by tag and compute the count, then surface the result via a theme app extension as an app block on the product page.

Technical details:

  • A GraphQL query example is provided: customers(first: 10, query: “tag:YOUR_TAG”) returning edges (id, displayName, email, tags) and pageInfo (hasNextPage, endCursor).
  • To get the full count, paginate using pageInfo to iterate through all pages and aggregate results.

Action items:

  • Implement a backend call to the Shopify API to count customers with tag VIPEXC.
  • Expose the computed count to the storefront via a theme app extension/app block.
  • Render the message on the product page and style it green.

Status: No final code or styling delivered; documentation link for theme app extensions provided. Discussion remains open.

Summarized with AI on January 5. AI used: gpt-5.
1

Hey, just after some help installing a counter on a product page.

The counter needs to be at the top of the product page. The text needs to be a green colour and needs to read. 1 IN [customer tag VIPEXC] CHANCE OF WINNING.

Where [customer tag VIPEXC] is a count of all customers with the tag VIPEXC on their account as they are the only ones in the competition.

Appreciate your time.

2

Hi CrimWearCo,

To get a count of the number of customers with a specific tag, you’ll need to make an API call to query customers and parse the results to get a number count. Then you could make that info available in a theme app extension that could be added as an app block to a product page. The API call could look like:

query {
  customers(first: 10, query: "tag:YOUR_TAG") {
    edges {
      node {
        id
        displayName
        email
        tags
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

Hope this helps!