Truly fine
Documentation.
Image hotspots section
Last update:
This section was introduced in version 2.2
The “Image hotspots” section allows you to create an interactive image experience on your Shopify store. By adding hotspots to an image, you can highlight different products or features and provide customers with additional information through clickable areas.
Section settings
Heading: The title for the entire section.
Subheading: The subtitle of the section
Link Label: The text for the call-to-action link that accompanies the section, enticing users to learn more or view a collection.
Link: The URL where the link label will direct users, which could be a specific product page, collection, or external site.
Image: The primary image where hotspots will be placed. It serves as the visual focus for the hotspots.
Colors
Hotspot Color: Customize the color of the hotspot markers to make them stand out or blend with the image.
Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.
Section spacing
The section spacing settings gives you the option to adjust the top & bottom section spacing values.
Hotspot block
The section consists of “Hotspot” blocks with the following settings:
Horizontal/Vertical position: Adjust these sliders to position the hotspot on the image. Percentages determine the spot’s location relative to the image dimensions.
Image: An optional image to display within the hotspot popup or information card.
Heading: The title of the hotspot, which will appear on the information card associated with the hotspot.
Description: Detailed text that appears within the hotspot’s information card, offering more in-depth information about the feature or product highlighted.
Button label: The text for the call-to-action button within the hotspot’s information card.
Link: The URL to which the call-to-action button will direct users.
Product: If a product is selected, this option will replace the custom text, description, and image settings with a product card that includes the selected product details.
Show Vendor: Toggle to display the product’s vendor name.
Show product rating: If a product rating app is installed, this will show the product’s rating.
Show stock status: Indicates whether the product is in stock.
Show “Add to Cart” button: Displays the ‘Add to Cart’ button for immediate purchase.
Can't find what you are looking for? Feel free to submit a request.