> 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/content-for-b2b-b2c.md).

# Content for B2B / B2C

How to display different image content for <mark style="color:yellow;">**B2B**</mark> and <mark style="color:yellow;">**B2C**</mark> customers on the Checkout page using the <mark style="color:yellow;">**Notifications -> Content**</mark> option.

{% embed url="<https://www.loom.com/share/edf3eb7c056343e4a51099ce3d6bd45d?sid=24f6373d-b4e4-4a94-81cf-3a0d5103b0cb>" %}
Content for B2B / B2C 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;">**Content**</mark>, a notifications type from the options for displaying the image or text on the checkout.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FDSTiu5G46RK5kYV6upjH%2FScreenshot%202024-03-20%20at%205.36.21%E2%80%AFAM.png?alt=media&amp;token=5d81ca81-c47e-4388-8c84-f88a3334481a" 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%2FtNjaNpFwHaYzI9H7DIhd%2FScreenshot%202024-03-20%20at%205.39.54%E2%80%AFAM.png?alt=media&amp;token=ac166f20-b37c-492e-91b0-1362341c3e3a" alt="" width="563"><figcaption></figcaption></figure>

6. For displaying content only for B2B customers, add a condition of <mark style="color:yellow;">**customer type**</mark> and select the condition value <mark style="color:yellow;">**B2B**</mark>.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FwsjJgCntD4xVvcSw8gaS%2FScreenshot%202024-03-20%20at%206.47.09%E2%80%AFAM.png?alt=media&amp;token=7f655a28-5a3a-46c9-b1ec-827b41de272f" alt="" width="563"><figcaption></figcaption></figure>

7. Adjust the <mark style="color:yellow;">**content settings**</mark> for the content customization block which includes <mark style="color:yellow;">**image source**</mark> link and <mark style="color:yellow;">**redirect link**</mark> for the trust pilot reviews.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2F1KAdrqyhZcxZi1Oi6RIW%2FScreenshot%202024-03-20%20at%205.42.42%E2%80%AFAM.png?alt=media&amp;token=e07c46c0-ae87-490c-8433-bd75a11b87ed" alt="" width="563"><figcaption></figcaption></figure>

8. 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%2FfwkRcdi4dPvMkanMkxNg%2FScreenshot%202024-03-20%20at%205.44.14%E2%80%AFAM.png?alt=media&amp;token=1dcad3c8-5812-4737-816a-974050404502" alt="" width="563"><figcaption></figcaption></figure>

9. 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%2FmoXfvsVouovgxo0Abzab%2FScreenshot%202024-03-20%20at%205.45.33%E2%80%AFAM.png?alt=media&amp;token=d2e5c6a9-22a1-415a-bbc1-b1681c4b94c9" alt="" width="563"><figcaption></figcaption></figure>

10. 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%2F1eptQuoCIF4TTnv6gOzS%2FScreenshot%202024-03-20%20at%205.46.21%E2%80%AFAM.png?alt=media&amp;token=ec42136f-e574-4ae0-b028-7730ab481719" 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%2FsmS0BaDFSM4KTu0Ou4AW%2FScreenshot%202024-03-20%20at%205.47.08%E2%80%AFAM.png?alt=media&amp;token=8c956629-fd7a-4dd0-8adb-0ca6e8ea5c17" 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 - Image Content**</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%2FHSU8N2QHVTI1P4jwXTol%2FScreenshot%202024-03-20%20at%205.48.38%E2%80%AFAM.png?alt=media&amp;token=e8d16c16-e648-4705-b451-0ec56f6a9ff8" 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%2FkKqHB1k1VPt64wAoe1c4%2FScreenshot%202024-03-20%20at%206.35.53%E2%80%AFAM.png?alt=media&amp;token=0bb2538a-1c4c-48ed-bacc-27b69434b714" alt="" width="563"><figcaption></figcaption></figure>

## Why does it matter?

[Gimaguas](https://gimaguas.com/) is using <mark style="color:yellow;">**Notifications -> Content**</mark> customization for displaying Images and improving their Content Marketing Strategy.