Implement Hero Image Content

For basic overview of Enhanced Content: https://help.syndigo.com/hc/en-us/articles/360044492794-Understand-Enhanced-Content-Types

Implementing Hero Content

Hero content is placed above the fold and overlaid onto the hero image of your product page. Syndigo offers two types of Hero content: Toolbar and Hotspots.

Toolbar is a single icon which, when interacted with, opens up a ribbon of icons representing the available pieces of content. Hotspots are contextually placed icons which, when clicked, shows a single piece of content in a smart card layout adjacent to the icon. When rendered on a small screen, both Hotspot and Toolbar layouts provide a common user experience that overlays the screen and allows the user to swipe between available pieces of content.

If you desire either Hotspots or Toolbar on your website then Syndigo offers an HTML element which can be placed in the desired location to render the experience. However, if you want Hotspots to display on some conditions and Toolbar in other conditions then the Syndigo team can facilitate a custom implementation on your site. Example implementations requiring Syndigo support are:
1. You want to leverage Hotspots when the Hero image is larger than 300px x 300px but want the experience to switch the Toolbar when the Hero image responds to be smaller than 300px x 300px
2. You want Hotspots on the first image in the hero carousel but Toolbar on secondary images in the carousel

For implementations limited to the Toolbar or Hotspots use the relevant HTML element wherever you want the icon(s) to display:

<syndigo-mosaic pageid="Page-ID-HERE"> </syndigo-mosaic>

<syndigo-hotspots pageid="Page-ID-HERE"> </syndigo-hotspots>

For more details on Toolbar implementations, customization options, and troubleshooting please reference the Toolbar on Product & Listing Pages section.

Examples

• Engaging Hero Contextual Hotspots & Inline - GE Lighting @ Lowe's

• Engaging Hero [Interactive tour & documents] & Inline [From the Manufacturer accordion] - Google Nest @ Best Buy