Getting started with customer segment template extensions
A customer segment template extension is an extension that is displayed in the template drawer of the customer segment editor.
This guide is the first part in a two-part tutorial series on how to build a feature using customer segment template extensions and an admin action in the Use segment modal. This guide demonstrates how to build a customer segment template extension that enables users to create a segment based on a custom query your app provides. The customer segment template extension displays in the template drawer of the customer segment editor under the segment details page.
What you'll learn
Anchor link to section titled "What you'll learn"In this tutorial, you'll learn how to do the following tasks:
Create a customer segment template extension that is displayed in the template drawer of customer segment editor in the Shopify admin.
Run the extension locally and test it on a development store.
Requirements
Anchor link to section titled "Requirements"You've created a Partner account and a development store.
Your app is using Shopify CLI 3.48 or higher.
Step 1: Create a new extension
Anchor link to section titled "Step 1: Create a new extension"To create your customer segment template extension, you can use Shopify CLI to generate a starter extension.
Navigate to your app directory:
Run the following command to create a new admin action extension:
The command creates a new extension template in your app's
extensionsdirectory with the following structure:
Step 2: Build the extension's UI
Anchor link to section titled "Step 2: Build the extension's UI"Complete the following steps to build the extension's UI.
Review the configuration
Anchor link to section titled "Review the configuration"The extension's .toml file stores the extension's static configuration. To have the template appear in the template drawer of the customer segment editor, validate that the target is set to admin.customers.segmentation-templates.render. For a full list of targets and the locations where they display in the Shopify admin, refer to the admin extension configuration reference.
Create the UI
Anchor link to section titled "Create the UI"Customer segment template extensions are rendered using Remote UI, which is a fast and secure remote-rendering framework. Because Shopify renders the UI remotely, components used in the extensions must comply with a contract in the Shopify host.
You can view the source of your extension in the src/CustomerSegmentTemplate.jsx file. This file defines a functional React component that's exported to run at the extension's target. The CustomerSegmentTemplate component is specifically designed for customer segment template extensions and has already been imported for you. All the template extensions that you create for your application will be displayed under your application's category.
To build your customer segment template, you need to populate the CustomerSegmentTemplate component's title, description, query, queryToInsert and createdOn props. For a list of all the component's props and their descriptions, refer to the CustomerSegmentTemplate component reference.
Add the following code to src/CustomerSegmentTemplate.jsx:
To update the title and description of the template, edit the corresponding title and description values in the locale files.
Step 3: Test the extension
Anchor link to section titled "Step 3: Test the extension"After you've built the extension, you can test it by completing the following steps.
Navigate to your app directory:
To build and preview your app, either start or restart your server with the following command:
Press
pto open the developer console.In the developer console page, click on the preview link for the loyalty points template extension.
The template drawer of the customer segment editor opens on the customer index page.
To use your extension, click the Use this template button:
Validate the query inside the customer segment editor:
- Complete the next guide in this tutorial series by building an action extension in the Use segment modal. This will allow your app to use the newly created customer segment.