Callout card

When you release a new feature or want to highlight an opportunity, the callout card composition draws attention without being intrusive. It encourages merchants to take action with a clear message and prominent button.

Use callout cards sparingly to announce features, promote functionality, or guide merchants through common first actions. Remove them once merchants have engaged. This composition follows proven design guidelines that help your app feel native to the Shopify admin. See Built for Shopify requirements for more details on these guidelines.

Anchor to ExamplesExamples

Anchor to Display a callout card with illustration and call-to-actionDisplay a callout card with illustration and call-to-action

Merchants can take action on new features or opportunities you highlight. This pattern presents a callout card that stacks content on smaller screens with a prominent illustration and call-to-action. The grid uses responsive column templates. The illustration and button draw attention to important actions or promotions.

Preview

<s-section>

<s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">

<s-grid

gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"

gap="base"

alignItems="center"

<s-grid gap="small-200">

<s-heading>Ready to create your custom puzzle?</s-heading>

<s-paragraph>

Start by uploading an image to your gallery or choose from one of our

templates.

</s-paragraph>

<s-stack direction="inline" gap="small-200">

<s-button> Upload image </s-button>

<s-button tone="neutral" variant="tertiary">

{" "}

Browse templates{" "}

</s-button>

</s-stack>

</s-grid>

<s-stack alignItems="center">

<s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

<s-image

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="Customize checkout illustration"

aspectRatio="1/0.5"

</s-box>

</s-stack>

</s-grid>

<s-button

icon="x"

tone="neutral"

variant="tertiary"

accessibilityLabel="Dismiss card"

</s-grid>

</s-section>

<s-section>

<s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">

<s-grid

gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"

gap="base"

alignItems="center"

<s-grid gap="small-200">

<s-heading>Ready to create your custom puzzle?</s-heading>

<s-paragraph>

Start by uploading an image to your gallery or choose from one of our templates.

</s-paragraph>

<s-stack direction="inline" gap="small-200">

<s-button> Upload image </s-button>

<s-button tone="neutral" variant="tertiary"> Browse templates </s-button>

</s-stack>

</s-grid>

<s-stack alignItems="center">

<s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

<s-image

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="Customize checkout illustration"

aspectRatio="1/0.5"

></s-image>

</s-box>

</s-stack>

</s-grid>

<s-button

icon="x"

tone="neutral"

variant="tertiary"

accessibilityLabel="Dismiss card"

></s-button>

</s-grid>

</s-section>

jsx

<s-section>
  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
    <s-grid
      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
      gap="base"
      alignItems="center"
    >
      <s-grid gap="small-200">
        <s-heading>Ready to create your custom puzzle?</s-heading>
        <s-paragraph>
          Start by uploading an image to your gallery or choose from one of our
          templates.
        </s-paragraph>
        <s-stack direction="inline" gap="small-200">
          <s-button> Upload image </s-button>
          <s-button tone="neutral" variant="tertiary">
            {" "}
            Browse templates{" "}
          </s-button>
        </s-stack>
      </s-grid>
      <s-stack alignItems="center">
        <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
          <s-image
            src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
            alt="Customize checkout illustration"
            aspectRatio="1/0.5"
           />
        </s-box>
      </s-stack>
    </s-grid>
    <s-button
      icon="x"
      tone="neutral"
      variant="tertiary"
      accessibilityLabel="Dismiss card"
     />
  </s-grid>
</s-section>

html

<s-section>
  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
    <s-grid
      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
      gap="base"
      alignItems="center"
    >
      <s-grid gap="small-200">
        <s-heading>Ready to create your custom puzzle?</s-heading>
        <s-paragraph>
          Start by uploading an image to your gallery or choose from one of our templates.
        </s-paragraph>
        <s-stack direction="inline" gap="small-200">
          <s-button> Upload image </s-button>
          <s-button tone="neutral" variant="tertiary"> Browse templates </s-button>
        </s-stack>
      </s-grid>
      <s-stack alignItems="center">
        <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
          <s-image
            src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
            alt="Customize checkout illustration"
            aspectRatio="1/0.5"
          ></s-image>
        </s-box>
      </s-stack>
    </s-grid>
    <s-button
      icon="x"
      tone="neutral"
      variant="tertiary"
      accessibilityLabel="Dismiss card"
    ></s-button>
  </s-grid>
