Product mapping

This component provides the ability to upload an image in which you can tag and/or position products from your store.

It can be very useful for example to display a Collection where there are multiple products that you sell, so clients can see which ones they are and buy them, or go to their respective product pages to see more details.

Component settings

When adding it you will find several options to customize it, which are explained next.

Width

Allows to define the maximum width that the component will stretch to the browser window.

You can read more about how this option will affect the component on this page.

---

Image options

Within this group you will find the options to upload images for both desktop and mobile devices.

Note: When uploading an image for mobile, additional options on the Product subcomponent will appear so you can customize the position of its Marker.

---

Markers options

Markers are the dots or elements that allow clients to see the products you add within the component.

In this group you will find several options to customize how they look and behave.

Size

Defines the size of all markers, which affects their width and height, as well as the icon (+) inside of them, through predefined options.

When choosing Custom, you will be able to manually adjust the size for desktop and mobile devices.

Style

Defines the shape that markers will be presented with.

Background

Defines the color of the background for all markers. The color of the icon (+) will adjust automatically to have a proper contrast.

Animation

Displays a tilting animation on the markers.

When choosing Hover, the animation will trigger only when the cursor moves over the marker. For the case of Always, the animation will always apply.

When choosing None, there will be no animation, and only the rotation of the icon on “hover” state will be present.

---

Product options

In this group you can define how products will be displayed when clicking in a marker, which depends if the Enable Quick View option is enabled or not, as it follows:

1. If enabled, it will work based on what you have defined within Theme settings > Product Quick View.
2. If disabled, when clicking on a marker the product will be displayed next to it, within a small window –tooltip as we will refer to it– with details such as image, name, price, among others. This will also make visible the following options for you to customize.

Style

Defines the shape of the corners of the tooltip for all products.

Vertical alignment

Defines the vertical alignment between the product’s image and content.

Product content colors

Defines the Color pack for all product tooltips.

---

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component.

---

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available on this page.

---

---

Subcomponent settings

The component works by using a subcomponent called Product, in which you can the products you want to tag within the image.

It has the following options for you to customize it.

Product

Here you must choose a product from your store. By default, it comes with first one of the list of products within your store’s admin panel at Products > All products.

---

Marker position

Within this group you will find Top and Left options to control the position of the marker, through percentages that are based on the width and height of the image you uploaded within the main component settings.

---

Marker position (mobile)

This group will be visible only if you uploaded an image for mobile devices at the main component settings.

You will also find the Top and Left options to control the marker position for that specific case.

Note: If you don’t upload an image for mobile, the previous controls will be applied for all devices, desktop and mobile.