Banner

A Banner is used to give feedback and is typically displayed at the top of a page or section.

Anchor to ExampleExample

import {extend, Banner} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const banner = root.createComponent(Banner, {

status: 'critical',

title: 'This is an error message',

});

root.appendChild(banner);

});

import {render, Banner} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return <Banner status="critical" title="This is an error message" />;

}

import {extend, Banner} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const banner = root.createComponent(Banner, {
    status: 'critical',
    title: 'This is an error message',
  });

  root.appendChild(banner);
});

import {render, Banner} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return <Banner status="critical" title="This is an error message" />;
}

Anchor to PropsProps

optional = ?

Name	Type	Description
title?	`string`	Banners have an optional title. Use a title to grab the buyers attention with a short, concise message.
status?	`"info" \| "success" \| "warning" \| "critical"`	Sets the status of the banner. @default 'info'
collapsible?	`boolean`	Makes the content collapsible
iconHidden?	`boolean`	Hides the status icon

Anchor to Best practicesBest practices

Use banners thoughtfully and sparingly for only the most important information. Too many banners distracts customers from completing checkout.
Banners are typically displayed at the top of a page, or section if they relate to specific content. Place banners below the relevant page or section header.
Include a Button with next steps when possible.
Banners should be dismissible unless they contain critical information or an important step customers need to take.
Use the information banner to update customers about a change or give them advice.
Use the warning banner to display information that needs attention or that customers need to take action on. Seeing these banners can be stressful for customers so be cautious about using them.
Use the critical banner to communicate problems that have to be resolved immediately for customers to complete checkout.

Was this page helpful?