Taiga
documentation

Image with Hotspots

The "Image with Hotspots" section provides a simple yet engaging way to show images or videos with clickable areas. When clicked, these areas open a popup with text, videos, and images, offering a deeper look into the content. This feature is great for highlighting products or features, making it easier for visitors to explore and learn more in an interactive and straightforward manner, adding depth to your shops presentation.

✅ Steps

  1. Open the Theme Editor.
    Navigate to your Shopify dashboard and open the Theme Editor for your store.
  2. Add the Image with Hotspots section.
    Click on 'Add section' and select 'Image with Hotspots' to integrate this section into your page layout.
  3. Save your changes.
    After customizing the Image with Hotspots section, click 'Save' to implement your adjustments.

Edit Section Settings:

Color Scheme: Customize to align with your shop aesthetic.
Section Background Color: Choose a solid color or gradient to make the section stand out.
Numbered Hotspots: Toggle to display hotspots with numbers for easy identification.

    Desktop Layout:

    Full Desktop View: Enable to maximize the media presentation on desktop screens.
    Media Position: Choose between 'Media first' or 'Media last' to set the order of text and image.
    Text Content Width: Adjust from 'Wide', 'Default', to 'Narrow'.
    Text Alignment: Set text alignment to 'Left', 'Center', 'Right'.
    Full Width Buttons: Buttons expand to match the width of their container.
    Margins: Customize top and bottom margins for structured spacing.

      Mobile Layout:

      Text Alignment: Choose from 'Left', 'Center', 'Right'.
      Full Width Buttons: Enable buttons to fill the container width.
      Hide Hotspot Titles: Toggle to display hotspots without titles for a cleaner look.
      Margins: Adjust top and bottom margins to optimize mobile viewing.

        Theme Settings:

        Content Width: Set the width of the section. Note: Affects the width of every section on your site.
        Color Scheme: Set the color of the opening modal. Note: Impacts following sections: Promotional Popup, On Demand Info, and Image With Hotspots.

          Customize Blocks:

          Image (or Video) Block:

          Image Picker/Video URL: Choose an image or link a video (supports Youtube, Vimeo, MP4 files).
          Media Toggle: Switch between displaying an image or a video.
          Margins: Set top and bottom margins for both desktop and mobile layouts.

            Hotspots Block:

            Add interactive hotspots on the media, opening on-demand content in a popup dialog.
            • Hotspot Title: Name each hotspot.
            • Title Position: Set the hotspot's placement relative to the media.
            • On-Demand Content: Choose content to be displayed in a popup. Contains an image, video, and text. 

            Text Blocks (Subheading, Heading, Text):

            Customize subheadings, headings, and rich text content with HTML tag selectors, size modifiers, and margins for both desktop and mobile layouts.

              Button Block:

              Add customizable buttons with editable names, links, styles (Primary, Secondary, Link), and size options, alongside adjustable margins.