> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.teeinblue.com/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).

# Show Customization Image inside Checkout Page

# Show design in Checkout Page

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_h77zrl.png)

As of 2023, Shopify no longer use the file `checkout.liquid` to render the Checkout Page. Shopify has since been moved to [Checkout Extensibility](https://www.shopify.com/enterprise/blog/checkout-extensibility-winter-editions) - a new foundation for checkout that is more secure, performant, upgrade-safe, and customized using apps.

| Teeinblue is now compatible with this new flow as well. 

|| You will have to be a Shopify Plus user to use the Checkout Extensibility feature.

* If you are a Shopify Plus user, please navigate to Store Settings > Customization Images > find `For Checkout page` block > and click on `Add app block` button  

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_14sfwwk.png)

After that, you will be then re-directed to your Theme's Checkout Page settings. 

* In this Page, under `Order Summary` section, please click on `Add app block` button, and select the `Customization Image Preview` 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_1634ez3.png)

* Once you're done, it will look like this:

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_vfu70f.png)

* When clicking on the Teeinblue block there, you can further modify the Order Summary section. For example, the button label, preview type, etc. 

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_ac2zlx.png)

* Once you are done, please review the result by adding a Teeinblue product to Cart and see how it goes! 


---

| You can view each Preview Type below:

* **Popover**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_ikqhkk.png)

* **Popup**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_pg9w0.png)

* **Expansible**

![](https://storage.crisp.chat/users/helpdesk/website/6085dc2a7293d800/image_7kbis9.png)




| If you find difficult to follow this instruction, please contact us for further support.