Choose a version:

CustomerSegmentTemplate

Requires use of the admin.customers.segmentation-templates.render target.

CustomerSegmentTemplate is used to configure a template rendered in the Customers section of the Shopify admin. Templates can be applied in the customer segment editor and used to create segments.

Anchor to customersegmenttemplatepropsCustomerSegmentTemplateProps

Anchor to description description string | string[] required: The localized description of the template. An array can be used for multiple paragraphs.
Anchor to query query string required: The code snippet to render in the template with syntax highlighting. The query is not validated in the template.
Anchor to title title string required: The localized title of the template.
Anchor to createdOn createdOn string: ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
Anchor to dependencies dependencies { standardMetafields?: "facts.birth_date"[]; customMetafields?: string[]; }: The list of customer standard metafields or custom metafields used in the template's query.
Anchor to queryToInsert queryToInsert string: The code snippet to insert in the segment editor. If missing, query will be used. The queryToInsert is not validated in the template.

CustomerSegmentTemplateProps

createdOn
ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
```
string
```
dependencies
The list of customer standard metafields or custom metafields used in the template's query.
```
{ standardMetafields?: "facts.birth_date"[]; customMetafields?: string[]; }
```
description
The localized description of the template. An array can be used for multiple paragraphs.
```
string | string[]
```
query
The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
```
string
```
queryToInsert
The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
```
string
```
title
The localized title of the template.
```
string
```

export interface CustomerSegmentTemplateProps {
  /**
   * The localized title of the template.
   */
  title: string;
  /**
   * The localized description of the template. An array can be used for multiple paragraphs.
   */
  description: string | string[];
  /**
   * The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.
   */
  query: string;
  /**
   * The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.
   */
  queryToInsert?: string;
  /**
   * The list of customer standard metafields or custom metafields used in the template's query.
   */
  dependencies?: {
    standardMetafields?: CustomerStandardMetafieldDependency[];
    customMetafields?: string[];
  };
  /**
   * ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.
   */
  createdOn?: string;
}

Was this section helpful?

Simple CustomerSegmentTemplate implementation

import React from 'react';

import {reactExtension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';

function App() {

return (

<CustomerSegmentTemplate

title="My Customer Segment Template"

description="Description of the segment"

query="number_of_orders > 0"

createdOn={new Date('2023-01-15').toISOString()}

);

}

export default reactExtension('Playground', () => <App />);

examples

Simple CustomerSegmentTemplate implementation

React

import React from 'react';
import {reactExtension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';

function App() {
  return (
    <CustomerSegmentTemplate
        title="My Customer Segment Template"
        description="Description of the segment"
        query="number_of_orders > 0"
        createdOn={new Date('2023-01-15').toISOString()}
    />
  );
}

export default reactExtension('Playground', () => <App />);

JS

import {extension, CustomerSegmentTemplate} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.customers.segmentation-templates.render',
  (root, {i18n}) => {
    const template = root.createComponent(CustomerSegmentTemplate, {
      title: i18n.translate('template.title'),
      description: i18n.translate('template.description'),
      query: "number_of_orders > 0'",
      createdOn: new Date('2023-01-15').toISOString(),
    });

    root.appendChild(template);

    root.mount();
  },
);

CustomerSegmentTemplate

Anchor to customersegmenttemplatepropsCustomerSegmentTemplateProps

CustomerSegmentTemplateProps

examples

Simple CustomerSegmentTemplate implementation

React

JS

Preview