Shop the look
Promote multiple products in an image with Hot spots links for each product.
Key features
Hot spots
Product showcase
Flexible overlay content
Custom layout and styles
Set up image
Upload a single image of two or more of your products together. Adjust the position, size, and shape of your image before adding the hot spots next.
Image and overlay color
Upload an image and optional mobile image for smaller screen sizes. Adjust the overlay colour or set it to 0% to turn it off.
Click section to find settings
Image
Custom mobile image
Overlay opacity
0 - 100%
Color scheme
Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Image layout
Set the image placement, width, and media ratio.
Click section to find settings
Desktop placement
Left / Right
Desktop width
40 - 70%
Media ratio
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Product showcase
The product showcase appears next to the main image. When hot spots are clicked, the linked product will appear with an image, title, price, and other details. You can customize the image ratio, image width, and other styles, including the overall appearance.
Heading
Upload an image or video to appear with the collection list on mobile devices.
Click section to find settings
Heading
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Heading size
1 - 6
Desktop product style
Click section to find settings
Image ratio
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image width
200 - 500px
Vendor
Out of stock badge
Sale price
30 - 70%
Appearance
Plain Card
Corner radius
Mobile product style
Click section to find settings
Image ratio
Portrait (2:3) Portrait (4:5) Square (1:1) Landscape (5:4) Landscape (3:2) Custom
Image width
200 - 500px
Vendor
Out of stock badge
Sale price
Select color
Card color scheme
Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Card padding
Use globals Custom
Corner radius
Mobile placement
Over image Stacked below
Overlay style
Gradient Solid
Overlay opacity
0 - 100%
Add hot spots
Hot spots are clickable icons that mark the different products in your shoppable image. Select what products to link to and position them over the products in your image.
Click hot spot block to find settings
Product
Select the product that the hot spot links to.
Horizontal position
For desktop and mobile, use the slider to move the hot spot from left to right to align with the product's horizontal position.
Vertical position
For desktop and mobile, use the slider to move the hot spot from bottom to top to align with the product's vertical position.
Hot spots style
Choose to show a number for each hot spot, set the hot spot and number colors, and adjust their size for desktop and mobile.
Click hot spot block to find settings
Show hot spot numbers
Hot spot color
Number color
Desktop size
20 - 40px
Mobile size
20 - 40px
Section styles
Customize general style options for the section and content area. Settings for Content area allow you to adjust the width, borders, and dropshadow of the container of the section content.
Click section to find settings
Content area
Width
Full width Full width padded Page width
Full width on mobile
Available for Full width padded option.
Set content to page width
Border
Color scheme
Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Corner radius
Available for Full width padded and Page width options.
Dropshadow
Section
Top padding
0 - 27
Bottom padding
0 - 27
Dividers
None Top only Bottom only Both
Force dividers full width
Color scheme
Default Inverse Soft Accent Accent inverse Overlay Color scheme 1 Color scheme 2
Anchor ID
Link directly to the section on any page. Learn more
Last updated