How to implement product tag selection in Shopify

Technical Q&A

Topic summary

A developer shares a solution for implementing product tag selection in Shopify apps, addressing the absence of a native Resource Picker for productTags.

Implementation approach:

  • Fetch available tags using the Admin GraphQL API’s productTags field (not available in Storefront API)
  • Implement pagination with the after argument for loading additional tags
  • Retrieve products by selected tags using a query with tag filters (e.g., tag:summer)

UI Components:

  • Shopify Polaris Autocomplete for tag search and selection
  • Polaris Tag component for displaying and removing selected tags

Use case: Enables merchants to search, select, and manage product tags for dynamic product filtering.

The post includes GraphQL code examples for both fetching tags and querying products by tag. Another user suggests cross-posting to the official Shopify developer forums for broader visibility.

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

I recently worked on a project that required implementing a Product Tag Picker within a Shopify app. Since Shopify does not currently provide a built-in Resource Picker for productTags, I wanted to share the approach I used to achieve this functionality.

Objective

The goal was to create a user interface that allows merchants to:

  • Search and select one or more product tags.
  • Display selected tags for review or removal.
  • Use the selected tags to filter products dynamically.

Step 1: Fetch Product Tags Using GraphQL

The Shopify Admin GraphQL API provides access to product tags through the productTags field.
The following query retrieves available product tags:

{
  productTags(first: 10) {
    edges {
      node
    }
  }
}

Pagination can be implemented using the after argument to load additional tags as required.

Note: The productTags field is available in the Admin API, not the Storefront API. It should be accessed using the app’s Admin API token.

Step 2: Retrieve Products by Tag

Once tags are selected, products can be retrieved based on a tag using the following query:

query getProductsByTag($tag: String!) {
  products(first: 50, query: $tag) {
    edges {
      node {
        id
        title
        handle
        tags
        variants(first: 50) {
          edges {
            node {
              id
              title
              sku
              price
              availableForSale
            }
          }
        }
      }
    }
  }
}

Example variable:

{
  "tag": "tag:summer"
}

Multiple tags can also be combined:

{
  "tag": "tag:summer OR tag:winter"
}

Step 3: Building the User Interface

For the interface, I used the following Shopify Polaris components:

  • Autocomplete for searching and selecting tags.
  • Tag for displaying and removing selected tags.

This combination provides a consistent, user-friendly experience aligned with Shopify’s design standards.

Summary

Since there is no native picker for productTags, the recommended approach is to:

  1. Retrieve tags using the productTags query from the Admin API.
  2. Use Polaris Autocomplete and Tag components for selection and display.
  3. Filter products with a query such as tag:summer using the Admin API.

This solution offers a clean and efficient method for implementing tag-based product filtering or tag selection features in Shopify applications. I would be interested to hear if other developers have found alternative approaches for managing product tags within app interfaces.

2 Likes
2

You should share this over on the dev forums too if you haven’t already.