> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://setubridge.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to Display the Personalization Layout on the Product Page or in a Popup

Our **SB Custom Product Personalizer** app allows you to display the personalization layout either **directly on the Product Page** or inside a **Popup**, depending on your store's preference.

Follow the steps below to configure the display mode.

**Video Tutorial:**

${frame}[Personalization option on product page](https://www.youtube.com/embed/kWm5kfto58s?si=nzNHQJD1TSxbNzpw&start=278)
###### 



# Steps:-

1. **Display the Personalization Layout : Shopify Admin** → **Apps** → **SB Custom Product Personalizer** → **General Settings** → **Display Layout** → Select **Product Page** (to display the personalization layout directly on the product page) **or** **Popup** (to open the personalization editor in a popup when customers click the **Customize** button) → **Save**.


![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_1aouvlx.png)



## Display Option: On-Page Personalization (Product Page)

When **Product Page** is selected:
* The personalization layout is displayed directly on the product page.
* Customers can customize the product without opening a popup.
* Best suited for stores with enough space on the product page.

### Backend :
![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_1nh4rq2.png)

### 
Frontend :

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_y8o2ul.png)


### Display Options : Pop Up Personalization 

When **Popup** is selected:
* Customers click the **Customize** button on the product page.
* The personalization editor opens in a popup window.
* Customers can personalize the product without leaving the product page.
* Keeps the product page clean while providing a larger editing area for customization.



### Backend : 

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/image_vb6f6f.png)



### Frontend: 

![](https://storage.crisp.chat/users/helpdesk/website/-/e/c/8/2/ec822f1cb1c6a000/mergedhorizontal_1c6rdnu.png)

**Need Help?**
If you have any questions or need assistance configuring the display layout, feel free to contact our support team. We'll be happy to help