← Web Components

Web Components · PDP

<mmm-pdp-sticky-add-to-cart>

A bottom-pinned conversion bar that appears once the main <mmm-pdp-add-to-cart-buy-now> has scrolled out of view. Uses IntersectionObserver to detect when to show; mirrors the main buttons so the shopper can always check out.

Overview

Configurable trigger — target-selector tells the observer which element to watch (defaults to the main add-to-cart on the same page). When that element drops below intersection-threshold, the sticky bar slides up. intersection-root-margin can shift the trigger point.

The bar can include the product thumbnail, name, active-variant pill, current price, and a Buy-now button alongside the Add-to-cart button — each independently toggleable.

When to use

  • On long PDPs with tabbed description / reviews below the fold.
  • For mobile-first themes — sticky CTA dramatically lifts conversion.

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-pdp-sticky-add-to-cart show-buy-now="true"></mmm-pdp-sticky-add-to-cart>

Attributes

AttributeTypeDefaultDescription
target-selectorstringmmm-pdp-add-to-cart-buy-nowCSS selector for the element whose visibility triggers the bar.
show-product-imagebooleantrueShow the product thumbnail on the left side of the bar.
show-product-titlebooleantrueShow the product name.
show-variant-infobooleantrueShow the currently selected variant.
show-buy-nowbooleantrueInclude the Buy-now button alongside Add-to-cart.
add-to-cart-textstringAdd to CartAdd-to-cart label.
buy-now-textstringBuy it NowBuy-now label.
animation-durationnumber300Show / hide transition duration in milliseconds.
intersection-thresholdnumber0IntersectionObserver threshold — fraction of target visible before the bar hides.
intersection-root-marginstring0pxObserver rootMargin — shift the trigger point by this many pixels.
bar-z-indexnumber1000Stacking context for the bar.
bar-background-colorstringtheme product bg / #fffBar background.
bar-box-shadowstring0 -0.125rem 0.625rem rgba(0,0,0,0.1)Bar shadow (pointing upward).
bar-max-widthstring75remCap bar content width (centered if smaller than viewport).
bar-paddingstring0.75rem 1remBar padding.
bar-gapstring0.75remGap between bar elements.
variant-colorstringtheme secondary textColour of the variant info pill.
price-colorstringtheme primary textColour of the price in the bar.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
sticky:shownhost{ timestamp }
sticky:hiddenhost{ timestamp }
cart:addedhost{ productSlug, quantity, cartData, source: 'sticky-cart' }
buy-now:clickedhost{ cartData, source: 'sticky-cart' }
commmerce:cart-updatedwindow{ action: 'add', productSlug, cartData, source: 'sticky-cart' }

Live preview

store sample-store tag <mmm-pdp-sticky-add-to-cart>

Examples

1. Default sticky bar

<mmm-pdp-sticky-add-to-cart></mmm-pdp-sticky-add-to-cart>

2. Dual-CTA + minimal content

<mmm-pdp-sticky-add-to-cart
  show-product-image="true"
  show-product-title="false"
  show-variant-info="true"
  show-buy-now="true"
  bar-max-width="900px"
  bar-padding="0.5rem 1rem">
</mmm-pdp-sticky-add-to-cart>

3. Dark-mode floating bar

<mmm-pdp-sticky-add-to-cart
  bar-background-color="#0e1011"
  bar-box-shadow="0 -0.5rem 1.5rem rgba(0,0,0,0.4)"
  variant-color="#9ca3af"
  price-color="#fafafa">
</mmm-pdp-sticky-add-to-cart>