Image Hotspot
The Image Hotspot section allows you to create an interactive shopping experience by placing clickable product hotspots directly on an image. Each hotspot links to a product, helping customers quickly explore featured items and complete purchases easily.
1. How to Add the Image Hotspot Section
- Log in to your Shopify Admin.
- Go to Online Store >> Themes.
- Click Customize on the Emoll-Apario theme.
- In the Theme Editor, click Add Section.
- Select the Image Hotspot section from the list.
- Click Save to apply the changes.
2. Image Hotspot Section Settings
The Image Hotspot section includes several settings that allow you to customize the appearance of the image and hotspot markers displayed on your store page.
-
Color Scheme:
Select a color scheme to control the background and text colors used in the Image Hotspot section. -
Section Width:
Select whether the section should appear in a Full Width layout or inside a Contained layout. -
Select Image:
Upload an image from your computer or select one from Shopify's free image library to use as the background image. -
Image Overlay:
Adjust the overlay opacity applied on the image. Increasing the value will darken the image slightly, making hotspot markers and content more visible. - Media Height: Modify the height of the image container.
- Product Card Style: Choose between different card styles for displaying product information.
- Image Ratio: Choose how product images should appear inside the product card. Options include Square, Portrait, or Adapt to Image.
- Show Badge: Shows the product badge on the product card.
- Show Product Options: Shows the product options on the product card such as size and color.
- Show Vendor: Displays the product vendor name on the product card.
- Quick Add: Allows customers to add products directly to their cart from the hotspot product card.
3. Hotspot Block Settings
Each hotspot can be configured individually using block settings. This allows you to link different products and position them precisely on the image.
- Add Hotspot Block: Click this option to add a new hotspot marker to the image.
- Select Product: Choose the product that will be linked to the hotspot marker.
- Hotspot Position: Adjust the position of the hotspot using X and Y axis values.
- Desktop Position: Set the horizontal (X) and vertical (Y) position of the hotspot for desktop screens.
- Mobile Position: Set the horizontal (X) and vertical (Y) position of the hotspot for mobile screens.