The Hotspots section shows a photo with dots on it, and each dot stands for one product. When a customer clicks a dot, a small card opens next to it with the product's photo, title and price, and a "View Product" link that opens quick view, a popup where customers choose options and add the product to the cart. Merchants also call this a shoppable image or a lookbook. To add one, click Add section in the editor and select one of the two Hotspots presets. It works on any page.
Presets
The Add section list shows two presets. Each one is a starting point, and its settings can change it into any of the others.
The Hotspots preset uses Cards over image and has two hotspots. Use it for a lifestyle photo with a few products in it.
The Hotspots with product card preset uses Product card beside image and has three hotspots, the first one shown when the page opens. Use it for a product photo where each part is a product of its own.
No preset comes with a photo or products. Choose the photo under Background image, and a product for each dot under Product in its Hotspot block. A dot without a product does not show on your store.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Background
In this section, the background image is the photo the dots sit on.
Setting
What it does
Background image
The photo. Without one, the section shows a plain gray area.
Background width
Full stretches the photo to the edges of the screen. Inset leaves a margin on both sides and rounds the corners. Shows with Cards over image.
Content
Setting
What it does
Style
Cards over image opens a small card next to a dot when it is clicked. Product card beside image puts the photo in the left two thirds and a full product card in the right third, as described under this table.
Image ratio
The shape of the photo. Natural keeps the photo's own shape. Landscape (16:9), Square and Portrait (4:5) crop it. Shows with Cards over image.
Dot style
Ring is a small white dot in a see-through white circle. Plus is a plus sign in a frosted circle.
Add button on the card
Adds a round add to cart button to each small card. The card's title then links to the product page, in place of the "View Product" link that opens quick view. Shows with Cards over image.
Open cards on
Click opens a card when the dot is clicked. Hover opens it when the pointer is over the dot. On touch screens, a tap always opens it. Shows with Cards over image.
Caption heading and Caption text
A heading and a short paragraph under the photo.
The add to cart button adds a product with one variant to the cart. For a product with several variants, it opens quick view. A sold-out product gets no button.
With Product card beside image, the photo is cropped to the height of the product card. Pointing at, clicking or tabbing to a dot shows that dot's product in the card. On screens narrower than 1,000 px, the product card hides and clicking a dot opens quick view. If no dot has a product, the section shows as Cards over image.
Each dot is a Hotspot block. A section holds up to 12. Click Add block in the section to add one.
Setting
What it does
Product
The product this dot stands for. A dot without a product shows in the editor but not on your store.
Display product
With Cards over image, opens this dot's card when the section scrolls into view, without a click. With Product card beside image, shows this dot's product in the card when the page opens. If several dots have it on there, the first one is shown.
Position
Where the small card opens: Top, Bottom, Left or Right of the dot. If there is no room on that side, the card opens on the opposite side, or on another side where it fits. Shows with Cards over image.
Horizontal position and Vertical position
Where the dot sits on the photo, from 0% to 100%. The horizontal position counts from the left edge of the photo, and the vertical position from the top edge. The default is 50% for both, the center of the photo.
Dot positions count from the edges of the photo's frame. When you change Image ratio or Style, the photo is cropped differently, so check that each dot still sits on its product. The same photo shows on every screen size.
The Hotspots section shows a photo with dots on it, and each dot stands for one product. When a customer clicks a dot, a small card opens next to it with the product's photo, title and price, and a "View Product" link that opens quick view, a popup where customers choose options and add the product to the cart. Merchants also call this a shoppable image or a lookbook. To add one, click Add section in the editor and select one of the two Hotspots presets. It works on any page.
Presets
The Add section list shows two presets. Each one is a starting point, and its settings can change it into any of the others.
The Hotspots preset uses Cards over image and has two hotspots. Use it for a lifestyle photo with a few products in it.
The Hotspots with product card preset uses Product card beside image and has three hotspots, the first one shown when the page opens. Use it for a product photo where each part is a product of its own.
No preset comes with a photo or products. Choose the photo under Background image, and a product for each dot under Product in its Hotspot block. A dot without a product does not show on your store.
Layout
Alignment, Padding top, Padding bottom, Margin top and Margin bottom are explained in Section layout settings.
Background
In this section, the background image is the photo the dots sit on.
Setting
What it does
Background image
The photo. Without one, the section shows a plain gray area.
Background width
Full stretches the photo to the edges of the screen. Inset leaves a margin on both sides and rounds the corners. Shows with Cards over image.
Content
Setting
What it does
Style
Cards over image opens a small card next to a dot when it is clicked. Product card beside image puts the photo in the left two thirds and a full product card in the right third, as described under this table.
Image ratio
The shape of the photo. Natural keeps the photo's own shape. Landscape (16:9), Square and Portrait (4:5) crop it. Shows with Cards over image.
Dot style
Ring is a small white dot in a see-through white circle. Plus is a plus sign in a frosted circle.
Add button on the card
Adds a round add to cart button to each small card. The card's title then links to the product page, in place of the "View Product" link that opens quick view. Shows with Cards over image.
Open cards on
Click opens a card when the dot is clicked. Hover opens it when the pointer is over the dot. On touch screens, a tap always opens it. Shows with Cards over image.
Caption heading and Caption text
A heading and a short paragraph under the photo.
The add to cart button adds a product with one variant to the cart. For a product with several variants, it opens quick view. A sold-out product gets no button.
With Product card beside image, the photo is cropped to the height of the product card. Pointing at, clicking or tabbing to a dot shows that dot's product in the card. On screens narrower than 1,000 px, the product card hides and clicking a dot opens quick view. If no dot has a product, the section shows as Cards over image.
Motion
Dark moment, Rise on scroll and Chapter title are explained in Section motion settings.
Blocks
Each dot is a Hotspot block. A section holds up to 12. Click Add block in the section to add one.
Setting
What it does
Product
The product this dot stands for. A dot without a product shows in the editor but not on your store.
Display product
With Cards over image, opens this dot's card when the section scrolls into view, without a click. With Product card beside image, shows this dot's product in the card when the page opens. If several dots have it on there, the first one is shown.
Position
Where the small card opens: Top, Bottom, Left or Right of the dot. If there is no room on that side, the card opens on the opposite side, or on another side where it fits. Shows with Cards over image.
Horizontal position and Vertical position
Where the dot sits on the photo, from 0% to 100%. The horizontal position counts from the left edge of the photo, and the vertical position from the top edge. The default is 50% for both, the center of the photo.
Dot positions count from the edges of the photo's frame. When you change Image ratio or Style, the photo is cropped differently, so check that each dot still sits on its product. The same photo shows on every screen size.