---
description: Learn how to add the Product Page Banner App block
---

# Product Page Banner

## How to enable the Product Page Banner as an App block <a href="#h_b67a3bf463" id="h_b67a3bf463"></a>

1.  Open the Online Store section in the Shopify admin and click Themes:

    <div align="left"><figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2Fj9TsxMFQJrGDF1zgSQJk%2Fimage.png?alt=media&#x26;token=b28d5fec-6070-401f-8dd2-65346f1ff1b5" alt=""><figcaption></figcaption></figure></div>
2.  Find the theme you want to customize and click the Customize button for that theme:

    <figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FKHZoqSyNHBqyO8RmYEXp%2Fimage.png?alt=media&#x26;token=d21829a7-7e2b-4990-b67d-f51c07c49ade" alt=""><figcaption></figcaption></figure>
3.  The theme editor opens. In the dropdown at the top, select the Products item:

    <div align="left"><figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2Fa4TVWD9EJoU8EN3I9V6y%2Fimage.png?alt=media&#x26;token=f00fdfda-eb7b-486c-b80c-be385142cc6b" alt=""><figcaption></figcaption></figure></div>
4.  Then select, Default product:

    <div align="left"><figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FYegBnWtfAWIjKYEqWnP0%2Fimage.png?alt=media&#x26;token=1b5985e7-235a-46a0-9aa7-c56162545913" alt=""><figcaption></figcaption></figure></div>
5. The editor for the default product page opens. Find the location where you would want the product page banner to appear. Usually, this is below the Title block in the Product Information section. Locate this block in the sidebar on the left. Click the Add block button at the bottom of this section. A block selector opens. Select the Apps tab. Find the Product page banner app block of Discount Ninja and select it:\
   ![](https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FctpvMjioc3SbBUyTON9e%2Fimage.png?alt=media\&token=4b9a1be1-2f0f-4668-8585-648913524d6d)
6.  Change the location where the product page banner is rendered by dragging the block up or down in the list using the handle on the left:

    <div align="left"><figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2FHivfTnEhCsnunn2UALae%2Fimage.png?alt=media&#x26;token=67237851-2d72-41b9-a9fe-113041e92d6e" alt=""><figcaption></figcaption></figure></div>
7. Alternatively, select the place where you want the banner to display and click the + sign. Then click the Apps tab and select the App block.\
   ![](https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2Fx8nYnni17JyhOA6xlAyd%2Fimage.png?alt=media\&token=a406f716-39e7-4277-b89d-889e1e643e2b)
8. IMPORTANT - in the theme editor the app displays a placeholder. This placeholder is not displayed on your live shop. To configure when a product page banner should be displayed and to edit the text or style, you need to edit the building blocks of the offers configured in Discount Ninja.
9.  If you want to hide the block, use the eye icon to toggle visibility. Use the dustbin icon to remove the block:

    <div align="left"><figure><img src="https://326468467-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkEkTCDyi4rdjkChWHzFd%2Fuploads%2Fi1Mlp8KKnehQx8q16vv2%2Fimage.png?alt=media&#x26;token=8b1fd4d2-7398-4bbb-b211-7aa6929bec18" alt=""><figcaption></figcaption></figure></div>

## Changing the text and style <a href="#h_95ca361c3c" id="h_95ca361c3c"></a>

To configure when a product page banner should be displayed and to edit the text or style you need to open the app. In the app you'll need to edit the widgets of the offers configured in Discount Ninja.
