CalloutBanner

CalloutBanner is used to inform buyers about the details of a limited time offer. They differ from Banner which is used to report status.

Anchor to ExampleExample

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

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

const calloutBanner = root.createComponent(

CalloutBanner,

{title: 'Special offer today only'},

[

root.createComponent(

Text,

undefined,

'Add the Dinghy Skeleton Cruiser to your order and save 15%',

);

root.appendChild(calloutBanner);

});

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

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

function App() {

return (

<Text>Add the Dinghy Skeleton Cruiser to your order and save 15%</Text>

</CalloutBanner>

);

}

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

extend('Checkout::PostPurchase::Render', (root) => {
  const calloutBanner = root.createComponent(
    CalloutBanner,
    {title: 'Special offer today only'},
    [
      root.createComponent(
        Text,
        undefined,
        'Add the Dinghy Skeleton Cruiser to your order and save 15%',
      ),
    ],
  );

  root.appendChild(calloutBanner);
});

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

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

function App() {
  return (
    <CalloutBanner title="Special offer today only">
      <Text>Add the Dinghy Skeleton Cruiser to your order and save 15%</Text>
    </CalloutBanner>
  );
}

Anchor to PropsProps

optional = ?

Name	Type	Description
title?	`string`	Callout banners have an optional title. Use a title to grab the buyers attention with a short, concise message.
border?	`"none" \| "block"`	Adds a top and bottom border to the callout banner @default 'block'
background?	`"secondary" \| "transparent"`	Sets the background color of the callout banner @default 'secondary'
alignment?	`"leading" \| "center" \| "trailing"`	Sets the alignment of the title and children @default 'center'
spacing?	`"xtight" \| "tight" \| "loose" \| "xloose"`	Sets the spacing between the title and children @default 'tight'

Anchor to GuidelinesGuidelines

Never display more than one CalloutBanner
Place callout banners near the top of the page to bring the buyer's attention
The text should be written as concisely as possible
Be considerate and avoid anxiety provoking language:
Avoid exclamation points – "Wait! Before time runs out!"
Give it a feeling of personalization

Was this page helpful?