</s-section>

Anchor to Navigate to feature pagesNavigate to feature pages

Use href attributes on buttons to navigate merchants to feature pages when they click CTA buttons.

<s-section>

<s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">

<s-grid

gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"

gap="base"

alignItems="center"

<s-grid gap="small-200">

<s-heading>New: AI-powered puzzle suggestions</s-heading>

<s-paragraph>

Let our AI analyze your images and suggest the perfect puzzle configurations for maximum engagement.

</s-paragraph>

<s-stack direction="inline" gap="small-200">

<s-button href="/app/ai-suggestions">Try it now</s-button>

<s-button tone="neutral" variant="tertiary" href="/app/settings/ai">

Learn more

</s-button>

</s-stack>

</s-grid>

<s-stack alignItems="center">

<s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

<s-image

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="AI suggestions illustration"

aspectRatio="1/0.5"

</s-box>

</s-stack>

</s-grid>

<s-button

icon="x"

tone="neutral"

variant="tertiary"

accessibilityLabel="Dismiss card"

</s-grid>

</s-section>

<s-section>

<s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">

<s-grid

gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"

gap="base"

alignItems="center"

<s-grid gap="small-200">

<s-heading>New: AI-powered puzzle suggestions</s-heading>

<s-paragraph>

Let our AI analyze your images and suggest the perfect puzzle configurations for maximum engagement.

</s-paragraph>

<s-stack direction="inline" gap="small-200">

<s-button href="/app/ai-suggestions">Try it now</s-button>

<s-button tone="neutral" variant="tertiary" href="/app/settings/ai">Learn more</s-button>

</s-stack>

</s-grid>

<s-stack alignItems="center">

<s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

<s-image

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="AI suggestions illustration"

aspectRatio="1/0.5"

></s-image>

</s-box>

</s-stack>

</s-grid>

<s-button

icon="x"

tone="neutral"

variant="tertiary"

accessibilityLabel="Dismiss card"

></s-button>

</s-grid>

</s-section>

jsx

<s-section>
  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
    <s-grid
      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
      gap="base"
      alignItems="center"
    >
      <s-grid gap="small-200">
        <s-heading>New: AI-powered puzzle suggestions</s-heading>
        <s-paragraph>
          Let our AI analyze your images and suggest the perfect puzzle configurations for maximum engagement.
        </s-paragraph>
        <s-stack direction="inline" gap="small-200">
          <s-button href="/app/ai-suggestions">Try it now</s-button>
          <s-button tone="neutral" variant="tertiary" href="/app/settings/ai">
            Learn more
          </s-button>
        </s-stack>
      </s-grid>
      <s-stack alignItems="center">
        <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
          <s-image
            src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
            alt="AI suggestions illustration"
            aspectRatio="1/0.5"
          />
        </s-box>
      </s-stack>
    </s-grid>
    <s-button
      icon="x"
      tone="neutral"
      variant="tertiary"
      accessibilityLabel="Dismiss card"
    />
  </s-grid>
</s-section>

html

<s-section>
  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
    <s-grid
      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
      gap="base"
      alignItems="center"
    >
      <s-grid gap="small-200">
        <s-heading>New: AI-powered puzzle suggestions</s-heading>
        <s-paragraph>
          Let our AI analyze your images and suggest the perfect puzzle configurations for maximum engagement.
        </s-paragraph>
        <s-stack direction="inline" gap="small-200">
          <s-button href="/app/ai-suggestions">Try it now</s-button>
          <s-button tone="neutral" variant="tertiary" href="/app/settings/ai">Learn more</s-button>
        </s-stack>
      </s-grid>
      <s-stack alignItems="center">
        <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
          <s-image
            src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
            alt="AI suggestions illustration"
            aspectRatio="1/0.5"
          ></s-image>
        </s-box>
      </s-stack>
    </s-grid>
    <s-button
      icon="x"
      tone="neutral"
      variant="tertiary"
      accessibilityLabel="Dismiss card"
    ></s-button>
  </s-grid>
</s-section>

Anchor to Show dismiss feedback with ToastShow dismiss feedback with Toast

