Idea: Image Map

[vadimjustus]

Description (*)

The ability to add an image and place marker on it, with whole content blocks (title, description, etc.)

Expected behavior (*)

The result could look like this:
https://www.blizz-z.de/systemaufbau/balkone-und-terrassen-mit-drainagefunktion-frisch-in-frisch

[m2-assistant]

Hi @vadimjustus. Thank you for your report.
To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[tkacheva]

@vadimjustus this is what we call a shoppable content: ability link images with products. We did some of the UX exploration on that already, but you brought up an interesting point - it's not just products we need to connect images with but also curated content fragments in the form of blocks or just custom content

[tkacheva]

@vadimjustus
here is what we've defined as requirements on our side so far. Might be useful as first draft we can discuss:

Story

As a Marketer I want to display products in the context of their use so that I make the content shoppable

Acceptance Criteria

• User can create single shop the look element - combination of image and products associated with the image or organize them in slider
• User defines the product positioning on the image by adding a hot spot or selecting a clickable area
• User chooses what information to display on user activating the hot spot/clickable area:
  • cms block
  • product
  • custom content
• User chooses the product template to use if product selected to display:
  • product name and the price
  • Product information
• User chooses the position of the information associated with spot/clickable area from the predefined templates
• User chooses hot spot/clickable area to be activates by default when page loads (optional)
• User saves the configuration and sees the preview rendered on stage
• User saves the page and sees the image loaded on the storefront
• User sees the indication of the clickable areas on the image
• User clicks the image clickable area and sees the associated information displayed/updated

Mockups:

https://xd.adobe.com/view/7ae1f5f2-eba5-4de1-a5d6-c948cbd30a56-2fb2/

[vadimjustus]

@tkacheva
Great job! This will definitely meet the expectations of our customers. Thank you!