Sticky Add to Cart
Keep Add to Cart within reach on long product pages.
Check it fits your store
Questions about compatibility? Contact us.
Details
Sticky Add to Cart shows a compact add-to-cart bar at the bottom of product pages as soon as the main Add to Cart button scrolls out of view, and hides it again when the button is back in view.
The bar shows an optional product thumbnail, the product name, the current price (optional) and an Add to Cart button. The price follows the product page: option, swatch and quantity changes are mirrored, and the crossed-out regular price is ignored.
The bar button clicks the real Add to Cart button of the page. The product form is submitted exactly as with the main button, so custom options, configurable options, quantity, the theme's validation of required options and every extension that works with the standard add-to-cart form keep working. On a configurable product without a chosen option, the browser points the shopper to the missing option at the product form.
It appears only for products that can be added to the cart. On phones the bar fits small screens and stays as wide as the screen even when other content of the page overflows; it can also be switched off for phones. While the bar is hidden it is out of the tab order and hidden from screen readers; the slide animation is turned off for visitors who prefer reduced motion. Showing the bar does not move the page content, and the page gets extra space at the bottom so the bar never covers the end of the footer.
Luma and Hyvä: on Luma and Luma-based themes the bar is styled through the theme's LESS and reads the Techimprovement theme's colour variables with Luma fallbacks. On Hyvä store views (Hyvä Theme 1.3 or later, Hyva/default or a child theme) the module switches automatically to its Hyvä version: the same bar, started by a small deferred script without RequireJS, jQuery or inline scripts, and a small plain CSS file loaded only on product pages that show the bar. It follows the Hyvä theme colours, leaves room for the phone's home indicator and can be restyled with CSS variables, without a Tailwind rebuild. One package, no companion module.
Managed in Stores › Configuration › Techimprovement › Sticky Add to Cart: enable the bar, show or hide the thumbnail and the price, change the button label and hide the bar on phones, per website and store view.
Requirements
- Magento Open Source / Adobe Commerce 2.4.7 – 2.4.9; PHP 8.2 – 8.5
- Themes: Luma, Luma-based and Hyvä (Hyvä Theme 1.3+, Hyva/default or a child theme; tested with Hyva/default 1.5.3; no Tailwind rebuild needed)
- A product page with the standard Add to Cart button (#product-addtocart-button)
Change Log
Version 1.1.0 – October 30, 2026
New
- Hyvä theme support: on Hyvä store views (Hyvä Theme 1.3+, Hyva/default or a child theme) the layout handle hyva_catalog_product_view swaps in templates/hyva/sticky-cart.phtml. The same bar is started by js/sticky-cart.js as a plain deferred script from its data-ti-sticky-cart JSON (no RequireJS, jQuery or inline script), mirrors the price from Hyvä's Alpine price box (also after option and quantity changes) and forwards clicks to Hyvä's #product-addtocart-button, so the product form, its option validation and every add-to-cart handler are used for simple and configurable products.
- css/sticky-cart-hyva.css: plain CSS loaded only on Hyvä product pages that render the bar; no Tailwind classes, follows the Hyvä colour tokens (--color-primary, --color-surface, ...) and can be restyled with the --ti-sticky-cart-* custom properties without a Tailwind rebuild. Safe-area padding on phones.
- Model\Config::getHyvaJsConfig(), ViewModel\StickyCart::getHyvaJsConfigJson() and their unit tests.
Improved
- js/sticky-cart.js is one plain-JavaScript file for both themes (AMD module under RequireJS, global TechimprovementStickyCart with auto-start otherwise). Luma keeps the x-magento-init binding and its behaviour. The script marks a started bar with data-ti-sticky-cart-ready.
- The bar mirrors the first rendered price element (themes may keep hidden copies of the price that are swapped in when options change) and also follows style and class changes inside the price box.
Fixed
- Phones: when other content of the product page overflows horizontally (for example a configurable product page with a wide gallery or tab bar), the layout viewport gets wider than the screen and the fixed bar followed it, so its button was cut off. The bar is now limited to max-width: 100vw with overflow: hidden (Luma and Hyvä).
Earlier versions (1)
Version 1.0.0 – October 21, 2026
New
- Sticky add-to-cart bar on product pages (block ti.sticky.cart in before.body.end, template sticky-cart.phtml): optional thumbnail, product name, mirrored price and a button that forwards clicks to the real #product-addtocart-button, so the core form and every extension hooked to it are used.
- Techimprovement_StickyCart/js/sticky-cart: shows the bar while the real button is above the viewport, keeps aria-hidden, inert, the button's tabindex and body.ti-sticky-cart-visible in step, and copies price updates through a MutationObserver on the price box.
- Admin section Stores › Configuration › Techimprovement › Sticky Add to Cart (enable, thumbnail, price, button label, hide on phones) with defaults, scope support and *Use system value*.
- Model\Config, ViewModel\StickyCart, Observer\CleanCachesOnConfigSave, Setup\Uninstall.
- Module LESS (.ti-sticky-cart, .is-visible, .ti-sticky-cart--hide-phones, body.ti-sticky-cart-visible .page-wrapper bottom padding) reading the theme's --ti-* custom properties with Luma fallbacks.
- Unit tests for Config and StickyCart.
Compatibility
- Magento Open Source / Adobe Commerce 2.4.7 – 2.4.9 (verified on 2.4.9), PHP 8.2 – 8.5.
Reviews
Be the first to review Sticky Add to Cart
Reviews are written by customers with an account. Sign in to tell others how it works on your store.
