How to Create a Sticky Add to Cart Button On Scroll

How to Create a Sticky Add to Cart Button On Scroll

How to Create a Sticky Add to Cart Button On Scroll

Consider this: a customer is shopping on your client’s page and scrolling through a product’s awesome description. The customer is getting excited to buy the product, but as they scroll further, they don’t see a buy button.

They soon realize they have to scroll all the way back to the top to look for it, and in this moment, their excitement to buy the product is overshadowed by their need to search for the ‘add to cart’ button. Once this happens, your client might lose the customer’s interest and could potentially miss out on a sale.

Any moment of purchasing hesitation – even short ones like this – can have a big impact on conversion. In this article, I will go over a couple of methods you can use to implement a sticky ‘add to cart’ button that will stay with customers as they scroll down through a product’s description.

As a source of inspiration, I have selected Frank Body and Code & Quill, two of our 2014–2015 Ecommerce Design Award winners. (Side note: we’re accepting submissions for this year's Ecommerce Design Awards right now – you could win a trip to NYC!)

On Frank Body's site, the product’s description is detailed and interesting, which invites the customer to scroll through the product details. On the right hand side, we can see the sticky 'add to cart’ panel, which contains the product’s price, quantity box, and the ‘add to cart’ button. This is a clever implementation because the customer does not have to search for the price, and can add multiple quantities without having to navigate or scroll anywhere else on the page.How to Create a Sticky Add to Cart Button On Scroll: FrankCode & Quill also uses the sticky ‘add to cart’ panel in their ecommerce store. What’s particularly interesting about their implementation is that they allow customers to select different product variants directly within the panel itself. In this case, customers can choose between a dark grey or white book cover. They also include a price, quantity box, and sharing option.How to Create a Sticky Add to Cart Button On Scroll

You might also like: Ways to Customise the img element in Shopify Themes

Method 1: CSS3

CSS3 introduced position: sticky; which is a hybrid of relative and fixed positioning. Under Mozilla Developer Network’s documentation, they explain that the “element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned."

For instance, #one { position: sticky; top: 10px; } will behave just like a relatively positioned element, until the viewport scrolls such that the element would be less than 10px from the top. Then, it will be fixed to 10px from the top until the viewport is scrolled back past this threshold.”

Here’s a working Codepen example that shows this technique in action: (Don’t see the sticky functionality below? Try using Safari instead of Chrome)

See the Pen Sticky positioning by Shopify Partners (@ShopifyPartners) on CodePen.

It’s important to note that while this is easy to implement through CSS, it’s not supported on all major browsers (including Chrome, believe it or not). Can I Use provides us with the following support chart for position: sticky;.How to Create a Sticky Add to Cart Button On ScrollIf you would like to use position: sticky; but need to support other browsers, check out this CSS polyfill by Filament Group.

Method 2: jQuery Plugin

One thing is certain, we want our sticky ‘add to cart’ panel to work on all modern browsers, because we want all of our clients’ customers to have the same quality shopping experience. To do this, we can use a cross-platform jQuery Plugin. There are many jQuery plugins that perform the same functionality such as Sticky-kit and Waypoints, but for this example I will use Sticky.

If you’re new to front-end development, jQuery plugins are resources you should take advantage of. For the most part, this is because they are relatively easy to implement and can provide you with quality functionality. To add sticky elements to our product pages, we will need to include jQuery and Sticky, and call Sticky to our ‘add-to-cart’ panel:

The above code implementation will set our ‘add to cart’ panel 50 pixels from the top of the browser window, when it has been scrolled to. There are plenty of other calls we can add using Sticky to create even more interesting interactions; for more details, check out Sticky’s Github page.

Here’s Codepen with a working example:

See the Pen Sticky Add To Cart Panel by Shopify Partners (@ShopifyPartners) on CodePen.

You might also like: The Essential List of Resources for Shopify Theme Development

Scrolling and its opportunities

As a side bonus, I wanted to mention Scroll Magic and share a Codepen demo. Scroll Magic is a javascript library for magical scroll interactions.

  • ScrollMagic helps you easily react to the user’s current scroll position.
  • It’s the perfect library for you, if you want to:
    • Animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control).
    • Pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky elements).
    • Toggle CSS classes of elements on and off, based on scroll position.
    • Effortlessly add parallax effects to your website.
    • Create an infinitely scrolling page (ajax load of additional content).
    • Add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter.

Check out the demo page, browse the examples, or read the documentation to get started.

This Codepen example uses sticky elements for titles to simulate the contact page on iPhones: 

See the Pen Multiple Sticky Titles with CSS and JS by Shopify Partners (@ShopifyPartners) on CodePen.

Sticky calls to action: a lot for a little

Your clients want to deliver amazing shopping experiences to their customers, and you can help them do just that. Furthermore, your clients do not want to lose sales due to moments of hesitation. Adding a sticky ‘add to cart’ button that follows the customer as they scroll is a clever way of eliminating possible hesitation, by avoiding the need to scroll all the way back up a page to buy a product.

As we saw in this article, it’s just a matter of adding a jQuery plugin and one line of code to make this happen. Also, explore the possibilities of Scroll Magic — you never know when the perfect situation could arise where you want to trigger new interactions on scroll.

What do you think of using sticky 'add to cart' buttons on a client's ecommerce site? Tell us in the comments section below.

You might also like: Using Git to Simplify Shopify Theme Deployment

About the Author

Levin is a self-taught designer and front-end developer whose passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC, and now works for Trello.

Grow your business with the Shopify Partner Program

Learn more