> 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/dynamic-upsell.md).

# Dynamic Upsell

How to Upsell or Cross Sell Products on Checkout using the <mark style="color:yellow;">**Upsell -> Dynamic**</mark> option? A simple walkthrough.

{% embed url="<https://www.loom.com/share/0bf90192cb5c438cadd98311934eb624?sid=a7994c69-cf7a-45e9-b915-8af65253763f>" %}
Dynamic Upsell 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;">**Upsell**</mark> category.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FEXBttxBP10F384yoJZFy%2FScreenshot%202024-03-19%20at%204.48.27%E2%80%AFPM.png?alt=media&amp;token=0a6875c3-e94f-4d70-a603-45127b67f73e" alt="" width="563"><figcaption></figcaption></figure>

3. Select <mark style="color:yellow;">**Dynamic**</mark> upsell type from the options to upsell products on the checkout using metafields.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FYeMsYp5lBo2BGrjWS4Jf%2FScreenshot%202024-03-19%20at%204.49.49%E2%80%AFPM.png?alt=media&amp;token=9493e689-0f3f-41fa-8286-9bd988335508" 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%2FRUPUULhyLQYKdry1fvNH%2FScreenshot%202024-03-19%20at%204.53.16%E2%80%AFPM.png?alt=media&amp;token=bcc29edc-3e76-4f7c-b1e2-2503db134b2f" alt="" width="563"><figcaption></figcaption></figure>

6. Add the <mark style="color:yellow;">**metafield**</mark> in the dynamic source field to get the products for each cart item. Adjust the <mark style="color:yellow;">**Max Products**</mark>, <mark style="color:yellow;">**Is Source**</mark> and <mark style="color:yellow;">**Dynamic conditions**</mark>.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FH9fhuA4RiVab7WI3MIFU%2FScreenshot%202024-03-19%20at%204.54.06%E2%80%AFPM.png?alt=media&amp;token=01426896-0c28-469e-970a-4401f3a93a2b" alt="" width="563"><figcaption></figcaption></figure>

7. Adjust the <mark style="color:yellow;">**display settings**</mark> for the upsell customization block according to your preferences.

<figure><img src="https://4003910945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQqfGe9Y27MHyJ9FJO4GS%2Fuploads%2FXXqXaMI9SDqCHO7ywAKW%2FScreenshot%202024-03-19%20at%204.59.06%E2%80%AFPM.png?alt=media&amp;token=d595cf9a-1ca8-45c0-afbd-ffb4b8a791ac" 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%2FKoyuoSpqcgnlaepFnBTc%2FScreenshot%202024-03-19%20at%205.10.12%E2%80%AFPM.png?alt=media&amp;token=c9c25f71-f5c9-4390-8dbd-b9fb5856779c" 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%2FI0nqscr2dPhrUABMyoUs%2FScreenshot%202024-03-19%20at%205.10.29%E2%80%AFPM.png?alt=media&amp;token=99cca834-d287-4f35-9c96-6c2f5c924029" 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%2FdYSNX5d2K5oZg1LLY3R9%2FScreenshot%202024-03-19%20at%205.10.59%E2%80%AFPM.png?alt=media&amp;token=b870487a-8463-4b95-9d52-919c08292729" 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%2FI1KfwaR8EhlTID44p4kl%2FScreenshot%202024-03-19%20at%205.11.15%E2%80%AFPM.png?alt=media&amp;token=824cc775-a31e-42fd-b566-23b2a8c7e9c6" 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/), 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 - Upsell Products**</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%2FdHlmzSR71pMmf5NE2nVI%2FScreenshot%202024-03-19%20at%205.20.17%E2%80%AFPM.png?alt=media&amp;token=35b885f5-6ce1-46d3-932d-6c615ab7d353" 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%2FqhjwL9LlrSVhma2nUI8L%2FScreenshot%202024-03-19%20at%205.22.34%E2%80%AFPM.png?alt=media&amp;token=76b0de64-9bff-4ca2-ae63-6c346425e0f5" alt="" width="563"><figcaption></figcaption></figure>

## Why does it matter?

[FameOnCentral](https://fameoncentral.com/) is using Dynamic Upsell customization and Increased their AOV by <mark style="color:yellow;">**20%**</mark>.