Tellason BigCommerce Sticky Add to Cart Scroll Trigger CRO

Type

BigCommerce Stencil Development · CRO · Custom JavaScript

Role

BigCommerce Stencil · JavaScript · Custom CSS

Stack

BigCommerce Stencil · JavaScript · Custom CSS

Status

App Dev Framework
REST API v3
OAuth 2.0
Webhooks
BigDesign
React
Node.js
PostgreSQL

01 The Problem

BigCommerce ships every merchant the same registration form. It collects a name, an email, and a password, and it creates an account on the spot no review, no qualification, no custom data.

That works for a standard retail store. It breaks immediately for merchants running wholesale programs, trade pricing, B2B onboarding, or members-only access. They need to know who is signing up before granting access. They need custom fields company name, trade pricing eligibility, purchase intent, tax ID. They need an approval step that sits between the application and the account.

Without a solution built for BigCommerce, merchants were stitching together generic form plugins with no real platform integration, creating customers manually inside the admin, and managing approvals through email threads. Submission data lived in spreadsheets. Nothing connected back to the customer record in BigCommerce. The process was slow, inconsistent, and entirely dependent on someone remembering to follow up.

02 The Solution

Codinative built a custom BigCommerce app that replaces the default registration flow with a controlled, branded, fully automated onboarding pipeline.

It installs natively into the merchant’s BigCommerce control panel through the App Development Framework, authenticated via OAuth 2.0. Customer creation on approval goes through the REST API v3. The active form injects into the storefront through the Scripts API. Every state change fires through Webhooks that trigger the correct branded email the moment a decision is made.

Merchants build forms visually without writing code. Every submission enters an approval queue. Approvals create a real customer in BigCommerce with all submitted data attached. Rejections and resubmission requests send the right branded email automatically. The entire pipeline lives in one dashboard inside the control panel. No spreadsheets. No manual emails. No developer needed after install.

Project Framework

Situation · Task · Action · Result

S Situation

Tellason’s product pages had one static Add to Cart button placed near the top. Customers who scrolled down to read details, check sizing, or review the Afterpay option lost sight of the button completely losing the purchase moment at exactly the point where buying intent was highest.

T Task

Keep the purchase action visible at all scroll depths without redesigning the product page or modifying the core BigCommerce Stencil theme files.

A Action

Built a custom JavaScript scroll listener that uses an IntersectionObserver to detect when the original Add to Cart button exits the viewport. When the original button is out of view, a sticky bar animates in at the bottom of the screen product thumbnail, product name, price, size selector synced with the page’s variant selection, and a functional Add to Cart button. When the original button re-enters the viewport on scroll up, the sticky bar dismisses cleanly.

R Result

The Add to Cart button is now visible at every scroll depth on every product page visit. For a store selling $200+ premium items where customers naturally read carefully before buying, keeping the purchase CTA permanently in reach directly reduces drop-off at the decision moment.

Core Features

01 Feature 01

Feature 01 Scroll-Triggered Appearance via IntersectionObserver

The sticky bar does not appear on page load it would compete with the native Add to Cart button and create visual noise for customers who have not yet decided to scroll. The trigger is precise: the bar appears the moment the original Add to Cart button exits the top of the viewport on a downward scroll, and disappears the moment it re-enters on an upward scroll. This is implemented using the browser’s IntersectionObserver API targeting the original button element. The observer fires a callback when intersection with the viewport changes isIntersecting: false on scroll past triggers the bar to animate in, isIntersecting: true on scroll back triggers the bar to animate out. No polling, no scroll event listener running on every frame IntersectionObserver fires only on state change, so there is no performance cost during normal scroll.

Feature 02

Feature 02 Sticky Bar Content: Product Name, Price, Size Selector, Add to Cart

The sticky bar at the bottom of the screen on the Tellason product page shows four elements: a product thumbnail on the left, the full product name Fatigue Pant – Black Sateen Original Tapered Leg the price $225.00 a Waist Size dropdown labeled Required with Choose Options, a quantity stepper, and the orange Add to Cart button matching Tellason’s brand color. The size selector in the sticky bar is synced with the size selector on the main product page. If a customer selects a waist size on the main page before scrolling, that selection is already populated in the sticky bar’s dropdown. If they select a size in the sticky bar, that selection reflects in the main page selector. The two controls are bound to the same underlying Stencil variant selection state there is no duplication of logic and no risk of conflicting variant selections sending the wrong SKU to cart.

02

03 Feature 03

Feature 03 Zero Theme Modification

