Interactive Product Exploration with Hero Reference Points

Hero reference points are designed to create an interactive experience for users, enabling them to explore various areas of an image and uncover additional product details with just a hover or touch.

These reference points are fully customisable within the admin panel, allowing for easy colour changes that ensure a flexible and adaptable design without the need for code modifications.

Reference point positioning is stored as percentages within the CMS, which enables responsive layout for screens of varying sizes. Upon rendering, pixel values are calculated to ensure correct positioning for a seamless user experience.

Custom colours are passed directly from the CMS via CSS variables rendered in the template's HTML, making it simple and efficient to implement design changes.

I hope you enjoyed learning about Hero Reference Points and their potential to enhance user engagement. Thank you for visiting!