Unlock Advanced Product Showcases in Kalles: How to Add Interactive Image Hotspots to Your Shopify Store

Hey there, fellow store owners! As a Shopify migration expert, I spend a lot of time diving into the nitty-gritty of themes and watching how our amazing community tackles common challenges. One thing I consistently see is the desire to push the boundaries of what a theme offers right out of the box. You invest in a powerful theme like Kalles, known for its versatility, but sometimes you just need that one specific section that isn't there.

That's exactly what happened recently in the forums. A store owner, saqlain1, was looking for a dynamic "image hotspot" section for their Kalles theme. You know the kind – where you have an image, and little numbered markers on it that, when hovered over or tapped, reveal more details about a specific feature. Think of it as an interactive product diagram. They even shared a great reference from fromourplace.com and a screenshot to illustrate their vision:

As `saqlain1` correctly pointed out, the Kalles theme doesn't have a built-in "hotspot" section like that. This is a common scenario: a great idea, but no ready-made theme section. This is where the power of custom code and the Shopify community truly shines!

The Community Steps In: Building a Custom Hotspot Section

Luckily, a brilliant community member, `ajaycodewiz`, jumped in with a fantastic solution that not only answers the question but provides all the code you'd need to implement this yourself. It's a perfect example of how with a little bit of Liquid, CSS, and JavaScript, you can extend your Shopify store's functionality significantly.

Here's what `ajaycodewiz`'s solution delivers:

• You can add numbered markers anywhere on an image.
• Each marker has a title and description, which also appear in a matching numbered list beside the image.
• Hovering or tapping a marker (or a list item) highlights it and shows its note, creating a truly interactive experience.
• On mobile, the image conveniently stacks above the list for optimal viewing.

How to Add This "Image Hotspots" Section to Your Kalles Theme

Ready to get this feature working on your store? Here are the step-by-step instructions provided by `ajaycodewiz` to add this custom section. Remember, always back up your theme before making any code changes!

1. Access Your Theme Code:
   • From your Shopify admin, go to Online Store > Themes.
   • Find your Kalles theme (it should be the "Current theme").
   • Click the Actions button (three dots `...`) and select Edit code.
2. Create a New Section File:
   • In the left sidebar, under the Sections directory, click Add a new section.
   • Name this new section image-hotspots.
   • Click Create section.
3. Paste the Code:
   • Delete all the sample content that Shopify automatically puts into the new image-hotspots.liquid file.
   • Paste the entire code block provided below into this file.
   • Click Save.

{%- comment -%}
  Image hotspots - numbered markers on an image with a matching list.
  Add via Online Store > Themes > Edit code > Sections > Add a new section.
{%- endcomment -%}




  

    

      {%- if section.settings.image != blank -%}
        
      {%- else -%}
        {{ 'product-1' | placeholder_svg_tag: 'ih__img' }}
      {%- endif -%}
      {%- for block in section.blocks -%}
        {{ forloop.index }}
        

          {%- if block.settings.title != blank -%}{{ block.settings.title }}{%- endif -%}
          {{ block.settings.text }}
        
      {%- endfor -%}
    

    

      {%- if section.settings.eyebrow != blank -%}
{{ section.settings.eyebrow }}
{%- endif -%}
      {%- if section.settings.heading != blank -%}
{{ section.settings.heading }}
{%- endif -%}
      

        {%- for block in section.blocks -%}
          

            {{ forloop.index }}
            

              {%- if block.settings.title != blank -%}
{{ block.settings.title }}
{%- endif -%}
              {%- if block.settings.text != blank -%}
{{ block.settings.text }}
{%- endif -%}
            
          
        {%- endfor -%}
      
    
  




{% schema %}
{
  "name": "Image hotspots",
  "tag": "section",
  "class": "section-image-hotspots",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Small label above heading" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Designed for Chef-Approved Cooking" },
    { "type": "range", "id": "heading_size", "min": 20, "max": 48, "step": 2, "unit": "px", "label": "Heading size", "default": 32 },
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "color", "id": "marker_color", "label": "Marker color", "default": "#8a3b1e" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#f4f2ee" },
    { "type": "range", "id": "max_width", "min": 800, "max": 1600, "step": 20, "unit": "px", "label": "Section max width", "default": 1200 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding top", "default": 48 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Padding bottom", "default": 48 }
  ],
  "blocks": [
    {
      "type": "hotspot",
      "name": "Hotspot",
      "settings": [
        { "type": "range", "id": "x", "min": 0, "max": 100, "step": 1, "unit": "%", "label": "Horizontal position", "default": 50 },
        { "type": "range", "id": "y", "min": 0, "max": 100, "step": 1, "unit": "%", "label": "Vertical position", "default": 50 },
        { "type": "text", "id": "title", "label": "Title", "default": "Feature" },
        { "type": "textarea", "id": "text", "label": "Description" }
      ]
    }
  ],
  "max_blocks": 8,
  "presets": [
    {
      "name": "Image hotspots",
      "blocks": [
        { "type": "hotspot", "settings": { "x": 62, "y": 12, "title": "Fully-sealed lid" } },
        { "type": "hotspot", "settings": { "x": 55, "y": 30, "title": "Balanced handle" } },
        { "type": "hotspot", "settings": { "x": 30, "y": 55, "title": "Titanium interior" } },
        { "type": "hotspot", "settings": { "x": 40, "y": 78, "title": "Tri-ply base" } },
        { "type": "hotspot", "settings": { "x": 48, "y": 44, "title": "Nonstick surface" } }
      ]
    }
  ]
}
{% endschema %}

4. Add the Section to Your Storefront:
   • Go back to your Shopify admin and navigate to Online Store > Themes.
   • Click Customize on your Kalles theme.
   • In the theme editor, navigate to the page where you want to add this section (e.g., a product page template, a custom page, or your homepage).
   • In the left sidebar, click Add section.
   • You'll now see "Image hotspots" as an option. Select it!
   • Fill in your images, headings, and add your individual "hotspot" blocks. For each hotspot, you can adjust its horizontal (X) and vertical (Y) position using sliders, and add a title and description.
   • Click Save to apply your changes.

And that's it! You've successfully added a dynamic and interactive image hotspot section to your Kalles theme, elevating your product pages and providing a richer experience for your customers. It's a fantastic example of how a bit of custom code, shared generously within the Shopify community, can empower store owners to achieve a truly unique look and feel. Keep experimenting and don't be afraid to dive into the code – that's where some of the most exciting customizations happen!