Shopping Experience

Sticky ATC Bar

Maintain purchase options throughout the browsing journey. The Sticky Add-to-Cart (ATC) bar displays a slim product bar at the viewport edge once the main product form scrolls out of view.

Sticky Add-to-Cart Bar Preview

Overview

On detailed product pages with rich media, reviews, and specifications, customers often have to scroll back up to purchase after reading. The Sticky ATC Bar eliminates this friction. It monitors scroll offsets relative to the main Add to Cart button and smoothly slides in to provide a persistent, compact check-out option.

Core Features

Two-Way Syncing

Variant selections and quantities sync instantly between the main product form and the floating bar. Changing an option in one updates the other automatically.

Mobile Optimization

Responsive breakpoints hide the quantity selector on mobile screens to save horizontal space, displaying only critical product info and a full-width CTA block.

Component Breakdown

Product Info Panel

Displays the active variant image, product title, current price, and standard compare-at price (retains sale badge ratios).

Variant Dropdown

Dynamically rendered when a product has multiple options. Re-fetches prices and media on selection change. Hidden automatically if the product has only a default variant.

Quantity Inputs

Includes desktop increment (+) and decrement (-) selectors to batch multiple quantities directly into the cart fetch action.

Dismiss Button

Allows customers to close the bar. Once dismissed, it remains hidden for the remainder of their session to prevent interrupting their reading experience.

Configuration Settings

The Sticky ATC Bar requires no complex coding and can be toggled globally in:

Shopify Admin > Online Store > Customize > Theme Settings > General > Enable Sticky Cart

AJAX & Cart Drawer Integration

When a user clicks "Add to Cart" from the Sticky ATC Bar, the system executes an AJAX fetch post to /cart/add.js. Upon success, it fires custom global cart event updates, instantly updating cart counts and sliding the Cart Drawer open.

← Hotspot Banner

Next: B2B Quick Order List

B2B Quick Order List →