Follow these steps to add and configure the Hotspot Image Block to create interactive, shoppable visuals on your store.

Step 1: Add the Hotspot Image Block

• Open your theme editor.
• Click Add section and search for Hotspot Image (or Hotspot Image Block).
• Add the section to your page and position it where you want it to appear.

Step 2: Choose Display On

• Locate the Display On setting.
• Select one of the options:
  • All Devices — visible on both desktop and mobile.
  • Desktop — shows only on desktop screens.
  • Mobile — shows only on mobile devices.

Step 3: Set Heading Size & Title

• Under Heading Size, choose Small, Medium, or Large to control how big the title appears.
• In Title, enter the main heading for this image section.

Step 4: Add Description

• In the Description box, write a short paragraph highlighting product features, promotions, or details related to the image.

Step 5: Upload Main and Mobile Images

• Click Select to upload the Main Image for desktop.
• Optionally upload a Mobile Image to ensure perfect display on smaller screens.
• Preview both versions to check framing and composition.

Step 6: Configure Content Position

• For Desktop Content Position, choose Top, Middle, or Bottom.
• For Mobile Content Position, choose Top or Bottom for the best mobile layout.

Step 7: Apply a Custom Color Scheme (Optional)

• Toggle Custom Color Scheme ON to set your own background, text, or gradient colors that match your store’s branding.

Step 8: Add a Product Hotspot

• Click the + (Add Hotspot) icon.
• For each hotspot:
  • Icon SVG Image: Upload or paste SVG code for the hotspot marker.
  • Horizontal Offset: Move the hotspot left or right.
  • Vertical Offset: Move it up or down.
  • Position it over the correct product area on the image.

Step 9: Configure Mobile Hotspot Positioning

• Toggle Custom Mobile Positioning ON to reposition hotspots independently on mobile.
• Adjust Mobile Horizontal Offset and Mobile Vertical Offset as needed.

Step 10: Link Hotspot to a Product or Add-to-Cart

• Under Products, click Select and choose the item to link.
• Choose the hotspot action:
  • Open Product Details or
  • Direct Add to Cart.
• Repeat for all hotspots.

Step 11: Save & Publish

• Click Save in the theme editor.
• Publish your theme so the Hotspot Image Block goes live.