Segmentation of customers is helpful for Shopify applications that must reach an appropriate customer demographic based on the behavior of the users, their location, their purchase history, as well as their level of engagement. For this purpose, Shopify provides the Admin GraphQL API to get customer segments straight away from the Remix app.
A customer segment is essentially a real-time category of customers based on a set of criteria. The segments query for Shopify returns segment IDs, names, and the segment queries in a paginated format. For using this API, you will need the read_customers access scope.
This tutorial has been designed to teach you how to obtain your customer segments using the Shopify Admin GraphQL API in a Remix application and will also cover the necessary steps to page the data in the UI.
Steps to Get Customer Segments Using GraphQL API in Shopify Remix App:
Step 1: Required API Scope
Firstly, you need to check if the application has the necessary customer permissions access.
[access_scopes]
scopes = "read_customers"When it comes to managing segments, you may need extra customer write permissions.
Step 2: Authenticate the Admin API
In your Remix route, authenticate the Shopify Admin API:
import { authenticate } from "../shopify.server";
export const loader = async ({ request }) => {
const { admin } = await authenticate.admin(request);
// GraphQL request
};Step 3: Fetch Customer Segments
You can use the segments GraphQL query by Shopify:
query GetCustomerSegments($first: Int!) {
segments(first: $first) {
nodes {
id
name
query
createdAt
}
}
}Use it inside Remix:
const response = await admin.graphql(
`#graphql
query GetCustomerSegments($first: Int!) {
segments(first: $first) {
nodes {
id
name
query
createdAt
}
}
}
`,
{
variables: {
first: 50,
},
}
);
const data = await response.json();
return Response.json({
segments: data.data?.segments?.nodes ?? [],
});Step 4: Add Pagination
For businesses that handle a lot of segments, cursor-based pagination must be used:
query GetCustomerSegments(
$first: Int!
$after: String
) {
segments(first: $first, after: $after) {
nodes {
id
name
query
}
pageInfo {
hasNextPage
endCursor
}
}
}This allows your app to efficiently load segments page by page.
Step 5: Display Segments
You can display the results in your Remix component:
{segments.map((segment) => (
<div key={segment.id}>
<h3>{segment.name}</h3>
<p>{segment.query}</p>
</div>
))}Complete Flow
Shopify Admin
↓
Remix Route
↓
authenticate.admin()
↓
Admin GraphQL API
↓
segments()
↓
Customer Segments
↓
Remix UI
Conclusion
Combining the capabilities of Remix with that of Shopify’s GraphQL API helps to obtain customer segments quickly and securely. It involves the process of authenticating to get segments, paginating them, and finally displaying their results.
This solution can be implemented anywhere where customer targeting, marketing automation, or analytics is concerned.
FAQ
1. Which API is responsible for retrieving customer segments in Shopify?
The Shopify Admin GraphQL API works on the segments query that provides information about customer segments for a certain shop.
2. What access scope is required for obtaining the customer segments?
In order to access the segments entity and obtain customer segments, the read_customers access scope is necessary.
3. What is the distinction between a customer segment and a customer?
A customer is a single buyer, while a customer segment is a collection of customers satisfying some specific conditions.
