- Tellason BigCommerce Sticky Add to Cart Scroll Trigger CRO
Tellason: BigCommerce Sticky Add-to-Cart Scroll Trigger CRO
- before
The Problem: The Add to Cart Button Disappears Before the Purchase Moment
Tellason sells premium handcrafted clothing at $225 to $275+ per item. Customers buying at that price point do not impulse purchase they read. They check the fabric weight, the construction details, the fit description, the sizing notes. On the Fatigue Pant – Black Sateen Original Tapered Leg, the product description includes 8.5 oz Italian-milled cotton sateen, OG-107 construction details, a note from founders Tony Patella and Pete Searson, a product video, care instructions, and Afterpay payment information.
By the time a customer finishes reading, the Add to Cart button is completely out of view it lives near the top of the page beside the product image. The purchase moment arrives at the bottom of the page. The button is at the top. The customer has to scroll back up to act.
BigCommerce Stencil has no native solution for this. There is no built-in sticky Add to Cart, and adding one requires custom JavaScript without modifying the core theme files.
- After
The Solution: A Scroll-Triggered Sticky Add to Cart Bar
Codinative built a custom scroll-triggered sticky Add to Cart bar using JavaScript on BigCommerce Stencil. When the customer scrolls past the original Add to Cart button, a polished bar smoothly animates in at the bottom of the screen showing the product thumbnail, product name, price, size selector, and a fully functional Add to Cart button. When the customer scrolls back up to the original button, the sticky bar disappears cleanly. No conflicts, no duplicate submissions, no theme modifications.
Tellason Sticky Add-to-Cart Development: Situation, Task, Action, Result
The Situation: A Static Button Lost at the Top of a Long Product Page
The Task: Keeping the Purchase Action Visible at Every Scroll Depth
The Action: A JavaScript Sticky Bar Built on IntersectionObserver
The Result: The Purchase CTA Now Visible at Every Scroll Depth
- Approval Workflow
- Branded Emails
- REST API v3
- OAuth 2.0
- Webhooks
Core Features of the Sticky Add-to-Cart Bar
Scroll-Triggered Appearance via IntersectionObserver
Sticky Bar Content: Product Name, Price, Size Selector, Add to Cart
Zero Theme Modification
Tellason Sticky Add-to-Cart Bar: What Was Shipped
Custom JavaScript scroll listener using IntersectionObserver fires on state change, not on every scroll frame
Sticky bar injected via JavaScript product thumbnail, product name, price, size selector, Add to Cart button
Size selector in sticky bar synced to main page variant selection in both directions
Smooth animate-in when original button exits viewport, clean animate-out when it re-enters
Zero Stencil theme modification implementation lives in separate JS and CSS files only
Works across all product pages on the Tellason store without per-product configuration
Tellason Sticky Add-to-Cart FAQ's
What is a scroll-triggered sticky Add to Cart bar on BigCommerce?
A scroll-triggered sticky Add to Cart bar is a UI element that stays fixed at the bottom of the product page viewport and appears automatically when the customer scrolls past the original Add to Cart button. It keeps the purchase action accessible at every scroll depth without the customer needing to scroll back up. On BigCommerce Stencil it requires custom JavaScript there is no native equivalent.
Does the sticky bar conflict with the original Add to Cart button?
No. The sticky bar appears only when the original button is out of view and disappears when the original button comes back into view. At no point are both buttons visible simultaneously. The IntersectionObserver monitors the original button's viewport intersection state and the sticky bar's visibility toggles directly off that state they are never both visible at the same time.
How does the size selector in the sticky bar stay in sync with the main page?
Both the sticky bar's size dropdown and the main product page's size dropdown are bound to the same underlying Stencil variant selection object. A selection in either control updates the shared state. The other control reads from that same state. There is one source of truth for the selected variant the sticky bar does not maintain a separate selection state.
Does building this require modifying BigCommerce Stencil theme files?
No. The sticky bar is injected into the DOM by a JavaScript file that loads on the product page. No templates/pages/product.html or any other Stencil template file is modified. Theme updates, Cornerstone version bumps, and Stencil CLI deployments do not affect the sticky bar because it lives outside the theme's component tree entirely.
Why use IntersectionObserver instead of a scroll event listener?
No. The implementation uses the IntersectionObserver API rather than a scroll event listener. An event listener on the scroll event fires on every frame during scrolling potentially 60 times per second and can cause jank on lower-powered devices. IntersectionObserver fires only when the observed element's intersection state changes, which happens at most twice per user scroll session once on the way down and once on the way up.
Can this be implemented on other BigCommerce Stencil stores?
Yes. The implementation IntersectionObserver targeting the native Add to Cart button, DOM-injected sticky bar, variant state binding, and zero theme modification applies to any BigCommerce Stencil store. The product name, price, and variant selector elements it reads from are standard Stencil data attributes present on every BigCommerce Stencil product page.
- Verified BigCommerce Partner
Custom apps, B2B Edition, Stencil and Catalyst storefronts, REST API v3 integrations — built by
developers who work on BigCommerce every day.