> For the complete documentation index, see [llms.txt](https://apps.sanomads.com/dynamic-checkout-customizer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apps.sanomads.com/dynamic-checkout-customizer/use-cases/promotional-banner.md).

# Promotional Banner

How to display <mark style="color:yellow;">**Promo Discount Banners**</mark> on Checkout using the <mark style="color:yellow;">**Notification -> Banner**</mark> option? A Step by Step Guide.

{% embed url="<https://www.loom.com/share/23c1d08387994e2fbdfe76bc69f4e429?sid=45504677-33fc-4de2-bb27-b98999fbb48f>" %}
Promotional Banner Tutorial
{% endembed %}

## Guide

1. Create a new [<mark style="color:yellow;">**customization**</mark>](https://admin.shopify.com/apps/dynamic-checkout-customizer/customizations).

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FJHKzAPLWRIyFOR6wbgTw%2FScreenshot%202024-03-19%20at%204.28.55%E2%80%AFPM.png?alt=media&amp;token=09597a9e-785e-41df-9783-94a51af138cb" alt="" width="563"><figcaption></figcaption></figure>

2. Select the <mark style="color:yellow;">**Notifications**</mark> category.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FvylH5XcTocxnvUa7MzjE%2FScreenshot%202024-03-20%20at%205.16.22%E2%80%AFAM.png?alt=media&amp;token=567b5b61-9491-432b-838d-ccb40d1351f6" alt="" width="563"><figcaption></figcaption></figure>

3. Select <mark style="color:yellow;">**Banner**</mark> notifications type from the options for displaying the banner on the checkout.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F0x8F0tKFgMqaODj7LTVf%2FScreenshot%202024-03-20%20at%205.19.44%E2%80%AFAM.png?alt=media&amp;token=ec563e07-239f-467a-9868-2fcc7705e560" alt="" width="563"><figcaption></figcaption></figure>

4. Select <mark style="color:yellow;">**Dynamic Render**</mark> option from the given placement options.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FS68fyQrBwfwZxtIJxpQX%2FScreenshot%202024-03-19%20at%204.50.55%E2%80%AFPM.png?alt=media&amp;token=3904ceed-ed00-4f2c-9af7-fa963fc96a6f" alt="" width="563"><figcaption></figcaption></figure>

5. Add multiple <mark style="color:yellow;">**conditions**</mark> to handle the visibility of the customization on the checkout.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FSUUUyyKjcOfSseKVTmZ0%2FScreenshot%202024-03-20%20at%205.21.39%E2%80%AFAM.png?alt=media&amp;token=e59ca753-ecc8-4c6f-9ae5-8b5c34349753" alt="" width="563"><figcaption></figcaption></figure>

6. Adjust the <mark style="color:yellow;">**type**</mark> and <mark style="color:yellow;">**title**</mark> for the banner customization block.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FakU2p5SutzqOzhxWteSt%2FScreenshot%202024-03-20%20at%205.24.45%E2%80%AFAM.png?alt=media&amp;token=499cbed8-be4e-42b8-82bd-fd115bcebdaa" alt="" width="563"><figcaption></figcaption></figure>

7. Change the <mark style="color:yellow;">**status**</mark> to active to enable the customization block.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Fk7OC3luopbZoHFSG8J7W%2FScreenshot%202024-03-20%20at%205.26.32%E2%80%AFAM.png?alt=media&amp;token=69f26c14-75e0-4797-a756-c9e8fd37c550" alt="" width="563"><figcaption></figcaption></figure>

8. Adjust the <mark style="color:yellow;">**priority**</mark> between 0 to 100 to cover multiple use cases for the customizations.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Fybqv1njLWykgR5647ePa%2FScreenshot%202024-03-20%20at%205.27.20%E2%80%AFAM.png?alt=media&amp;token=1ddf468b-fac5-4e7a-bce4-e05a03c3682f" alt="" width="563"><figcaption></figcaption></figure>

9. In the <mark style="color:yellow;">**placement**</mark> tab, copy the placement ID which will be used on the checkout page.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F6uDu8IBgUK0dxr8u5a2h%2FScreenshot%202024-03-20%20at%205.28.28%E2%80%AFAM.png?alt=media&amp;token=ba5728a1-13d0-4068-bbf9-6fee3aaa3a18" alt="" width="563"><figcaption></figcaption></figure>

11. Click on the <mark style="color:yellow;">**Save**</mark> button to save the changes.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FSGMVxnNgV4KpYDGYvn2X%2FScreenshot%202024-03-20%20at%205.29.18%E2%80%AFAM.png?alt=media&amp;token=47beb1a3-be01-4d0d-9cb8-a0ab613e7ccb" alt="" width="563"><figcaption></figcaption></figure>

12. Go to store [<mark style="color:yellow;">**Settings**</mark>](https://admin.shopify.com/settings), click Checkout and then select a checkout profile and click on <mark style="color:yellow;">**customize**</mark> button to start the customization process.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F9KOT58HXMkhI83SDflBI%2FScreenshot%202024-03-19%20at%205.15.47%E2%80%AFPM.png?alt=media&amp;token=f9ad30f4-17ef-4bfe-bc1f-2ff5544e08fb" alt="" width="563"><figcaption></figcaption></figure>

13. In the [<mark style="color:yellow;">**Checkout editor**</mark>](https://admin.shopify.com/settings/checkout/editor), click on the <mark style="color:yellow;">**Add app block**</mark> button located at the bottom left corner of the page.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Fz0D4MME6G1vdVeVl2Hzj%2FScreenshot%202024-03-19%20at%205.17.13%E2%80%AFPM.png?alt=media&amp;token=10bf7a11-b7a7-4975-9b0b-080e80995362" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="info" %}
Make sure you that you have placed the app block at the same placement as selected in the app.
{% endhint %}

14. Select the <mark style="color:yellow;">**Checkout - Instruction Banner**</mark> app block, drag and drop the app block at the desired location and paste the placement ID to view the customization block.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F4WaK4YJrt6hJjLwagDnt%2FScreenshot%202024-03-20%20at%205.30.52%E2%80%AFAM.png?alt=media&amp;token=6866c85c-7faf-47cf-adad-172d42bdcd47" alt="" width="563"><figcaption></figcaption></figure>

15. Click on the <mark style="color:yellow;">**Save**</mark> button to publish the changes live for the customers.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Fyp7r1p4RqJNi3fi6vx6C%2FScreenshot%202024-03-20%20at%205.32.09%E2%80%AFAM.png?alt=media&amp;token=445a84ad-3e7c-447d-b3f7-b68d54e84c85" alt="" width="563"><figcaption></figcaption></figure>

## Why does it matter?

[Balardi](https://balardi.com/) is using <mark style="color:yellow;">**Banner Notifications**</mark> customization and Increased their conversion rate by <mark style="color:yellow;">**5%**</mark>.