ColorPicker

Anchor to PropertiesProperties

Anchor to ExamplesExamples

Anchor to Select product accent colorSelect product accent color

Pick a product accent color from a visual selector and save it. This example uses ColorPicker to capture the selected hex value, with a Button that saves the color.

Select product accent color

Select product accent color

ReactTS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

import {useState} from 'react';

import {reactExtension, useApi, ColorPicker, Button, BlockStack, Text} from '@shopify/ui-extensions-react/admin';

function App() {

const {data, close} = useApi('admin.product-details.action.render');

const productId = data.selected[0]?.id;

const [color, setColor] = useState('#000000');

return (

<BlockStack>

<Text fontWeight="bold">Product accent color</Text>

<ColorPicker value={color} onChange={setColor} />

<Button

variant="primary"

onPress={async () => {

await fetch('/api/products/accent-color', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify({productId, color}),

});

close();

}}

>

Save color

</Button>

</BlockStack>

);

}

export default reactExtension(

'admin.product-details.action.render',

() => <App />,

);

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

import {extension, ColorPicker, Button, BlockStack, Text} from '@shopify/ui-extensions/admin';

export default extension(

'admin.product-details.action.render',

(root, api) => {

const {data, close} = api;

const productId = data.selected[0]?.id;

let color = '#000000';

const stack = root.createComponent(BlockStack);

const heading = root.createComponent(

Text,

{fontWeight: 'bold'},

'Product accent color',

);

const picker = root.createComponent(ColorPicker, {

value: color,

onChange: (value) => {

color = value;

},

});

const saveButton = root.createComponent(

Button,

{

variant: 'primary',

onPress: async () => {

await fetch('/api/products/accent-color', {

method: 'POST',

headers: {'Content-Type': 'application/json'},

body: JSON.stringify({productId, color}),

});

close();

},

},

'Save color',

);

stack.appendChild(heading);

stack.appendChild(picker);

stack.appendChild(saveButton);

root.appendChild(stack);

},

);

React

import {useState} from 'react';
import {reactExtension, useApi, ColorPicker, Button, BlockStack, Text} from '@shopify/ui-extensions-react/admin';

function App() {
  const {data, close} = useApi('admin.product-details.action.render');
  const productId = data.selected[0]?.id;
  const [color, setColor] = useState('#000000');

  return (
    <BlockStack>
      <Text fontWeight="bold">Product accent color</Text>
      <ColorPicker value={color} onChange={setColor} />
      <Button
        variant="primary"
        onPress={async () => {
          await fetch('/api/products/accent-color', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({productId, color}),
          });
          close();
        }}
      >
        Save color
      </Button>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

TS

import {extension, ColorPicker, Button, BlockStack, Text} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root, api) => {
    const {data, close} = api;
    const productId = data.selected[0]?.id;
    let color = '#000000';

    const stack = root.createComponent(BlockStack);

    const heading = root.createComponent(
      Text,
      {fontWeight: 'bold'},
      'Product accent color',
    );

    const picker = root.createComponent(ColorPicker, {
      value: color,
      onChange: (value) => {
        color = value;
      },
    });

    const saveButton = root.createComponent(
      Button,
      {
        variant: 'primary',
        onPress: async () => {
          await fetch('/api/products/accent-color', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({productId, color}),
          });
          close();
        },
      },
      'Save color',
    );

    stack.appendChild(heading);
    stack.appendChild(picker);
    stack.appendChild(saveButton);
    root.appendChild(stack);
  },
);

import {useState} from 'react';
import {reactExtension, ColorPicker, BlockStack, Text} from '@shopify/ui-extensions-react/admin';

function App() {
  const [color, setColor] = useState('rgba(0, 0, 0, 0.5)');

  return (
    <BlockStack>
      <Text fontWeight="bold">Overlay color with transparency</Text>
      <ColorPicker value={color} allowAlpha onChange={setColor} />
      <Text>Selected: {color}</Text>
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.block.render',
  () => <App />,
);

import {extension, ColorPicker, BlockStack, Text} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.block.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const heading = root.createComponent(
      Text,
      {fontWeight: 'bold'},
      'Overlay color with transparency',
    );

    const picker = root.createComponent(ColorPicker, {
      value: 'rgba(0, 0, 0, 0.5)',
      allowAlpha: true,
      onChange: (value) => {
        preview.replaceChildren(`Selected: ${value}`);
      },
    });

    const preview = root.createComponent(Text, {}, 'Selected: rgba(0, 0, 0, 0.5)');

    stack.appendChild(heading);
    stack.appendChild(picker);
    stack.appendChild(preview);
    root.appendChild(stack);
  },
);

import {useState} from 'react';
import {reactExtension, ColorPicker, Text, Divider, BlockStack} from '@shopify/ui-extensions-react/admin';

function App() {
  const [primary, setPrimary] = useState('#2C6ECB');
  const [secondary, setSecondary] = useState('#F4F6F8');

  return (
    <BlockStack>
      <Text fontWeight="bold">Brand colors for product page</Text>
      <Text>Primary brand color</Text>
      <ColorPicker value={primary} onChange={setPrimary} />
      <Divider />
      <Text>Secondary brand color</Text>
      <ColorPicker value={secondary} onChange={setSecondary} />
    </BlockStack>
  );
}

export default reactExtension(
  'admin.product-details.action.render',
  () => <App />,
);

import {extension, ColorPicker, Text, Divider, BlockStack} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.product-details.action.render',
  (root) => {

    const stack = root.createComponent(BlockStack);

    const heading = root.createComponent(
      Text,
      {fontWeight: 'bold'},
      'Brand colors for product page',
    );

    const primaryLabel = root.createComponent(Text, {}, 'Primary brand color');
    const primaryPicker = root.createComponent(ColorPicker, {
      value: '#2C6ECB',
      onChange: (color) => console.log('Selected:', color),
    });

    const divider = root.createComponent(Divider);

    const secondaryLabel = root.createComponent(Text, {}, 'Secondary brand color');
    const secondaryPicker = root.createComponent(ColorPicker, {
      value: '#F4F6F8',
      onChange: (color) => console.log('Selected:', color),
    });

    stack.appendChild(heading);
    stack.appendChild(primaryLabel);
    stack.appendChild(primaryPicker);
    stack.appendChild(divider);
    stack.appendChild(secondaryLabel);
    stack.appendChild(secondaryPicker);
    root.appendChild(stack);
  },
);

Anchor to Best practicesBest practices

• Show the current color: Display the selected color value near the picker (using a colored Badge, a swatch, or the hex string) so merchants can confirm their choice without relying solely on the picker's visual state.
• Use within a labeled context: ColorPicker doesn't have a built-in label. Pair it with a Heading or Text component to describe what the color selection controls, such as "Background color" or "Accent color".

Anchor to LimitationsLimitations

• ColorPicker doesn't include a text input for manually entering hex values. Merchants can only select colors visually.
• The value prop accepts RGB, RGBA, and hex color strings (3, 4, 6, or 8-character hex). Named CSS colors (like "red" or "blue") aren't supported.
• The onChange callback returns a hex string (#RRGGBB or #RRGGBBAA when alpha is enabled). Other color formats like HSL or RGB tuples aren't returned.
• ColorPicker doesn't support preset color swatches or a palette of predefined colors. To offer common color options, build a custom palette using buttons alongside the picker.