Turn static images into engaging interactive experiences with Image hotspots. By adding clickable markers, you can highlight specific products or important details directly on the image. When customers interact with these markers, they can explore detailed information, quickly view related products, creating an intuitive and fun way to shop.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add Section button or hover below another section until the (➕) icon appears > In the Sections tab, scroll through the list or use the search bar to find and select Image hotspots
Reveal on scroll (Show animation when section becomes visible): Activates animations when the section becomes visible while scrolling, enhancing engagement and interactivity.
Make products full width: Expands product width to the full page width, optimizing display on large screens and creating an impactful layout.
Color scheme: Selects the color palette for the section, ensuring harmony with the overall website design and creating a unified visual experience.
Image: Upload the main image for the section.
Mobile image: Upload a separate image optimized for mobile devices (If none is set, desktop image will be used)
Top padding (Desktop/Mobile): Creates space above the content within an element, separating it from elements above and improving visual layout.
Bottom padding (Desktop/Mobile): Creates space below the content within an element, separating it from elements below and improving visual layout.
Page width: Define the maximum width of the website content, controlling the layout and readability across different screen sizes.
Reveal sections on scroll: Enable dynamic display effects for content sections as users scroll, enhancing interactivity and attracting attention.
Modal/drawer/popover color scheme: Select the color scheme for pop-up windows, drawers, or popovers, ensuring aesthetics and consistency with the overall design.
Placeholder for product no image: Choose the image to display when a product does not have an image, maintaining a visual and professional appearance.
Allows users to customize by adding CSS rules, beyond the limitations of default settings. This allows for fine-tuning the design to every detail, to suit specific needs.
Add custom styles to this section only.
To add custom styles to your entire online store, go to theme settings*
To add Product hotspot block to the Image hotspots section, click the Add item button (plus icon ➕) under the Image hotspots section.
Once the Product hotspot block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Hotspot style: Choose the display style for the hotspot (outline or solid), customizing the visual appearance of the marker.
Horizontal position: Define the horizontal position of the hotspot on the image (percentage), adjusting the precise placement according to the design.
Vertical position: Define the vertical position of the hotspot on the image (percentage), adjusting the precise placement according to the design.
Mobile horizontal position: Define the horizontal position of the hotspot on the image when displayed on mobile devices, optimizing the experience on smaller screens.
Mobile vertical position: Define the vertical position of the hotspot on the image when displayed on mobile devices, optimizing the experience on smaller screens.
Product: Select the product to link to the hotspot, allowing users to quickly view or access the product page upon interaction
Product style: Choose the display style for the product information when users interact with the hotspot (standard or card style), customizing the display appearance.
Enable quick view: Enable/disable the quick view feature when users click on the hotspot, allowing them to view product details in a pop-up window.
To add Richtext hotspot block to the Image hotspots section, click the Add item button (plus icon ➕) under the Image hotspots section.
Once the Richtext hotspot block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Hotspot style: Choose the display style for the hotspot (outline or solid), customizing the visual appearance of the marker.
Horizontal position: Define the horizontal position of the hotspot on the image (percentage), adjusting the precise placement according to the design.
Vertical position: Define the vertical position of the hotspot on the image (percentage), adjusting the precise placement according to the design.
Mobile horizontal position: Define the horizontal position of the hotspot on the image when displayed on mobile devices, optimizing the experience on smaller screens.
Mobile vertical position: Define the vertical position of the hotspot on the image when displayed on mobile devices, optimizing the experience on smaller screens.
Heading: Enter the main title, providing a clear and attention-grabbing headline for viewers.
Description: Enter a brief description, providing additional details or context for the heading.
Clicking on the Section header title under Image hotspots section, you can customize that section's settings in the left or right sidebar (depending on your screen size)
Use custom maximum width: Allows you to set a custom maximum width for the section content
Maximum width: Defines the maximum width of the section content, ensuring content displays proportionally and doesn't stretch excessively on large screens.
Alignment: Adjusts the alignment of content within the section (left, right, center), controlling the layout and creating visual balance.
To add Heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Heading: Enter the title text for the section, providing a clear and attention-grabbing title for viewers.
Heading size: Adjust the font size of the heading, creating emphasis and visual hierarchy for the content
Heading tag: (Will affect SEO): Select the HTML tag for the heading (eg: H1, H2, H3), affecting SEO structure and content hierarchy.
Uppercase: Convert the heading text to uppercase, creating emphasis and prominence.
To add Sub heading block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Sub heading block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Text block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Text block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content you want to display, allowing customization of the message and information conveyed.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design
Size: Adjust the font size of the text, ensuring readability and compatibility with the website layout (eg: Small, Medium, Large,...)
Hide on mobile: Hides or shows the text on mobile devices, optimizing the user experience on different screen sizes.
To add Caption block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Caption block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Text: Enter the text content for the element, conveying information or messages to users.
Font: Select the font style for the text, choose between font for body content and font for heading.
Size: Adjust the font size of the text (small, medium), controlling the displayed text size.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
Uppercase: Convert the text to uppercase, creating emphasis and highlighting the content.
To add Spacer block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Spacer block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
Space: Setting space between elements creates clear separation.
Tablet space: Optimizes the spacing between elements on tablet screens, ensuring content is displayed balanced and easy to interact with on medium-sized screen devices.
Mobile space: Adjusts the spacing between elements on mobile phone screens, optimizing the user experience on small screens
To add Icon block to the Section header, click the Add item button (plus icon ➕) under the Section header.
Once the Icon block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size)
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
Icon: Select an icon from the available library to display, enhancing visual appeal and conveying messages quickly.
Custom image icon: Upload your own custom image icon, enabling personalization and brand alignment.
Custom SVG icon: Use SVG icons from libraries like Remixicon or Tabler Icons, ensuring sharp image quality and scalability.
Icon height: Adjust the icon height on desktop screens, controlling the display size.
Tablet icon height: Adjust the icon height on tablet screens, optimizing display for this device.
Mobile icon height: Adjust the icon height on mobile phone screens, ensuring the icon displays appropriately on small screens.
Color: Select the color for the text, distinguishing between primary and secondary colors to match the design.
How to get an SVG icon?
Step 1: Click the link Get a svg remixicon, or tabler icons under Custom SVG icon option
Step 2: Search icon you want > Click the icon > click Copy SVG button
Step 3: Go back to theme customize and paste SVG icon into the field