Highlighted product set

Section

Display a visually appealing gallery of images with product hotspots.

Available block

Adds an image with customizable hotspots to feature products.

🤔 How to upload an image (Highlight blocks) and adjust its height and width?

You need to add several Highlight blocks (image blocks) and set them up after arranging the overall layout. Here’s how:

STEP 1: Add the section & Highlight blocks to the section.

Add the Highlighted product set section. By default, you will have 4 Highlight blocks. You can delete, hide, or add more blocks as needed.

STEP 2: Assign an image to a block

Click on a Highlight block, under Image, click “Select”.

STEP 3: Set up the overall layout of the section

Click on the Highlight Product Set section to open the setting panel, and:

• 🖥️ For desktop: Find the Desktop layout, adjust the Number of columns (up to 4 columns)  & the Row height
• 📱 For mobile: Find the Desktop layout, adjust the Number of columns (1 or 2 columns) & the Row height

STEP 4: Adjust the height & width of an image

• 🖥️ For desktop: Go to Desktop layout > Column width & Row Height (from 1-4).
•  📱 For mobile: Go to Mobile layout > Column width & Row Height (1 or 2).

⚠️ Note: The Column width must be equal to or less than the Number of columns.

STEP 5: Click “Save” when done.

🤔 How to add the image hotspots for each Highlight block?

The default Highlight block has no image hotspots until you assign products to the block. You can add up to 3 image hotspots for an image. Here’s how to do it:

STEP 1: Navigate to the setting group:

Click on a Highlight block to open its settings panel, then scroll down to the Product 1 setting group.

STEP 2: Assign a product:

In Product, click Select and choose the product from the list.

Once you’re done, you will see the white circle (a.k.a hotspots) appearing on the image. To adjust its position, continue step 2.

STEP 3: Adjust the hotspot’s position:

Under the Product setting group, you will see 4 sliders to change the hotspot’s position:

• Hotspot desktop horizontal position
• Hotspot desktop vertical position
• Hotspot mobile horizontal position
• Hotspot mobile vertical position

Just change these 4 settings until your hotspot is at your desired placement.

⚠️ Note: These first 3 steps above guide you to set up the 1st hotspot for an image only. To bring up the 2nd and 3rd hotspots, repeat the steps for Product 2 and Product 3 setting groups.

STEP 4: (Optional) Change the hotspots’s colors:

The default color of the image hotspots is white. To change it, you need to:

• Click on the Highlight product set section to open its setting panel.
• Scroll down to the Colors setting group.
• Adjust the Hotspot (light) and Hotspot (dark).

STEP 5: Click “Save” when done.

🤔 How to adjust the information shown on each Product item?

When hovering on an image hotspot, you will see a small card that has the Product information, it is called a Product item. You can choose to show the product’s vendor and product rating

STEP 1: Navigate to the setting group:

Click on the Highlighted product set section to open its settings panel, then scroll down to the Product items setting group.

STEP 2: Choose what to show:

You can turn on/off the corresponding toggle to show or hide the information:

• Show vendor
• Show product rating

STEP 3: Click “Save” when done.

🤔 What customization options can you give your Map?