Shopify Hotspots Section

Description of the Section

The Hotspots section allows you to create interactive image areas on your Shopify store. Each image can have multiple clickable hotspots that display additional information, like product descriptions, ratings, and links. This section is perfect for showcasing detailed product features, interactive guides, or promotional campaigns.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Premium Sections
3. Search for "Hotspots"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Product Feature Highlights: Use hotspots to draw attention to specific features of a product, such as additional pockets on a backpack, the quality of materials, or unique design elements.

2. Interactive Product Tours: Create a guided tour for more complex products. For example, a hotspot on each significant component of a tech gadget, explaining its function and benefits.

3. Virtual Showrooms: Build a virtual showroom where customers can click hotspots to explore different parts of a room setup or display.

4. Promotions and Offers: Highlight limited-time offers and promotions by adding actionable hotspots that link directly to the promotion page.

5. Educational Content: Use hotspots to provide more information about products in educational or instructional guides.

Overview of the Configuration Settings

The Hotspots section can be customized with a variety of settings:

Fonts

• Override theme fonts: Option to use custom fonts instead of the theme's default fonts.
• Headline Font: Choose a custom font for the headline.
• Text Font: Choose a custom font for the text.

Text

• Text Size: Adjust the text size.
• Text Line Height: Choose between multiple line height options.
• Text Color: Set the text color.
• Headline Size: Adjust the headline size.
• Headline Line Height: Choose the line height for headlines.
• Headline Color: Set the headline color.

Colors

• Background: Customize the section background with color or gradients.

Dimensions

• Max Width of Section: Specify the maximum width.
• Gap Between Images: Define the gap between images in the grid.
• Padding (Top, Bottom, Left, Right): Set padding for the section.
• Spacing between Elements: Adjust spacing between elements.

Display

• Display: Set the display configuration (Image on Right, Left, or stacked).
• Gap between columns: Specify the gap between columns.
• Media Aspect Ratio: Choose the aspect ratio of the media.
• Round Borders on Media: Adjust the border radius around the media.
• Subtle Shadow on Media: Enable or disable shadows on media.

Caption

• Caption Headline Size: Adjust the size of the caption headline.
• Caption Text Size: Set the size of the caption text.
• Caption Text Color: Define the color of the caption text.
• Caption Background: Customize the caption's background.
• Show Glass Effect: Enable or disable the glass effect on captions.

Content

• Image: Upload an image to be used in the section.
• Headline: Provide the headline text.
• Content: Add descriptive content.
• Content Alignment: Align the content (left, center, right).

Buttons

• Show buttons?: Toggle the visibility of buttons.
• Call to Action: Set the primary button's text.
• Call to Action Link: Provide a URL for the primary button.
• Show Secondary Action?: Display a secondary button.
• Secondary Call to Action: Set the secondary button's text.
• Secondary Call to Action Link: Provide a URL for the secondary button.

Button Style

• Primary Button Background Color: Customize the background color.
• Secondary Button Background Color: Customize the second button's background color.
• Primary Button Text Color: Set the text color for the primary button.
• Secondary Button Text Color: Set the text color for the secondary button.
• Text Size: Adjust the button text size.
• Padding (Top/Bottom, Left/Right): Set the button padding.
• Border Radius: Adjust the button border radius.
• Border Size: Set the border size for buttons.
• Border Color: Define the border color.

Blocks (Hotspots)

• Circle Size: Adjust the size of the hotspot circle.
• Text Size: Set the text size inside the hotspot.
• Text Color: Define the text color inside the hotspot.
• Background Color: Set the background color of the hotspot.
• Offsets (Horizontal, Vertical): Adjust the position offsets for hotspots.
• Opacity: Set the hotspot's opacity.
• Hotspot Text: Provide the hotspot text.
• Headline: Set the headline for the hotspot caption.
• Text: Provide additional text for the hotspot caption.
• Optional Link: Add a URL to link from the hotspot.
• Stars: Choose to display star ratings.
• Show Arrow on Hover?: Toggle the arrow visibility upon hover.
• Show Caption on Hover?: Toggle the caption visibility on hover.