Everything you need to set up and customize Hotspot blocks — from placing interactive product markers on images to configuring popup cards and Quick View overlays.
Hotspots are interactive markers that you place on top of an image to highlight specific products. When a visitor clicks or taps on a hotspot, a small popup card appears showing the product's image, name, and price. This lets shoppers discover and explore products in a visual, engaging way — directly from a lifestyle photo, room scene, or styled product image.
In the Boardwalk theme, hotspots are added as individual Hotspot blocks inside a Hotspots group. Each hotspot is positioned using horizontal and vertical percentage sliders, so you can place markers precisely where a product appears in the image. The hotspots display as animated pulsing dots that draw attention, and each one can link to a product from your store.
Follow these steps to add interactive product hotspots to any section that supports them in the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the
page where you want to add hotspots using the page
selector dropdown at the top center of the editor.
Hotspot blocks live inside a Hotspots group, which is available in sections that support them (such as image-based sections). Add the appropriate section to your page if it's not already there, or click on an existing section that includes a Hotspots group.
In the Theme Editor sidebar, expand the section and look for the Hotspots group. This is the container that holds all of your individual hotspot markers. Click on it to see any existing hotspot blocks inside.
Click Add block inside the Hotspots group and select Hotspot. A new hotspot marker will appear on the image. You can add as many hotspot blocks as you need — one for each product you want to highlight.
Click on the hotspot block you just added. Use the Product picker to select a product from your store. Once selected, the hotspot's popup card will automatically show the product's image, title, and price.
Note: The product you link must be
published and active in your Shopify
admin. Products in draft or archived status won't
display on your storefront. Go to
Products in your admin to check the
product's status.
Use the Horizontal position and Vertical position sliders to move the hotspot marker to the exact spot on the image where the product appears. Both sliders use a percentage scale from 5% to 95%, where 5% is the far left (or top) edge and 95% is the far right (or bottom) edge of the image.
Tip: Use the live preview in the Theme Editor to fine-tune your hotspot positions. Small adjustments to the sliders will move the marker in real time so you can place it precisely over the product in your image.
Click Save in the Theme Editor. Preview your page to make sure each hotspot is positioned correctly and that the popup cards display the right products when clicked.
Each hotspot is an individual block inside the Hotspots group. These are the settings available on every hotspot block.
Select a product from your store to link to this hotspot. When a product is assigned, clicking the hotspot dot opens a popup card showing the product's image, title, and price. If no product is selected, the hotspot appears as an empty marker with no popup.
Controls the left-to-right placement of the hotspot on the image. Uses a percentage scale where lower values move the marker toward the left edge and higher values move it toward the right. Range: 5% to 95%.
Controls the top-to-bottom placement of the hotspot on the image. Uses a percentage scale where lower values move the marker toward the top edge and higher values move it toward the bottom. Range: 5% to 95%.
When a hotspot has a product assigned, clicking or tapping the hotspot dot opens a small popup card directly on the image. This card gives visitors a quick look at the product without leaving the page.
The popup card includes the following details:
Shows the product's featured image as a small thumbnail. If the product has no image, a placeholder graphic is displayed instead.
Displays the product name next to the image. This text is pulled directly from the product's title in your Shopify admin.
Shows the current product price. If the product has a compare-at price set, both the original and discounted prices are displayed so visitors can see the savings.
Hovering over the product image in the popup reveals a magnifying glass icon. Clicking the popup card opens the Quick View modal with full product details, variant selection, and an Add to Cart button — all without leaving the page.
Note: For the sale price to appear in the
popup card, you need to set a
Compare at price on the product variant in
your Shopify admin. Go to
Products → select the product
→ Pricing and enter a value in the
"Compare at price" field.
The Hotspots group is the container that holds all of your individual hotspot blocks within a section. It doesn't have its own visual settings — it simply acts as an organizer for the hotspot markers you add inside it.
You can add, remove, and reorder hotspot blocks inside the group at any time. Reordering hotspots in the sidebar changes their stacking order on the image but doesn't affect their visual position, which is controlled by each hotspot's horizontal and vertical position settings.
Tip: If you're working with a complex image that features many products, give each hotspot a recognizable product so you can easily identify them in the sidebar. Hotspot blocks are labeled by the product name they're linked to.
Hotspot blocks come with features that work automatically — no apps or custom code needed.
Each hotspot displays as a small dot with a subtle pulsing animation that draws the visitor's attention. This visual cue lets shoppers know the image is interactive and that there are products to explore.
Clicking or tapping a hotspot dot opens the product popup card. Clicking the same dot again (or clicking elsewhere on the image) closes it. Only one popup can be open at a time, so opening a new hotspot automatically closes any other open popup.
Clicking the popup card opens a Quick View modal with full product details — including an image gallery, variant selection, quantity picker, and Add to Cart button. Product data loads in the background without a page reload, so the experience feels fast and seamless.
When a linked product has a compare-at price, both the original and discounted prices appear in the popup card. The sale price is highlighted so visitors can easily see the discount.
Hotspots are positioned using percentage values rather than fixed pixel coordinates. This means they automatically scale and stay in the correct location as the image resizes across different screen sizes and devices.
Product images inside hotspot popups are loaded only when needed, which helps keep your page fast. The images use responsive sizes to serve the smallest file appropriate for the popup's display size.
Each hotspot button includes a descriptive label for screen readers (e.g., "View [Product Name]"), and the popup uses proper expanded/collapsed states. This ensures that visitors using assistive technology can navigate and interact with hotspots.
If a hotspot block has no product assigned, it still appears on the image as a marker (styled differently to indicate it's empty), but no popup card will open when clicked. This is useful while you're still setting up your layout and haven't assigned all products yet.
A few important details to keep in mind when working with hotspot blocks.
Products in draft status won't display on your storefront. Go to Products in your admin and make sure the product status is set to Active.
The hotspot popup displays the product's featured image. For the best appearance, make sure your linked products have at least one image uploaded in the Shopify admin under Products → Media.
For the sale price to display in the hotspot popup, you need to set a Compare at price on the product variant in your Shopify admin. Go to Products → select the product → Pricing and enter a value in the "Compare at price" field.
Hotspots work best on lifestyle or styled photos where individual products are clearly visible. Avoid placing hotspots too close together, as their popup cards may overlap on smaller screens.