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.

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

Examples

Simple CustomerSegmentTemplate implementation

React

JS

Preview