# Add Notes

How to <mark style="color:yellow;">**Add Notes**</mark> for each cart item on the Checkout using the <mark style="color:yellow;">**Cart Item Details -> Add Notes**</mark> option.

{% embed url="https://www.loom.com/share/7d714e0ee3224058b51b15d39a034772?sid=c4f8deab-c421-474a-a007-f8a186c63c93" %}

## 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&#x26;token=09597a9e-785e-41df-9783-94a51af138cb" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FAnAQ6bu6Ts8eTGJQSVkz%2FScreenshot%202024-03-20%20at%208.11.26%E2%80%AFAM.png?alt=media&#x26;token=0f328a82-4b6d-4610-956d-77e6425ac1aa" alt="" width="563"><figcaption></figcaption></figure>

3. Select <mark style="color:yellow;">**Add Notes**</mark>, a cart line details type from the options for displaying the quantity selector on the checkout for each cart item.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Faqcf7F17d8g6tszD97qD%2FScreenshot%202024-03-20%20at%203.02.27%E2%80%AFPM.png?alt=media&#x26;token=325193d1-b8a7-450e-a0f7-67d569260bd4" alt="" width="563"><figcaption></figcaption></figure>

4. Select <mark style="color:yellow;">**Render After Each Cart Item**</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%2F6HUYrCNxFn9XrwC6OOh9%2FScreenshot%202024-03-20%20at%208.14.42%E2%80%AFAM.png?alt=media&#x26;token=e4b9fd2c-8675-4f26-b4a8-dc89eca19c79" 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%2Fh0HPn6o49nnYasTw2Xss%2FScreenshot%202024-03-20%20at%203.02.57%E2%80%AFPM.png?alt=media&#x26;token=49a09997-1ba9-4e59-a5b6-e36dc0d74222" alt="" width="563"><figcaption></figcaption></figure>

6. Adjust the <mark style="color:yellow;">**Notes Settings**</mark> for the Edit Cart Items customization block which includes <mark style="color:yellow;">**link title**</mark>, <mark style="color:yellow;">**notes title**</mark> and <mark style="color:yellow;">**notes key**</mark> for each cart line item note.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FipZaz21ouqqg0MOWmQkS%2FScreenshot%202024-03-20%20at%203.08.06%E2%80%AFPM.png?alt=media&#x26;token=380239d6-2b77-4f54-97f8-24bc2ddafb32" 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%2FjhzEPGnLA2Eqp6nuqC7r%2FScreenshot%202024-03-20%20at%203.08.14%E2%80%AFPM.png?alt=media&#x26;token=2c0d1318-2e91-4df0-8230-e391d318e650" 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%2Fgef5zZsNmDEJyCSWFuMp%2FScreenshot%202024-03-20%20at%203.08.23%E2%80%AFPM.png?alt=media&#x26;token=5568298f-bda2-42d3-8ef7-f90f29867364" 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%2FFh6YZ9ks9wGNiX003S19%2FScreenshot%202024-03-20%20at%203.10.29%E2%80%AFPM.png?alt=media&#x26;token=7355ee86-32d2-4708-b1a5-bb1aaa0270dd" alt="" width="563"><figcaption></figcaption></figure>

10. 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%2FUBU4IXBVXgxluPqTLGDp%2FScreenshot%202024-03-20%20at%203.10.47%E2%80%AFPM.png?alt=media&#x26;token=ad7a3555-aa3d-4d86-9ce1-21f204affab7" alt="" width="563"><figcaption></figcaption></figure>

11. 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&#x26;token=f9ad30f4-17ef-4bfe-bc1f-2ff5544e08fb" alt="" width="563"><figcaption></figcaption></figure>

12. 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&#x26;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 %}

13. Select the <mark style="color:yellow;">**Checkout - Edit Cart Items**</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%2FATGEoizknF53Di2Ahr9j%2FScreenshot%202024-03-20%20at%203.11.29%E2%80%AFPM.png?alt=media&#x26;token=391b069b-e544-4240-88e9-25b43a119802" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2Fk9alOqAqDDbElNbUiTh9%2FScreenshot%202024-03-20%20at%203.12.11%E2%80%AFPM.png?alt=media&#x26;token=7ec057b3-7db4-47b4-8a69-0ba12dc52484" alt="" width="563"><figcaption></figcaption></figure>

## Why does it matter?

<mark style="color:yellow;">**Cart Item Details -> Add Notes**</mark> customization for adding custom notes can improve AOV by <mark style="color:yellow;">**10%**</mark>.
