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

# Static Upsell

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

{% embed url="<https://www.loom.com/share/ed6fe8f0ab0c474a9aa4bf635a0b37b7?sid=bfc89acb-5684-4ea2-83e1-1d4d54518cc4>" %}
Static 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="/files/ckryZ5IcJqvmQHchyT6W" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/hkfwLvUGMMeb7PjRssL3" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/AzN9gaqkrFwRZg7iXdWS" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/g2nvKJW90CD8HyMTC0Yw" 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="/files/41807sf5eaeIJwybDi8X" alt="" width="563"><figcaption></figcaption></figure>

6. Add the <mark style="color:yellow;">**products**</mark> manually and adjust the max. product count for display on the checkout

<figure><img src="/files/zlkwWcvYXgdyKrsj8SJ5" 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="/files/uqKKK7VsXeWltPkSDcsu" 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="/files/LspVddhYMszTSEClTT2q" 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="/files/4pSe43RvpyDb6n9e65Zr" 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="/files/w78XOYu0zquWi3Z8hZmf" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/j30UGVbLu82dHSiGKCvH" 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="/files/QEG4vdai9S6VSPxiiFGm" 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="/files/dV5yZqmMYcIwNeEJSnqf" 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="/files/s12LHULntJ2Wn8Fsbr2b" 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="/files/c5rlFR91YZ4KmeVQWAwp" alt="" width="563"><figcaption></figcaption></figure>

## Why does it matter?

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