# CustomerSegmentTemplate

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](https://help.shopify.com/en/manual/customers/customer-segmentation/customer-segments) and used to create segments.

```tsx
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();
  },
);

```

## CustomerSegmentTemplateProps

### CustomerSegmentTemplateProps

### createdOn

value: `string`

ISO 8601-encoded date and time string. A "New" badge will be rendered for templates introduced in the last month.

### dependencies

value: `{ standardMetafields?: "facts.birth_date"[]; customMetafields?: string[]; }`

The list of customer standard metafields or custom metafields used in the template's query.

### description

value: `string | string[]`

The localized description of the template. An array can be used for multiple paragraphs.

### query

value: `string`

The code snippet to render in the template with syntax highlighting. The `query` is not validated in the template.

### queryToInsert

value: `string`

The code snippet to insert in the segment editor. If missing, `query` will be used. The `queryToInsert` is not validated in the template.

### title

value: `string`

The localized title of the template.