How to make a Sticky Add-To-Cart button with Builder for a Shopify site

Hi @anagh,

The two examples you provided are very similar to the example we have here (if you want the add to cart button section to show/hide on scroll). You can customize the code in that example to fit your needs.

To make the button sticky you can:

  • Select the add to cart button
  • Scroll down to the CSS properties section in the styles tab
  • Apply these styles: position: sticky, top: 0, and z-index: 10.

This will make the button stick to the top of the page like this.

Sep-29-2021 16-46-27

If you want the add to cart button to stick to the bottom instead, you can:

  • Select the add to cart button and give it position: fixed in the layout section of the styles tab
  • While in the layout section, give the button a bottom, left, and right value of 0.
  • Give the button a z-index value if needed so it sits on top of your page content.

I created a fiddle example of both here.