Articles on: CornerCart

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




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


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



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


Select the product and 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


How to find product handle

Updated on: 09/03/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!