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

# How to add a Sticky Add to cart bar to a Custom Page

Sticky add to cart bar renders automatically on every product pages by default. And in some cases you might have to render it in a non-product page. Mainly you might come across two such scenarios

1. Render in the Home Page
2. Render in a custom page that you've created

# Render in the Home Page
Rendering in Home Page is quite easy. We have an inbuilt way to achieve that. 

* Go to the cornercart App > Add to cart bar > General settings
* And finally paste the product page url of the product that you want to be displayed as the sticky bar in the setting shown in the image below
* Click Save


![Add product URL](https://storage.crisp.chat/users/helpdesk/website/4569684e50e4f800/image_heby1q.png)



# Render in a Custom Page
In some cases you might have to render the sticky bar in a custom page. Like a blog page, or even a custom page that you've built using a 3rd party page builder.

###### in OS 2.0
In OS 2.0 themes this is very easy. All you have to do is go to your theme customisation window.

![Click theme customise button](https://storage.crisp.chat/users/helpdesk/website/4569684e50e4f800/image_12mx7vs.png)

Go to the the page where you want to add the custom sticky bar
 And add a new section and select **Custom Sticky add to cart bar**

![Add app block](https://storage.crisp.chat/users/helpdesk/website/4569684e50e4f800/image_1h73p.png)


Finally select the product which you want to be featured in the sticky bar. And click save

![Select the product and save](https://storage.crisp.chat/users/helpdesk/website/4569684e50e4f800/scr-20221121-h21_81w6cl.png)


###### In older themes 
In case of old themes all you have to do is paste the following html div in the required page's HTML code.

`<div class="sticky-atc-bar-wrapper" data-custom-product-handle="productHandle"/>`

In the above code snippet, you must replace the **productHandle** with the product handle of the required product. By visiting the respective product page in your store, you can find the product handle from the url bar.

If you need any help in setting this up feel free to reach out to support

![How to find product handle](https://storage.crisp.chat/users/helpdesk/website/4569684e50e4f800/image_1b3ng86.png)