Image Hotspot

The Image Hotspot section turns any image into an interactive experience. Animated points (hotspots) draw the visitor's attention and reveal, on click or hover, rich tooltips with a title, description, and call-to-action button. The <image-hotspot> web component automatically handles smart tooltip positioning, touch detection, keyboard navigation, and position recalculation on window resize.

This is one of the most effective conversion tools in the theme: instead of leaving the visitor to guess the details of a product, you show them directly on the image, exactly where they matter.

Why use hotspots?

Hotspots address a fundamental problem in e-commerce: the visitor sees a product but cannot touch it. By letting them visually explore the details, you reduce uncertainty and build confidence.

Impact on conversion:

• Increased engagement -- Interactive elements increase time spent on the page, a positive signal for purchase decisions.
• Product education -- Explain materials, features, or ingredients directly on the image, without forcing the visitor to read a long block of text.
• Fewer returns -- A customer who understands exactly what they are buying is less likely to return the product.
• Seamless navigation -- Each hotspot can include a CTA button linking to the product page, a materials page, or a size guide, without visually leaving the current page.

Guide: Create your first hotspot image in 5 steps

Step 1: Choose your image

In the Shopify editor, add the Image with hotspots section and then select your main image.

Desktop vs. mobile image:

The section supports two separate images. The desktop image is displayed at screen widths of 750px and above; the mobile image is used below that. If you do not set a mobile image, the desktop image is used everywhere.

Image height:

Step 2: Add your hotspots

Click Add block in the editor's side panel, then select Hotspot. Each hotspot is an independent block with its own position and content settings.

You can also add a Heading block (limited to 1) to display a title above the image.

Recommended order:

1. Add the Heading block first if you want a section title.
2. Then add your Hotspot blocks one by one.
3. Configure each hotspot individually (position first, then content).

Step 3: Position your hotspots

This is the most important step. Each hotspot has 4 position sliders: two for desktop (top, left) and two for mobile (top_mobile, left_mobile).

How positioning works:

Positions are expressed as a percentage of the image, from 5% to 95%. The point top: 5%, left: 5% corresponds to the upper-left corner, and top: 95%, left: 95% to the lower-right corner.

     5%        25%        50%        75%        95%   <- left
  5% +----------+----------+----------+----------+
     |          |          |          |          |
 25% +----------+----------+----------+----------+
     |          |          |          |          |
 50% +----------+----------+----------+----------+
     |          |          |          |          |
 75% +----------+----------+----------+----------+
     |          |          |          |          |
 95% +----------+----------+----------+----------+
  ^
 top

The 4 sliders per hotspot:

Step 4: Configure tooltip content

Each hotspot can contain three content elements:

Available button styles:

Step 5: Adjust size and test

Hotspot size:

The Hotspot size slider controls the diameter of all clickable points in the section, from 30px to 60px. The default value of 44px is optimized for accessibility (minimum touch target recommended by WCAG).

Pre-publish checklist:

• [ ] Verify each hotspot in both desktop AND mobile view in the editor.
• [ ] Click each point to confirm the tooltip opens correctly.
• [ ] Verify that tooltips do not overflow the screen (smart positioning handles this, but a visual check is always helpful).
• [ ] Test CTA buttons: do the links point to the correct pages?

Smart tooltip positioning

One of the key strengths of this section is the automatic positioning of tooltips. The <image-hotspot> component analyzes the position of each point on the image and automatically chooses the best location for the tooltip.

Positioning logic:

The component evaluates two axes:

• Horizontal axis: if the hotspot is in the left 30% of the image, the tooltip opens to the right. If it is in the right 30%, it opens to the left.
• Vertical axis: if the hotspot is in the top 30% of the image, the tooltip opens downward. If it is in the bottom 30%, it opens upward.

Positioning guide

Here is a quick reference for common positions. Use these values as a starting point, then fine-tune in the editor.

Common positions

Placement tips

• Avoid extreme edges (5-10%): tooltips may be truncated despite smart repositioning.
• Space out hotspots: keep at least 15-20% distance between two points to avoid overlap.
• Align strategically: place hotspots on real elements in the image (seam, button, ingredient), not in empty space.

Hotspot animation

