Brickspace Lab
Contact usContact ShopifyTry a theme
Space
Space
  • Space documentation
  • Getting started
    • Selecting theme colors
  • Theme typography
  • Guides
    • Using color and option swatches
    • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing "Add to cart" for a product
  • Disable "quick add" for a product
  • Templates
    • Collection template
  • Product template
  • Blog template
  • Article template
  • Sections
    • Sections
      • Announcement
      • Header
      • Cart drawer
      • Menu drawer
      • Search drawer
      • Footer
      • Tooltip
      • Fixed menu
      • Featured product
      • Footer
      • Fixed menu
      • Slideshow
      • Email sign-up
      • Video
      • Alt collection grid
      • Banner
      • Block reveal
      • Blog posts grid
      • Collage
      • Collapsible content
      • Collection list grid
      • Collection list slider
      • Collection slider
      • Comparison table
      • Contact form
      • Countdown
      • Custom liquid
      • Discount
      • Featured collection grid
      • Icon grid
      • Image hotspot
      • Logo list
      • Marquee
      • Navigation slider
      • Product list
      • Recently viewed
      • Rich text
      • Search banner
      • Slider
      • Split banner
      • Static chat
      • Store locater
      • Tabs
      • Testimonial grid
      • Testimonial slider
      • Text highlight
  • General
    • Changelog
      • v2.0.0
      • v1.2.1
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
      • v2.0.0
    • Cloning a demo theme
      • Shimmer
Powered by GitBook
On this page
  • Section overview
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections
  2. Sections

Image hotspot

Section overview

The Hotspot section allows you to create an interactive image with clickable hotspots that can reveal product information or link to other pages. This creates an engaging and interactive shopping experience.

Common use cases

  • Showcasing featured products on a lifestyle or context image

  • Creating interactive lookbooks where customers can explore different items

  • Highlighting specific features or details of complex products

  • Building shoppable banners with multiple points of interest

Usage tips

  • Use high-quality images that contrast well with the hotspot indicators

  • Position hotspots strategically to highlight key areas of the image

  • Keep mobile users in mind when positioning hotspots - ensure they're not too close together

  • Consider using the gradient overlay option to improve text readability

  • Test the section on both desktop and mobile to ensure hotspots remain accessible and visible

Section settings

Setting
Description

Image background desktop

The main background image displayed on desktop devices

Image background mobile

An alternative image optimized for mobile devices

Show entire image

When enabled, displays the full image instead of cropping it to fill the container

Y spacing

Controls the vertical height of the section

Color scheme

Sets the overall color theme for the section

Text color

Determines the text color, with options to force light or dark regardless of scheme

Border color

Sets the color for any borders applied to the section

Enable gradient

Adds a gradient overlay to improve text visibility over images

Enable background overlay

Adds a background color behind text content for better readability

Border position

Determines where borders appear (top, bottom, both, or none)

Vertical alignment

Controls where content appears vertically (top, middle, bottom)

Horizontal alignment

Controls where content appears horizontally (left, center, right)

Enable header overlap

Allows the section to overlap with the header

Enable margin

Controls whether the section content has horizontal margins

Enable max width

Limits the width of text content for better readability

Visibility

Controls whether the section appears on all devices, mobile only, or desktop only

Block settings

Heading

This block adds a prominent heading to the section.

  • Block limit: 1

Setting
Description

Content

The text to display as the heading

Image

This block allows you to add additional images on top of the background image.

  • Block limit: 3

Setting
Description

Image

The image to display

Image height

Controls the height of the image in pixels

Content

This block adds rich text content to the section.

  • Block limit: 3

Setting
Description

Content

Rich text content that can include formatting and multiple paragraphs

Buttons

This block adds one or two call-to-action buttons.

  • Block limit: 1

Setting
Description

Button label

Text displayed on the primary button

Button URL

Destination link for the primary button

Button color

Style and color variant for the primary button

Secondary button label

Text displayed on the secondary button

Secondary button URL

Destination link for the secondary button

Secondary button color

Style and color variant for the secondary button

Product

This block creates a hotspot that reveals a product card when clicked or hovered.

  • Block limit: 20

Setting
Description

Product

The product to display when the hotspot is activated

Y alignment desktop

Vertical position of the hotspot on desktop (percentage)

X alignment desktop

Horizontal position of the hotspot on desktop (percentage)

Y alignment mobile

Vertical position of the hotspot on mobile (percentage)

X alignment mobile

Horizontal position of the hotspot on mobile (percentage)

Link

This block creates a hotspot that links to another page and displays a tooltip.

  • Block limit: 20

Setting
Description

Title

Text displayed in the tooltip when hovering over the hotspot

URL

Destination link when the hotspot is clicked

Y alignment desktop

Vertical position of the hotspot on desktop (percentage)

X alignment desktop

Horizontal position of the hotspot on desktop (percentage)

Y alignment mobile

Vertical position of the hotspot on mobile (percentage)

X alignment mobile

Horizontal position of the hotspot on mobile (percentage)

Last updated 23 days ago

Was this helpful?