Use the Toast API to show feedback when the callout card is dismissed.

<s-section>

<s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">

<s-grid

gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"

gap="base"

alignItems="center"

<s-grid gap="small-200">

<s-heading>Ready to create your custom puzzle?</s-heading>

<s-paragraph>

Start by uploading an image to your gallery or choose from one of our

templates.

</s-paragraph>

<s-stack direction="inline" gap="small-200">

<s-button>Upload image</s-button>

<s-button tone="neutral" variant="tertiary">

Browse templates

</s-button>

</s-stack>

</s-grid>

<s-stack alignItems="center">

<s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

<s-image

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="Customize checkout illustration"

aspectRatio="1/0.5"

</s-box>

</s-stack>

</s-grid>

<s-button

icon="x"

tone="neutral"

variant="tertiary"

accessibilityLabel="Dismiss card"

onClick={() => {

shopify.toast.show('Card dismissed');

}}

</s-grid>

</s-section>

<s-section>

<s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">

<s-grid

gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"

gap="base"

alignItems="center"

<s-grid gap="small-200">

<s-heading>Ready to create your custom puzzle?</s-heading>

<s-paragraph>

Start by uploading an image to your gallery or choose from one of our

templates.

</s-paragraph>

<s-stack direction="inline" gap="small-200">

<s-button>Upload image</s-button>

<s-button tone="neutral" variant="tertiary">Browse templates</s-button>

</s-stack>

</s-grid>

<s-stack alignItems="center">

<s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">

<s-image

src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"

alt="Customize checkout illustration"

aspectRatio="1/0.5"

></s-image>

</s-box>

</s-stack>

</s-grid>

<s-button

icon="x"

tone="neutral"

variant="tertiary"

accessibilityLabel="Dismiss card"

></s-button>

</s-grid>

</s-section>

<!--

Dismiss handler:

shopify.toast.show('Card dismissed');

-->

jsx

<s-section>
  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
    <s-grid
      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
      gap="base"
      alignItems="center"
    >
      <s-grid gap="small-200">
        <s-heading>Ready to create your custom puzzle?</s-heading>
        <s-paragraph>
          Start by uploading an image to your gallery or choose from one of our
          templates.
        </s-paragraph>
        <s-stack direction="inline" gap="small-200">
          <s-button>Upload image</s-button>
          <s-button tone="neutral" variant="tertiary">
            Browse templates
          </s-button>
        </s-stack>
      </s-grid>
      <s-stack alignItems="center">
        <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
          <s-image
            src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
            alt="Customize checkout illustration"
            aspectRatio="1/0.5"
          />
        </s-box>
      </s-stack>
    </s-grid>
    <s-button
      icon="x"
      tone="neutral"
      variant="tertiary"
      accessibilityLabel="Dismiss card"
      onClick={() => {
        shopify.toast.show('Card dismissed');
      }}
    />
  </s-grid>
</s-section>

html

<s-section>
  <s-grid gridTemplateColumns="1fr auto" gap="small-400" alignItems="start">
    <s-grid
      gridTemplateColumns="@container (inline-size <= 480px) 1fr, auto auto"
      gap="base"
      alignItems="center"
    >
      <s-grid gap="small-200">
        <s-heading>Ready to create your custom puzzle?</s-heading>
        <s-paragraph>
          Start by uploading an image to your gallery or choose from one of our
          templates.
        </s-paragraph>
        <s-stack direction="inline" gap="small-200">
          <s-button>Upload image</s-button>
          <s-button tone="neutral" variant="tertiary">Browse templates</s-button>
        </s-stack>
      </s-grid>
      <s-stack alignItems="center">
        <s-box maxInlineSize="200px" borderRadius="base" overflow="hidden">
          <s-image
            src="https://cdn.shopify.com/static/images/polaris/patterns/callout.png"
            alt="Customize checkout illustration"
            aspectRatio="1/0.5"
          ></s-image>
        </s-box>
      </s-stack>
    </s-grid>
    <s-button
      icon="x"
      tone="neutral"
      variant="tertiary"
      accessibilityLabel="Dismiss card"
    ></s-button>
  </s-grid>
</s-section>

<!-- 
Dismiss handler:
shopify.toast.show('Card dismissed');
-->

Was this page helpful?