Sampo
documentation

Image with hotspots

General 

In most sections of the theme, you can customize various settings to match your design needs. These include:

  • Selecting a suitable color scheme.
  • Choosing the position of the content for desktop.
  • Adjusting text alignment for both desktop and mobile views.
  • Select the text content width.

These options provide flexibility to create a cohesive and visually appealing layout tailored to your store's style.

In the Image with Hotspots section, you have additional customization options on the section level:

  • Selecting Hotspot color and Hotspot label color.
  • Setting the section background to a gradient color.
  • Enabling numbers for the hotspots.
  • Choosing full-width buttons for mobile, if needed.
  • Hiding hotspot titles on mobile devices.

    Image and Hotspots

    1. Image:

      • Add an Image block to set the main image for the section.
      • In the block settings, adjust the overlay opacity and edit padding values for both desktop and mobile views.

    2. Hotspots:

      • Add hotspots to the image by including Hotspot blocks.
      • Hotspot Settings allow you to:
        • Define a label for the hotspot.
        • Set the position of the label (left/right).
        • Adjust the vertical and horizontal position of the hotspot on the image.

    When a hotspot is clicked, it opens a popup. For the popup, you can configure:

    • Text content.
    • Image or Video display.

      Headings, Text, and Buttons

      Add headings and text content next to the image with hotspots. You can also include buttons with links.

      Customization options include:

      • Defining different sizes for headings and buttons for desktop and mobile views.
      • Selecting a button style that aligns with your section and overall design

      Custom Spacing

      By using the custom spacing block you can easily adjust the top padding, top margin and bottom padding of any section to suit your design needs.

      Note: Values set in the custom spacing block will override those defined in the general theme settings, applying locally only to this specific section.

      Steps

      1. Open the theme editor and select the section you want to edit.
      2. Click the section name to open its settings, then find and click "Add block."
      3. Select "Custom Spacing" and define padding top, margin top and padding bottom values for the section.
      4. The values you set will override the general settings in the theme.