# Discount Image

How to display <mark style="color:green;">**Discount**</mark> <mark style="color:green;">**Image**</mark> and <mark style="color:green;">**Upsell Products**</mark> on the Post Purchase Checkout using the <mark style="color:green;">**Notifications -> Content**</mark> option? A Step by Step Guide.

{% embed url="<https://drive.google.com/file/d/1ah1heKEL31ophPjXqKd0kWbKr2VJCKOG/view?usp=sharing>" %}

## Guide

1. Go to the store [<mark style="color:green;">**Settings**</mark>](https://admin.shopify.com/settings) <mark style="color:green;">**->**</mark> [<mark style="color:green;">**Checkout**</mark>](https://admin.shopify.com/settings/checkout).

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2F51KqSC873UlXShsLcRjw%2FScreenshot%202024-03-26%20at%209.35.45%E2%80%AFPM.png?alt=media&#x26;token=2eb37eb3-16dc-48f4-8f78-a3f4c21b740d" alt="" width="563"><figcaption></figcaption></figure>

2. Make sure that the [<mark style="color:green;">**HypeUp - Post Purchase app**</mark>](https://admin.shopify.com/apps/upsell-app30) is selected for the post purchase checkout page.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2F8n0INn6zUV58iPbjFb16%2FScreenshot%202024-03-26%20at%209.35.30%E2%80%AFPM.png?alt=media&#x26;token=94ec3e26-f283-4c79-8ece-04d5b5f1c68d" alt="" width="563"><figcaption></figcaption></figure>

3. Create a new [<mark style="color:green;">**Scenario**</mark>](https://admin.shopify.com/apps/upsell-app-30/scenarios).

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FGHeReELUjFs9IUPfpvfN%2FScreenshot%202024-03-26%20at%209.41.52%E2%80%AFPM.png?alt=media&#x26;token=2daaf94f-5772-4a81-a678-72f252b259a0" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2F0WmGB4cXBdUfYsUUVoKo%2FScreenshot%202024-03-27%20at%2011.58.01%E2%80%AFAM.png?alt=media&#x26;token=07a44dbf-99e6-47ca-b3ce-7596fb59ccde" alt="" width="563"><figcaption></figcaption></figure>

5. Select <mark style="color:green;">**Content**</mark>, a notifications type from the options for displaying the image or text on the post purchase checkout page.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2Fpw4jJh0jVHUyY9GGQM65%2FScreenshot%202024-03-27%20at%2012.34.24%E2%80%AFPM.png?alt=media&#x26;token=02972fb9-7a9c-4dd6-b861-11b8122a6b92" alt="" width="563"><figcaption></figcaption></figure>

6. Add multiple <mark style="color:green;">**conditions**</mark> to handle the visibility of the scenario on the post purchase checkout page.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FYH2hFVosz1UAqEHHXirE%2FScreenshot%202024-03-27%20at%202.38.13%E2%80%AFPM.png?alt=media&#x26;token=eea6b689-5b75-4664-b5dd-231ca9bdc40b" alt="" width="563"><figcaption></figcaption></figure>

7. Adjust the <mark style="color:green;">**layout**</mark>, <mark style="color:green;">**image source**</mark> and <mark style="color:green;">**image link**</mark> for displaying the content scenario.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FMutGX3VO4LBV61rv5SmJ%2FScreenshot%202024-03-27%20at%202.37.41%E2%80%AFPM.png?alt=media&#x26;token=66dede3a-21b1-489c-9e43-12c91c20bd68" alt="" width="563"><figcaption></figcaption></figure>

8. Change the <mark style="color:green;">**status**</mark> to active to enable the scenario.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FvLlAk4z6G582FpiP1ThM%2FScreenshot%202024-03-27%20at%202.38.04%E2%80%AFPM.png?alt=media&#x26;token=dbaeb733-f16c-4da5-ac5b-38cca4a5b67b" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FFUEjuMiLrOIpueSMD1K6%2FScreenshot%202024-03-27%20at%202.37.48%E2%80%AFPM.png?alt=media&#x26;token=9a980f33-a334-4663-942b-e717a2a489b7" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2F35IWcnpTBx93uWmkyCId%2FScreenshot%202024-03-27%20at%202.38.13%E2%80%AFPM.png?alt=media&#x26;token=338d001e-7e80-4627-b677-6d05e75324e0" alt="" width="563"><figcaption></figcaption></figure>

11. Go to app [<mark style="color:green;">**Settings**</mark>](https://admin.shopify.com/apps/upsell-app30/settings), click Display Settings then select a <mark style="color:green;">**Layout Option**</mark> and <mark style="color:green;">**Products Per Row**</mark> for displaying the banner and products on the Post Purchase checkout page.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FwVro8KciLuKHfdePOqvg%2FScreenshot%202024-03-27%20at%202.53.21%E2%80%AFPM.png?alt=media&#x26;token=1472672d-7534-4c1a-83ef-c60bc83a4f43" alt="" width="563"><figcaption></figcaption></figure>

12. Click on the <mark style="color:green;">**Save**</mark> button to publish the changes live for the customers on the Post Purchase checkout page.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FXogf9e2npkIRlt4aJoF4%2FScreenshot%202024-03-27%20at%202.54.00%E2%80%AFPM.png?alt=media&#x26;token=37b0632b-6776-4968-939c-26dd732014bc" alt="" width="563"><figcaption></figcaption></figure>

13. Create a new <mark style="color:green;">**Order**</mark> from your store and after a successful checkout, you will be able to see a post purchase page including the <mark style="color:green;">**discount image**</mark>.

<figure><img src="https://3364904426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FFkRk9O2NkadeN0fqMKRA%2Fuploads%2FgvaDjW94SUcVRO8dlZs3%2FScreenshot%202024-03-27%20at%202.30.10%E2%80%AFPM.png?alt=media&#x26;token=b7314df8-b349-4a90-b1f5-663c08795c7b" alt="" width="563"><figcaption></figcaption></figure>
