> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://doc.ecomx.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Image With Hot Spot # About Image With Hot Spot Section The Image with Hot Spot section is a versatile tool for creating interactive image-based content on your website. It enables you to add clickable Hot Spot to images that reveal additional information or product details when activated. This section is ideal for: * Product showcases with detailed feature callouts * Interactive guides and tutorials * Shoppable lookbooks and lifestyle images * Educational content with annotated visuals * Multi-product promotional displays The section excels at combining visual content with interactive elements while maintaining full customization control for both desktop and mobile experiences. [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1901096103/0d54dd3818cb75ee476ab3df2162/AD_4nXferHnggFjNG-f-I5N8ICT7P4BEdRXgTq65HiOrmL8P36KF_9i7UgY1YBHWcCuTp20tIyNuRve3JsUNYIx0josDXhADkR9xgaSIJ2OAVXqbtr8i1fDnaWzmzCEyQGRfyVgkeylWF0_Ki-zc75ubWdS-05UuzG.png?expires=1792402200&signature=5354685899aa1427a045a83d7b17e3285611c7eb0922ce15bf270c726d485bac&req=dSknF8l3m4BfWvMW1HO4zYJJzD7K0XweTWWE1iOzcS0%2FlGDXHyYDlT%2FP0OX0%0AxjypsKWcR1aK2LuF8Eg%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/c/c/2/f/cc2fef3b48de9000/fda2f553-b636-4516-9268-f594b6_1r0fitd.png) # How To Access Image With Hot Spot Section You can follow the following steps to access the section: 1. Navigate to your Admin Dashboard 2. Click the "**Add section**" button 3. Search for "**Image with Hot spot**" 4. Select to add the section to your page [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1901096112/747452c7a0cccf57dc5229b1a966/AD_4nXcnLj7skVu1KtaS14nRzxHFGfi3Yc7ztWGmU2g9vhdXe1QATX4G22GzhDELspJh_M7i0sJyLIRNWPg2w6ke-hmoHZjGClDVwtwgKBzTv_kJS86Aos4HO3Fjd4eekccgfYQkeylWF0_Ki-zc75ubWdS-05UuzG.png?expires=1792402200&signature=4bd0467a44688cb6786d7a1e1d85111e639f5cc0fc220a70fa95ff6fa50a7389&req=dSknF8l3m4BeW%2FMW1HO4zdw3K%2BCVdbFrDm5qKizVx4REonXknDPYmPQEiHc6%0A6G16mzWA4Eogx4i2Phk%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/f/4/c/d/f4cd88a8a5849000/a7d01161-855c-41dd-9dd7-b90bbb_1vwnx88.png) # How to Configure Image With Hot Spot Section ## Basic Components [![](https://saleshunterthemes-3030d0343deb.intercom-attachments-1.com/i/o/h9w3pjg7/1901096119/cc15de0b4bf0ac18f4d95945b8bc/AD_4nXdmEJe_I0IL7Q7xx0KHD4qNkL1GhOLTzfL0OWGhKRg_WbmdVuhFWEUZAxmKzF_X2Xhkb_bObYGDoSA1RuVQtsO3Gjk29Pmct_H_fs9W7JUdMu5nHQX4rd4BC6q_P53sJe0keylWF0_Ki-zc75ubWdS-05UuzG.png?expires=1792402200&signature=71cd272c0bbc78c523663defef1806d8e936bae6f9c80cff466eb7b7efef126e&req=dSknF8l3m4BeUPMW1HO4zbj1m8NTft7i4arsmcywxwt34XhdOuT5pGGlVygF%0AipKT9whcfa6IgZhbzzM%3D%0A)](https://storage.crisp.chat/users/helpdesk/website/-/1/9/a/4/19a4b440baf45000/8ed0af01-a03f-4ef5-9439-5d984c_j81eo2.png) The Image with Hot spot section consists of several customizable elements: * General settings * Text * Image * Desktop layout * Mobile layout * Hot spot ## General Settings * Color Scheme: Choose a predefined color scheme that aligns with your store design. ## Text * Subheading: Add a short tagline to provide context for the section. * Section Heading: Enter the main heading for the section (e.g., "Explore Our Features"). Enable the

tag if this is the primary heading of the page (recommended for SEO purposes). * Text Size: Select a size for your text, such as "Extra Large" for better visibility. * Section Description: Add supporting text to explain the purpose of the section. Use the formatting options (bold, italic, links, bullet points) for emphasis. ## Image * Default Image: Upload or select an image that will be the background for your hot spots. You can also explore free images from the available library. * Mobile Image (Optional): Choose a separate image optimized for mobile devices, if necessary. ## Desktop Layout * **Image Width**: Choose between "**Stretch**" or "**Fit**" depending on how you want the image to appear on larger screens. * **Content Position**: Align content vertically (Top, Middle, Bottom) and horizontally (Left, Center, Right). * **Overlay Opacity**: Adjust the transparency level of the overlay to make text and hot spots more visible. * **Custom Mask/Content Overlay Color**: Define specific overlay colors for branding consistency. ## Mobile Layout * Content Alignment: Choose the alignment of the text and hot spots for mobile screens (Left, Center, or Right). ## Hot Spot * Hot Spot Background and Icon Colors: Customize the colors of the hot spot background and icon to match your design theme. ## Text Hot Spot Block **Positioning Hot Spots** * Use the sliders for Top Offset and Left Offset to precisely place the hot spots on your image: * Adjust these for both the default and mobile images (if applicable). **Hot Spot Text** * **Heading**: Add a title for the feature or product highlighted by the hot spot. * **Description**: Provide a detailed explanation of the feature. Use the text editor for formatting options. * **Link**: Add a label (e.g., "Learn More") and paste the destination URL for users to explore further. ## Product Hot Spot Block * **Product Selection**: If highlighting a product, select it from your store's product list. * **Show Vendor/Price**: Toggle to display the product vendor and price information directly on the hot spot. # Common Cases and FAQs **1. Can I add multiple hot spots to a single image?** Yes, you can add as many hot spots as needed. Use the offset sliders to position them precisely on the image. **2. What types of content can I link to a hot spot?** You can link to product pages, blog articles, landing pages, or any other URL. Simply add the destination link in the "Link" field for the hot spot. **3. Does this section support mobile optimization?** Absolutely. You can customize a separate image for mobile devices and adjust the alignment and positioning of hot spots for the mobile layout. **4. Can I use this section for non-product purposes?** Yes, this section is flexible and can be used for tutorials, educational content, or showcasing features of a service.