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

Visual Editor Help
1

Here are some references, want to keep it sweet and simple but functional that can be done within the editor with some additional code.

References

-https://ritual.com/products/essential-multivitamin-for-teen-boys
-Laundry Strips - 32 Loads – Washland

Thanks in advance :))

2

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.

3

Hi, thanks for the valuable insight and fiddle.

Curious, can I add make it specific to PDP’s and will the add to cart button along with variants as an option work on this Element (Sticky ATC) ?

4

You can definitely make this specific to product pages, if you want to add this section to your existing product pages, you can add a custom section. You can also build out a new product page in Builder that includes this section. The add-to-cart button and variants will work as long as these elements are wrapped in a product box block.