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

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

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


Thank you!