Banner with hotspots

Create engaging and interactive banners with clickable points (hotspots) that provide additional details about your products, features, or other relevant information.

How to add a Banner with hotspots section to your Shopify store

Steps:

1. In the theme editor (Customize), click Add section.

2. Locate Banner with hotspots section.

3. Make necessary changes.

4. Save.

How to customize a Banner with hotspots section

Section settings

Section header

Customize the text and alignment to ensure the banner effectively communicates your message and encourages engagement.

See settings

• Subheading: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.

• Heading: Enter the primary title for your banner.

• Heading size: Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.

• Text: Add a detailed explanation or summary for the banner. Use rich text formatting like bold, italic, links, and lists for better visual emphasis.

• Text size: Select the size of the description text.

• Button label: Input the text for the call-to-action button.

• Button link: Add a link to the button to direct users to a specific page, product, or collection.

• Button style: Choose a style for the button.

• Text alignment:

  • Align the text in the section to the Left, Center, or Right.

  • Adjust alignment based on your banner’s design and layout.

• Text alignment on Mobile: Override desktop alignment settings specifically for mobile devices if needed.

Banner settings

Configure the visual and functional elements of your banner, including the background images, hotspot icons, and additional details.

• Image and Mobile image: You can upload different images for desktop and mobile view separately.

• Icon style: Choose the apprearance of the hotspot icon.

Plus

Dot

• Icon color: Customize the color of the icons based on the banner’s background:

  • Light: Ideal for darker images.

  • Dark: Perfect for lighter backgrounds.

Block settings

Configure individual hotspots within the Banner with Hotspots section. Each hotspot is customizable, enabling you to provide additional context or highlight specific features on the banner.

General settings

• Image: Upload an optional image to represent the content in the hotspot pop-up card.

The image works for desktop view only.

Content settings

• Heading: Enter a concise title for the hotspot.

• Description: Add a brief description to provide more information about the feature or product.

Hotspot positioning

• Vertical alignment: Adjust the vertical position of the hotspot on the banner. The slider allows precise placement.

Example: Set to 50% to align the hotspot at the middle of the banner vertically.

• Horizontal alignment: Adjust the horizontal position of the hotspot.

Hotspot on mobile

You can adjust the position of the hotspots when a mobile image is selected.