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
Render in the Home Page
Render in a custom page that you've created
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
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 themes this is very easy. All you have to do is go to your theme customisation window.
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
Finally select the product which you want to be featured in the sticky bar. And click save
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
Render in the Home Page
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
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.
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
Finally select the product which you want to be featured in the sticky bar. And click save
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
Updated on: 09/03/2023
Thank you!