How Abra Works in a Headless Storefront

Normally, Abra manages both the promotion logic and the storefront experience. It decides which promotion is active, who qualifies, what discount applies, what messaging should appear, and then displays those experiences across the storefront.

With a headless storefront, Abra continues managing all of the promotion logic, but instead of rendering the experience itself, it exposes that data through APIs and an NPM package.

Your storefront simply asks Abra questions like:

• Which promotion is active?

• Which discounts apply?

• What should this banner say?

• How close is the customer to the next reward?

• Which gift has been unlocked?

• What should the product price display?

Abra returns the answers, and your storefront renders them using your own components and design system.

This gives developers complete control over the customer experience without having to rebuild promotion logic from scratch. Marketers continue creating promotions in Abra, while developers remain free to build a completely custom frontend.

For more technical information, please review our developer documentation:

• NPM Package

• Abra Metafields for Headless Storefronts

• Gift and Tiered Banner for Hydrogen