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.

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 />);

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

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

dependencies

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

description

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

query

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

queryToInsert

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

title

The localized title of the template.