The sticky bar is injected into the page through a custom JavaScript file and styled through a separate CSS file. No Stencil template files no templates/pages/product.html, no templates/components/products/add-to-cart.html are modified. The bar is appended to the DOM by the JavaScript on page load and remains hidden until the scroll trigger fires. This means theme updates from BigCommerce or from Tellason’s development team do not affect the sticky bar. It sits outside the theme’s component tree. A full Stencil theme update or a Cornerstone version bump does not touch the sticky bar files, and the sticky bar does not touch any theme files. The implementation is self-contained and maintenance-free after deployment.

01 Feature 01

Visual Form Builder

The builder splits into a field palette and a real-time live preview. Drag a field in, the preview updates immediately. Thirteen field types across four groups.

Basic Inputs — Text · Email · Phone · Number
Selection Fields — Textarea · Select · Radio · Checkbox
Address Fields — Country · State/Province
Special Fields — Date · File · URL

A theme editor handles form colors, typography, and button styles — no CSS needed. First Name, Last Name, Email, and Password are locked because BigCommerce requires them to create a customer through the REST API v3. Desktop and Mobile viewport toggles let merchants verify the form renders correctly before it goes live.

Core Features

Architecture

Registered through the BigCommerce App Development Framework. OAuth 2.0 handles authentication through a standard handshake identical to every app in the BigCommerce App Marketplace. Customer creation uses the REST API v3 Customers endpoint. The active form injects into the storefront through the Scripts API. Submission and approval events fire through Webhooks that trigger email dispatch the moment a status changes. The dashboard runs on BigDesign tokens for native control panel styling with custom React components for the form builder and preview.

Layer	Technology
App Framework	App Framework
Authentication	OAuth 2.0
Customer Creation	BigCommerce REST API v3
Storefront Injection	Scripts API
Event Layer	Webhooks
Admin UI	BigDesign + React
Backend	Node.js
Database	PostgreSQL
Email	Transactional Email API

What Was Shipped

Deliverables

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

BigCommerce app with OAuth 2.0 install flow and native control panel integration

No-code visual form builder — 13 field types, live preview, theme editor

Multi-form library with independent configurations and one-click exclusive activation

Approval workflow engine — Pending · Approved · Rejected · Resubmission

Filterable, searchable request management queue

Applicant detail view with full submission data and instant action buttons

Five branded transactional email templates — merge variables, Custom HTML, live preview

Analytics dashboard with real-time approval rate and recent submissions

Native BigDesign UI throughout — matches BigCommerce admin exactly

Common Questions

Frequently Asked Questions

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.

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.

What is a custom signup form app for BigCommerce?

It replaces the native BigCommerce customer registration with a configurable form that routes every submission into a merchant-controlled approval workflow. The merchant collects whatever data the business needs, reviews applications from a centralized dashboard, and approves or rejects them before a customer account is created in BigCommerce through the REST API v3. It installs directly into the control panel through the App Development Framework no third-party dashboard, no separate login.

Why does this need to be a BigCommerce app and not a script or plugin?

A script tag renders a form in the storefront but cannot create customers, listen to Webhooks, or build an admin UI inside the BigCommerce control panel. The App Development Framework provides OAuth 2.0 authentication and authorized REST API v3 access both required for an approval workflow that produces real customer records with full attribute data in BigCommerce. Any solution not built on the App Development Framework has no reliable path to the customer API.

What OAuth scopes does the app request?

Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here Add Your Heading Text Here

Does this app support B2B and wholesale onboarding on BigCommerce?

Three at install. store_v2_customers to create approved customers through the REST API v3. store_themes_manage to inject the active form into the storefront via the Scripts API. store_v2_information_read_only for store context currency, locale, platform name. No payment, order, catalog, or financial data scopes are requested.

Can merchants switch between different signup forms for different campaigns?

Yes. The approval workflow, custom fields for business qualification trade pricing eligibility, company type, purchase intent, order volume and the applicant detail view with instant actions make this a direct fit for wholesale gating, trade pricing programs, B2B Edition onboarding, and any merchant who needs to qualify buyers before granting account access.

What happens the moment a merchant approves an applicant?

Yes. Every saved form keeps its own field configuration and theme independently. Merchants build once, deactivate after the campaign, reactivate next time with one toggle. Nothing is rebuilt. Wholesale forms, seasonal forms, and standard forms all live in the same library and switch in a single click.

Can this be built as a private app for one store instead of a marketplace app?

Yes. Codinative builds both App Marketplace apps and private single-client apps. A private app installs into one store only, carries the merchant's branding throughout, and bypasses the marketplace review timeline. It is the right choice when the app handles logic specific to one merchant's operation.

How long does it take to build a BigCommerce app like this?

Six to ten weeks from discovery to App Marketplace submission. That covers OAuth setup, REST API v3 integration, dashboard UI, cross-device QA, and the BigCommerce security review. Private apps without the marketplace review run slightly faster.