Elevate Your Product Pages: Adding Interactive Hotspot Sections to Kalles Shopify Theme

Hey there, fellow store owners! As a Shopify migration expert and someone who spends a lot of time digging into the community forums, I often come across fantastic questions that really highlight common challenges and opportunities for improving our stores. Recently, I saw a great question pop up that I just had to share with you all, especially those of you rocking the popular Kalles theme.

A store owner, saqlain1, was looking to add a super engaging, interactive section to their Kalles theme. They wanted something similar to a product page they'd seen, where an image of a product had numbered 'hotspots' on it. When you hover over or click these spots, a little description pops up, and a corresponding list on the side highlights, giving detailed info about each feature. It's a brilliant way to showcase product details without cluttering your page with text.

The Interactive Product Display Challenge

saqlain1 pointed to a fantastic example on fromourplace.com, specifically their Titanium Pro Cookware Set page, as the kind of dynamic section they were after. Take a look at what they were trying to replicate:

As saqlain1 correctly noted, this kind of "hotspot" or "numbered diagram" section isn't a standard, built-in feature of the Kalles theme. Many premium themes offer a lot of flexibility, but sometimes you need something truly custom to stand out. This is where the power of the Shopify platform and its amazing community really shines!

The Community Comes Through: A Custom Code Solution

Thankfully, one of our brilliant community experts, ajaycodewiz, jumped in with a fantastic, ready-to-implement custom code solution! They confirmed that Kalles doesn't have this built-in but provided a complete `image-hotspots` section that you can add directly to your theme. This custom section allows you to:

• Add numbered markers to any image.
• Drag and position these markers precisely using horizontal and vertical sliders in the theme customizer.
• Have a title and description for each marker, which also appears in a corresponding numbered list beside the image.
• Enjoy an interactive experience where hovering or tapping a marker (or its list item) highlights it and shows its note.
• Ensure a mobile-friendly display, stacking the image above the list on smaller screens.

Here's a preview of what this custom section looks like in action:

Step-by-Step: Adding the Image Hotspots Section to Your Kalles Theme

Ready to get this powerful section on your store? Here's how to do it. Remember, whenever you're editing theme code, it's always a good idea to duplicate your theme first as a backup. Just in case!

1. Navigate to Theme Code: From your Shopify admin, go to Online Store > Themes. Find your Kalles theme (it should be the published one), click the … (three dots) button, and then select Edit code.
2. Create a New Section: Under the Sections directory, click Add a new section.
3. Name Your Section: Name it image-hotspots.
4. Paste the Code: Delete any sample content that appears in the new image-hotspots.liquid file. Then, copy the entire code block provided below and paste it into the file.
5. Save Your Work: Click the Save button in the top right corner.
6. Add to Your Page: Now, go back to your Shopify admin and click Customize next to your theme to open the Theme Editor. In the editor, navigate to the page where you want to add this section (e.g., a product page, home page). Click Add section in the left sidebar, and you'll now see Image hotspots as an option.
7. Customize Your Hotspots: Select the Image hotspots section and start filling in your images, text, and positioning your markers! You'll be able to set an eyebrow text, a main heading, choose your image, and define marker and text colors. For each hotspot block, you can adjust its horizontal (X) and vertical (Y) position using sliders, add a title, and a detailed description.

The Custom Image Hotspots Code

{%- 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 %}

Why This Section is a Game-Changer for Your Store

Adding this custom image hotspots section can significantly boost your product pages' effectiveness and your customers' engagement. Instead of long paragraphs of text, you're providing a visually rich, interactive experience that draws the customer in. They can explore features at their own pace, making the discovery process more enjoyable and informative.

• Enhanced Engagement: Interactive elements keep visitors on your page longer.
• Clear Feature Highlights: Visually pinpoint specific product attributes.
• Improved User Experience: Offers an intuitive way to learn about complex products.
• Reduced Clutter: Keeps your product descriptions clean while still providing depth.
• Mobile Responsiveness: The provided code ensures it looks great on any device.

The schema (the JSON part within the {% schema %} tags) is crucial here. It defines all the customizable options you'll see in the Theme Editor, like the heading, image upload, marker colors, and individual hotspot positions. This means you don't need to touch the code again once it's installed; all the dynamic content and styling can be managed through the user-friendly Shopify Customizer.

It's truly inspiring to see how the Shopify community empowers store owners to achieve their unique vision, even when a specific feature isn't built into their chosen theme. With a little custom code, you can transform your product pages into dynamic, feature-rich experiences that genuinely resonate with your customers. Don't be afraid to experiment with these kinds of custom solutions – they can make a huge difference in how your products are perceived and ultimately, how well they sell!