Each hotspot displays a continuous pulse animation that draws the visitor's eye. The animation uses a semi-transparent circle that grows and fades in a loop every 2 seconds.

Animation behavior:

Performance: The animation uses exclusively transform and opacity (GPU-accelerated properties), ensuring 60fps rendering without impacting the main thread.

Interaction: Desktop vs. Mobile

The component automatically detects the device type and adapts its behavior.

Desktop (mouse)

On desktop, the hotspot--hover-enabled class is added, enabling hover-to-open via CSS. The close button (X) is hidden since leaving the hover is enough to close the tooltip.

Mobile (touch)

On mobile, the close button (X) is always visible, and focus is automatically moved to it on open to make closing easy.

Tooltip visual effects

The tooltip uses several effects to stand out from the image without feeling aggressive:

The tooltip width is 30rem on mobile and 35rem on desktop, with a maximum of 90vw to never exceed the screen.

Full configuration reference

Section settings

The section also includes standard global settings: margins (desktop/mobile), color palette, separators, entrance animations, visibility, and section ID.

Heading block (limit 1)

Main title displayed above the image. Uses the standard BLOCK_HEADING schema-part with subtitle, title, size, and spacing.

Hotspot block (unlimited)

Detailed use cases

1. Product details (fashion, tech, furniture)

The classic use case: a product photo on a neutral background with hotspots on each important detail.

Recommended configuration:

• Image: High-resolution product photo, solid background or understated lifestyle setting.
• Height: Adapt (respects the natural ratio).
• Number of hotspots: 3-5 maximum.
• Tooltip content: Short title (e.g., "Full-grain leather"), technical description (2-3 lines), "View material" button linking to a dedicated page.
• Button style: Secondary to stay subtle.
• Hotspot size: 44px (default).

Example positions for a handbag:

2. Recipe / Ingredients

Photo of a finished dish or cosmetic product with hotspots on each visible ingredient.

Recommended configuration:

• Image: Culinary or product photo, top-down or 3/4 view.
• Height: Medium for good detail visibility.
• Content: Title = ingredient name, description = amount + benefit, no CTA button (informational only).
• Hotspot size: 36-40px (more subtle on a busy image).

3. Complete look / Outfit

Lifestyle photo with a model wearing a full outfit. Each hotspot points to a different product.

Recommended configuration:

• Desktop image: Full-length photo, landscape format.
• Mobile image: Same photo cropped to portrait (bust or mid-body) so details remain visible.
• Content: Title = product name, description = price + available sizes, "View product" button in Primary style.
• Hotspot size: 44px for good visibility.
• Mobile positions: Adjusted separately since the framing changes.

4. Store map / Showroom / Infographic

Image of a floor plan, map, or infographic with interactive zones.

Recommended configuration:

• Image: Floor plan or diagram on a light background, high resolution.
• Height: Large so that details are legible.
• Content: Title = zone name, description = hours, available services, "Book now" or "Learn more" button.
• Button style: Tertiary for informational links, Primary for bookings.
• Hotspot size: 50-60px for clearly visible hotspots on a large image.

Accessibility

The Image Hotspot section meets WCAG accessibility standards:

ARIA structure

Keyboard navigation

Visible focus

Hotspots and the close button display a visible focus outline (outline: 2px solid) when navigated via keyboard using :focus-visible. This indicator does not appear when using a mouse.

Reduced motion

When prefers-reduced-motion: reduce is active:

• The pulse animation is disabled.
• All CSS transitions (open/close, hover, scale) are removed.
• Tooltips appear and disappear instantly.

Touch target

The default size of 44px meets the WCAG 2.5.8 recommendation (minimum target of 44x44 CSS pixels). If you reduce the size below 44px, the area around the point remains clickable thanks to the button's touch target zone.

Next steps

• [Banner](/en/sections/banner) -- Combine a full-screen hero image with hotspots on a separate section below.
• [Before / After](/en/sections/image-before-after) -- Compare two images interactively with a before/after slider.
• [Gallery](/en/sections/gallery) -- Present multiple images with filters, complementing hotspots on a key image.
• [Featured Product](/en/sections/featured-product) -- Highlight the main product with hotspots as a complementary section.