Banner

Use banners to communicate important messages to buyers in a prominent way.

Anchor to BannerPropsBannerProps

'info' | 'success' | 'warning' | 'critical'

Anchor to ExamplesExamples

Anchor to Basic BannerBasic Banner

Basic Banner

Basic Banner

ReactJS

Copy

99

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

import {

reactExtension,

Banner,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

<Banner

status="critical"

title="Your payment details couldn’t be verified. Check your card details and try again."

/>

);

}

99

1

2

3

4

5

6

7

8

9

10

11

import {extension, Banner} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {

const banner = root.createComponent(Banner, {

status: 'critical',

title:

'Your payment details couldn’t be verified. Check your card details and try again.',

});

root.appendChild(banner);

});

React

import {
  reactExtension,
  Banner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Banner
      status="critical"
      title="Your payment details couldn’t be verified. Check your card details and try again."
    />
  );
}

JS

import {extension, Banner} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const banner = root.createComponent(Banner, {
    status: 'critical',
    title:
      'Your payment details couldn’t be verified. Check your card details and try again.',
  });

  root.appendChild(banner);
});

Anchor to Best practicesBest practices

• Use banners sparingly: Too many banners distract buyers from completing checkout. Reserve them for the most important information.

• Place banners contextually: Display banners at the top of a page or section, below the relevant header. If a banner relates to specific content, place it near that content.

• Include a next step when possible: Add a Button component with a clear action so buyers know what to do after reading the message.

• Make banners dismissible unless critical: Buyers should be able to dismiss informational banners. Keep critical banners persistent until the issue is resolved.

• Match status to urgency: Use info for general updates, warning for issues needing attention, success for confirmations, and critical for problems that block progress.

Anchor to StatusStatus