Image hotspot

Go to Online store > Themes > Current theme > Customize and select Image hotspot.

Image Hotspot section a dynamic blend of visuals and interactivity! Enhance your storefront with captivating images accompanied by strategically placed hotspots represented by clickable dots. Each dot is a gateway to a products, allowing users to seamlessly explore and shop directly from the image. Elevate your customer's experience by turning static visuals into an engaging shopping journey.

Section settings

Setting	Information
Display mode	Select the display mode between dots or button.
Sidebar heading	Add a heading for the sidebar that opens up when a product is clicked.
Button label	Check this checkbox if there is no h1 tag added on your page. This is needed for SEO optimalisations.
Button style	Select the style of the button.
Dot color	Select the color of the dot displayed on the image.
Image	Select the image that will be displayed. The dots will be displayed on this image.
Media ratio	Set a ratio for the image

Block settings

Setting	Information
Caption
Block description	Add a tagline to the section.
Caption	Set a caption for the Image hotspot section or leave blank to hide.
Caption size	Give a size to the Image hotspot caption.
Caption style	Select the color of the dot displayed on the image.
Image	Choose the style of the caption between subtitle or uppercase.
Media ratio	Set a ratio for the image
Heading
Block description	Title of the image hotspot section.
Heading	Set a heading to be displayed next to the image hotspot or leave this field blank to hide it from the image section.
Heading size	Set the size for the heading.
Convert to H1 tag	The heading tag can be converted to an H1 tag for better SEO. Note: There should only be one H1 tag per page.
Text
Block description	Display a text alongside the image.
Text	Fill in text to be displayed next to the image or leave this field blank to hide it from the image section.
Text size	Set the size for the text.
Button
Block description	Add a button to the section.
Button label	Set a label for the button. Note: This is only shown when the display mode is on button.
Button url	Attach an url to the button.
Button style	Select the style of the button.
Show arrow icon	Toggle to add or remove the icon inside the button.
Product
Block description	Add a product to the image, that can be bought through the hotspot.
Product	Select a product for the dot.
Horizontal position	Choose the horizontal position of the dot on the image and set it to your preference.
Vertical position	Choose the vertical position of the dot on the image and set it to your preference.

Image HotspotUpdated 3 months ago

Image hotspot